-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathUxCaseStudy.html
More file actions
384 lines (305 loc) · 13.3 KB
/
UxCaseStudy.html
File metadata and controls
384 lines (305 loc) · 13.3 KB
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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="css/blue_theme.css">
<link rel="stylesheet" type="text/css" href="css/caseStudy.css">
<link rel="stylesheet" type="text/css" href="css/contact.css">
<title>UX Portfolio: Case Study</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class='col-md-12'>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--p class="navbar-brand">Medicine Minder</p> -->
<div class="navbar-brand Contact"><a href="index.html">Main Portfolio</a></div>
<ul class="nav navbar-nav navbar-defualt ">
<li><a href="#research"> Interviews <span class="sr-only">(current)</span></a></li>
<li><a href="#persona"> Persona </a> </li>
<li><a href="#wireframe"> Wireframe </a> </li>
<li><a href="#prototype"> Prototype </a> </li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row MainTitle">
<div class='col-md-2'></div>
<div class='col-md-8'>
<h2>Medicine Minder</h2>
<a name="top"></a>
</div>
<div class='col-md-2'></div>
</div>
<div class="row Main">
<div class='col-md-2'></div>
<div class="col-md-8"> </div>
<div class='col-md-2'></div>
</div>
</div><!--row end -->
<div class="row">
<div class='col-md-1'></div>
<div class='col-md-10 Problem_Statement'>
<h3>A Case Study</h3>
<p>UX Case study of an app, I designed to remind people when it is time to order prescription refills. This is a walk through of my design process including a look at my journey map,<!-- There and Back Again --> sketches, wire frame, and prototype</p>
</div>
<div class='col-md-2'></div>
</div><!--row end -->
<div class="space"></div>
<div class="row">
<div class='col-md-1'></div>
<a name="research"></a>
<div class="col-md-2">
<img src="images/MM_survey2.jpg" id= 'Interview_img'>
</div>
<div class='col-md-8 Problem_Statement Interview'>
<h3>Interviews: Example Questions with Aggregated answers</h3>
<p>I interviewed potential users to see if there was a need for my product idea. Interviews were done in person or via email. I complied the responses to get a better feel for what my product needed.</p>
<ol>Sample Survey Questions
<li>Have you ever ran or almost ran out of a prescription?</li>
<ul><li>Yes, happens often, several times.</li></ul>
<li>How do You feel if you run out?</li>
<ul><li>Annoyed, Upset, Stupid, Worried, Irresponsible.</li></ul>
<li>What would help?</li>
<ul><li>Text, Push Notification, Email.</li></ul>
</ol>
</div>
<div class='col-md-1'></div>
</div><!--row end -->
<div class="space"> </div>
<div class="row">
<div class='col-md-1'></div>
<div class='col-md-10 Problem_Statement'>
<h3>How might we prevent running out of a prescription?</h3>
<ol><h3>Goals</h3>
<li>Help families stay healthy by preventing lapses in medicine supply.</li>
<li>Give a User an early warning that their pill supply is low.</li>
</ol>
<h3>Proposal</h3>
<ol>
<li>System to calculate when a pill supply is low and advises user to call pharmacy.</li>
</ol>
<h3>Competition</h3>
<ol>
<li>There are applications that can track multiple prescriptions and look for drug interactions. They have reminders as premium level addition.</li>
<li>Many pharmacies have a refill alert but that is tied to that Chain of pharmacies.</li>
</ol>
<h3>What makes this idea better</h3>
<ol>
<li>Medicine Minder can track all prescriptions regardless of the which chain fills the prescriptions. Interviews revealed some people price shop pharmacies for better deals, with medicine minder they can do that. </li>
</ol>
</div>
<div class='col-md-2'></div>
</div><!--row end -->
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-10 Information">
<h3>Persona</h3>
<p>I complied the interviews to create a Persona or primary user. Primary user is someone that is tired of running out of her family's prescriptions. She is busy juggling life, work, kids and needs an easy way to track the level of family prescriptions.</p>
<div class='col-md-1'></div>
</div>
</div><!--row end -->
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-10 ShoutOutBox Persona">
<div class="row">
<div class="col-md-4 testdiv">
<a name="persona"></a>
<div class="col-md-12"><h3>Carrie Stoud</h3></div>
<div class="col-md-12"><img class='PersonaImage' src="images/PersonaPortrait.jpg"></div>
</div>
<div class="col-md-4">
<div>
<h3>Persona</h3>
<ul>
<li><strong>Age Bracket:</strong> 35-44</li>
<li><strong>Occupation:</strong> QA Analyst</li>
<li><strong>Family:</strong> Married, kids</li>
<li><strong>Persona:</strong> End User</li>
</ul>
</div>
<div class="space"></div>
<div class="ShoutOutBox">
<h3>Goals</h3>
<ol>
<li>Easy & Clear understanding of Pharmacy needs</li>
<li>To keep her family healthy.</li>
<li>Spend time with kids after work.</li>
<li>Reduce paper work</li>
</ol>
</div>
<div class="space"></div>
</div>
<div class="col-md-4"><h3>Technology Preferences</h3>
<ol>
<li>Prefers Text over Phone Calls</li>
<li>Automate it!</li>
<li>E-receipt over paper</li>
</ol>
</div>
<div class="col-md-4">
<h3>Quote</h3>
<blockquote>
"I don't often have the time to count out the pills I have left."
</blockquote>
</div>
</div><!--end persona row -->
</div>
<div class='col-md-1'></div>
</div><!--row end -->
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-10 Information">
<h3>Journey Map</h3>
<p>A journey Map is a visual guide to the steps a user goes through to solve their problem. Jayne just noticed that she is low on pills and is worried that she won't get her refills in time. Once she has the app, she can chose how many days in advance to be alerted. She now gets an auto alert. It makes her happy that she can now call her pharmacy and get an refill order placed in advance.
</p>
<div class='col-md-1'></div>
</div>
</div><!--row end -->
<div class="row">
<div class="col-md-2"></div>
<div class='col-md-6 col-md-offset-1 ShoutOutBox'><img class='CoverImageimg' src="images/journey-map_web.jpg" height="525px" width="650px"></div>
</div><!--row end -->
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-10">
<a name="wireframe"></a>
<h3>Wireframe</h3><!-- Or There and Back Again -->
<p>I sketched a basic paper prototype in a note book. It took several iterations to get everything I wanted on the design. Then I showed to some people got some feedback then I moved on to a wire frame.</p>
</div>
<div class='col-md-1'></div>
</div><!--row end -->
<!--Sketck to wireframe -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<div class="row">
<div class='col-md-2'></div>
<div class="col-md-10">
<img src="images/MedMinder_sketch.jpg" height="300px" width="200px" class="PrototypeImage">
<img src="images/MM_arrow.jpg" width="200px" class="PrototypeArrow">
</div>
<div class="col-md-2"></div>
<div class='col-md-1'></div>
</div>
</div>
<div class="col-md-1">
</div>
<div class="col-md-4">
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-5 "></div>
<div class="col-md-5 ShoutOutBoxScript">
<img src="images/MedMinder_EnterScript.jpg" height="600px" width="400px">
</div>
<div class='col-md-1'></div>
</div>
</div><!-- end big pic div -->
<div class="col-md-1"></div>
</div><!-- sketch to wireframe -->
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-5 PrototypeInforomtion">Entry form for inputting prescription information.
I thought it would be easy to manually enter in the information. But after during a user studies, it was suggested to use the phone to scan the info off a bottle or receipt.
</div>
<div class="col-md-5"></div>
<div class='col-md-1'></div>
</div>
<a name="prototype"></a>
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-10">
<h3>Prototype</h3>
<p>I built a wire frame using the prototyping tool, UXpin. The interactive prototype allowed users to experience the proposed functions of the app. I was able to get feedback in person and online. The feedback helped to refine my concept.</p>
</div>
<div class='col-md-1'></div>
</div><!--row end -->
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-2"></div>
<div class="col-md-9 ShoutOutBox">
<img src="images/MedMinder_onBoard1_mockup.jpg" width="450px">
<img src="images/MedMinder_OnBoard3.jpg" width="450px">
</div>
<div class='col-md-1'></div>
</div>
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-6 PrototypeInforomtion">Onboarding screens with progress icons to show how many steps till completion. Allows user to select notification method and how far in advance to receive the notices.
</div>
<div class="col-md-4"> </div>
<div class='col-md-1'></div>
</div>
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-1"></div>
<div class="col-md-9 ShoutOutBox">
<img src="images/MM_cabinet.jpg" width="650px">
</div>
<div class='col-md-3'></div>
</div>
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-5 PrototypeInforomtion">
User can check her Medicine cabinet and with a glance, know how many pills she has left of all of her prescriptions. The screen also shows which ones will be running out soon so she can reorder multiple prescriptions at once.
</div>
<div class="col-md-5"> </div>
<div class='col-md-1'></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3 PrototypeInformation">User receives an alert when the pill supply is calculated to be down to a few days supply.<P>
<img src="images/MM_arrow.jpg" width="200px"></div>
<div class="col-md-4">
<img src="images/alert!.jpg" class="PrototypeAlert">
</div>
<div class='col-md-2'></div>
</div>
<div class="row">
<div class='col-md-1'></div>
<div class="col-md-10 Information">
<h3>Case Drawing</h3>
<p>The user notices she is out of pills. She forgot to call in a refill and will now have to wait two days before she can get a new supply.
With Medicine Minder she gets a text reminder two days before her last pill. She can tap a button to call her Pharmacy and request a refill. Then pick up her medicine without having to wait.
</p>
<div class='col-md-1'></div>
</div>
</div><!--row end -->
<div class="row">
<div class="col-md-2"></div>
<div class='col-md-6 col-md-offset-1 ShoutOutBox'><img class='CoverImage ' src="images/caseDraw.jpg">
</div>
</div><!--row end -->
<div class="row">
<div class='col-md-1'></div>
<div class='col-md-10'>
<nav class="navbar navbar-default navbar-static-bottom testnav">
<div class="container">
<div class="navbar-brand Contact"><a href="index.html">Main Portfolio</a></div>
<ul class="nav navbar-nav ">
<li> <a href="mailto:clj@ollure.com">Email Me</a></li>
<li><a href="https://www.linkedin.com/in/christopherljarvis" target="_blank">LinkedIn</a></li>
<li><a href="#top">Top</a></li>
</ul>
</div>
<div class='col-md-1'></div>
</nav>
</div>
</div>
</div><!--container-fluid end -->
</div></div>
</body>
</html>