-
Notifications
You must be signed in to change notification settings - Fork 1
/
github.html
83 lines (78 loc) · 4.81 KB
/
github.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Sara Hill, Product Design and Illustration</title>
<meta name="author" content="Sara Hill">
<meta name="description" content="Sara Hill, Product Design and Illustration">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="sarahill.css"/>
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css"/>
</head>
<body class="system-sans-serif">
<div class="mw10 ph5-m ph3 pt6-sm pt2">
<header>
<a href="index.html" class="db no-underline dim near-black">
<h1 class="site-title title-small dib mb0 f3">Hi, I'm Sara.</h1>
<h2 class="mt0 f5 fw4">Product Design and Illustration</h2>
</a>
</header>
</div>
<div class="mw7 center ph5-m ph4-sm ph3 pt6-sm pt5 lh-copy">
<h1 class="mb0 black-80">Pivotal Tracker Integrations</h1>
<h2 class="f5 fw4 black-60 mt0">UX Design, Interviews, Concept Testing, Wireframing, Prototyping, Design Lead</h2>
<div class="mt5">
<h3 class="mb0 black-60">Overview</h3>
<p class="lh-copy black-80">Pivotal Tracker is an agile product management tool that helps keep teams on track.
With a shared view of team priorities, a process that fosters collaboration, and dynamic tools to analyze progress, your team will deliver more frequently and consistently.</p>
</div>
<img class="mt5" src="images/integrations-acnt.png" alt="pivotal tracker integrations">
<div class="mt5">
<h3 class="mb0 black-60">Designing Integrations</h3>
<p class="lh-copy black-80">We have been working on a new way to manage and connect integrations across a team's account. Integrations
have always been managed at each individual project level but as teams grow and the need for multiple projects arise it can become
challenging to manage and share integrations across an account.</p>
<p class="lh-copy black-80">I started with an exploration of how we can move integration management to the account level while still maintaining
a seemless flow for users that primarily spend their time within a few projects.</p>
</div>
<div class="mt5">
<h3 class="mb0 black-60">User Flows</h3>
<p class="lh-copy black-80">One of the first integrations we started with was our GitHub integration. We found that
80% of our users are using GitHub but only a small portion were actually using the existing integration.
The reason for this is a combination of limited functionality and low visibility and communication within the
product that the integration even exists.
</p>
<img class="mv4" src="images/integration-flows.png" alt="pivotal tracker integrations">
<p class="lh-copy black-80">I started exploring and mapping out how a user would discover this and other integrations within the app with a
basic user flow showing the key touchpoints.</p>
<p class="lh-copy black-80">After mapping out the key toucpoints at a project and account level we got feedback from people on the team (Test/Supoort, Developers, Designers, PMs).
Throughout this process we were talking to customers to make sure we were going down the right path. We used InVision mocks and prototypes to have users walk
through discovering and configuring an integration to identify any points of confusion. As we found areas in the flows we needed to adjust, we would go back, iterate, and then
test some more.
</p>
</div>
<div class="mt5">
<img class="mv4" src="images/dboard-add.png" alt="pivotal tracker integrations">
<img src="images/auth.png" alt="pivotal tracker integrations">
</div>
</div>
<footer class="mw7 center ph5-m ph4-sm ph3 pv6-sm pv5">
<h1 class="f6 black-60">Find me elsewhere</h1>
<ul class="list pl0">
<li class="dib mr3"><a href="https://www.linkedin.com/in/sarashill" class="link bb dim black-90">LinkedIn</a></li>
<li class="dib mr3"><a href="https://twitter.com/sarahill22" class="link bb dim black-90">Twitter</a></li>
<li class="dib mr3"><a href="https://dribbble.com/sarahill" class="link bb dim black-90">Dribbble</a></li>
<li class="dib mr3"><a href="https://www.github.com/sarahill" class="link bb dim black-90">GitHub</a></li>
</ul>
</footer>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-107387067-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-107387067-1');
</script>
</body>
</html>