-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticle_ta.html
274 lines (223 loc) · 11.3 KB
/
article_ta.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="John Robb">
<title>Tissue Analytics Web Design - John Robb, UX Designer</title>
<!-- Normalize -->
<link href="css/normalize.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/6570aa56bc.js"></script>
<!-- Custom CSS -->
<link href="robbstrap.css" rel="stylesheet">
<link href="media.css" rel="stylesheet">
<!-- FancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,900' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-M688J4"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-M688J4');</script>
<!-- End Google Tag Manager -->
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Jr</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html#projects">Projects</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="article">
<div class="jumbotron" style="padding-right: 0" id="article-ta">
<div class="container col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8">
<h1>Tissue Analytics Landing Page Redesign</h1>
<p>August, 2015</p>
</div>
</div>
<!--Added "margin-bottom:96px" as a hack - otherwise the article would be blocked by the footer at the bottom on all articles-->
<div class="container col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6" style="margin-bottom:96px">
<p>
Tissue Analytics is a startup focused on developing a mobile medical app for the evaluation of chronic wounds and burns. As we were beginning to onboard our first trial customers, the Tissue Analytics landing page became one of the gatekeepers between an interested visitor and a paying customer.
</p>
<a class="fancybox" href="img/ta/old-website_01.png">
<img src="img/ta/old-website_01.png" class="img-responsive">
</a>
<p class="caption">Before the redesign</p>
<p>
The website was generated from a template, and the content and interactions were not created with the product or the user in mind.
</p>
<p>
Our current landing page was not responsive, and by looking at our analytics, I discovered that it was receiving 10% of traffic through mobile devices. I determined that this was enough reason to create a responsive website. UX pitfalls were scattered throughout the website including dead-end flows, off-target copy, and unnecessary clutter.
</p>
<h2>Challenges</h2>
<p>
<b>Time:</b> I had about 3 weeks to complete the redesign since no other designer would be hired to pick up the project once I left. I used a Jira Kanban board to keep myself on schedule.
</p>
<p>
<b>Team:</b> I was the only designer at the company, so I used my team to get feedback and ask questions throughout the design process.
</p>
<p>
<b>Experience:</b> I had not designed a full web landing page before, so research and competitive analysis would drive some decisions.
</p>
<h2>Process</h2>
<p>
After talking to a number of team members, I found out what users we would target for a free trial, and what information they would be looking for. I looked at competitors' websites as well as documentation on creating landing pages with high conversion rates.
</p>
<p>
First I completed some low-fidelity sketches to allow rapid iteration on the concept:
</p>
<a class="fancybox" href="img/ta/sketch_01.png">
<img src="img/ta/sketch_01.png" class="img-responsive">
</a>
<p>
I then moved into medium-fidelity wireframes:
</p>
<a class="fancybox" href="img/ta/wireframe_01.png">
<img src="img/ta/wireframe_01.png" class="img-responsive">
</a>
<p>
After many iterations of the high-fidelity designs, the landing page for web was finished:
</p>
<a class="fancybox" href="img/ta/corp-web_18.png">
<img src="img/ta/corp-web_18.png" class="img-responsive">
</a>
<p>
At this point I quickly learned the value of mobile-first design as I crunched full-width designs into mobile- and tablet-optimized screens:
</p>
<a class="fancybox" href="img/ta/mobile-tablet_03.png">
<img src="img/ta/mobile-tablet_03.png" class="img-responsive">
</a>
<p>
I exported the assets, sent them to our front-end developer, and maintained open communication throughout the implementation phase.
</p>
<p>
Two weeks later the website was up and running, and is live (with minor changes since I left the company) at <a href="https://www.tissue-analytics.com/" target="_blank">tissue-analytics.com</a>.
</p>
<h2>What I Would Do Differently</h2>
<p>
Creating a customer journey map could have illustrated onboarding problems to stakeholders, driving design solutions for the landing page as well as for future projects.
<br/><br/>
Using a mobile-first strategy would have saved time and effort in the design process.
</p>
<h2>What Went Well</h2>
<p>
Involving the entire startup throughout the process not only led to a product that we could all be proud of, but also encouraged communication between team members that did not typically get to work on mutual projects.
<br/><br/>
The project unveiled significant flaws in the website's workflow that were solved through design.
<br/><br/>
<b><a href="https://www.tissue-analytics.com/" target="_blank">View the Tissue Analytics landing page <i class="fa fa-chevron-right"></i></a></b></font>
<br/>
<hr/>
<h2>Other Work from Tissue Analytics</h2>
<p>
I redesigned the Tissue Analytics hybrid mobile application for iOS and Android. I used QML (a front-end cross-platform development language) to implement these designs.
</p>
<a class="fancybox" href="img/ta/portfolio_taMobileApp.png">
<img src="img/ta/portfolio_taMobileApp.png" class="img-responsive">
</a>
<p>
The dashboard of the Doctor/RN-facing Tissue Analytics web application, where administrators can track patient appointments and the progress of their wounds:
</p>
<a class="fancybox" href="img/ta/TA_Task Manager_17.png">
<img src="img/ta/TA_Task Manager_17.png" class="img-responsive">
</a>
<p>
I illustrated a series of silhouettes to be used on Tissue Analytics mobile app. A nurse would take a photo of a wound, then select the part of the body (the right leg is shown here) where the photo was taken.
</p>
<a class="fancybox" href="img/ta/leg.gif">
<img src="img/ta/leg.gif" class="img-responsive" style="width: 200px;">
</a>
</div>
</div>
<!-- <div class="container-fluid otherwork">
<div class="container col-xs-12 col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8">
<h3 style="text-align:center">Other Work</h3>
<div class="col-xs-4">
<a href="article_biz.html">
<img src="img/cover_biz.png" class="img-responsive center-block" style="max-height:168px">
<p>Business Magazine: UX Research</p>
</a>
</div>
<div class="col-xs-4">
<a href="article_critter.html">
<img src="img/cover_critter.png" class="img-responsive center-block" style="max-height:168px">
<p>Critter Mobile App</p>
</a>
</div>
<div class="col-xs-4">
<a href="article_nhc.html">
<img src="img/cover_nhc.png" class="img-responsive center-block" style="max-height:168px">
<p>Nursing Home Compare: Usability Test</p>
</a>
</div>
Row 2
<div class="col-xs-4 col-xs-offset-2">
<a href="article_pl.html">
<img src="img/cover_pl.png" class="img-responsive center-block" style="max-height:168px">
<p>Plainlanguage.gov: Information Architecture</p>
</a>
</div>
<div class="col-xs-4">
<a href="article_punchpal.html">
<img src="img/cover_pp.png" class="img-responsive center-block" style="max-height:168px">
<p>Kronos: Gamifying Workforce Timekeeping</p>
</a>
</div>
</div>
</div> -->
<footer class="footer">
<p>Coded up by John Robb</p>
</footer>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>