-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnavigation-project.html
336 lines (264 loc) · 15.2 KB
/
navigation-project.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="Evie May's Portfolio">
<meta name="keywords" content="Portfolio, UX, User Experience, Evie May">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Evie May - Projects</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- ========== Other JS ========== -->
<script src="js/jquery.js"></script> <!-- jQuery -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap min -->
<script src="js/js/modernizr.custom.js"></script> <!-- Typed Js -->
<!-- ========== Main js file ========== -->
<script src="js/custom.js"></script> <!-- Main custom javascript file -->
<!-- FAVICON -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<!-- PRE LOADER -->
<div class="preloader">
<div class="spinner">
<span class="sk-inner-circle"></span>
</div>
</div>
<!-- MENU -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<!-- NAVBAR HEADER -->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<!-- lOGO -->
<a href="index.html" class="navbar-brand">Evie May</a>
</div>
<!-- MENU LINKS -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="Website-Resume.pdf">Resume</a></li>
<li><a href="contact.html">Let's talk</a></li>
</ul>
</div>
</div>
</div>
<!-- HEADER -->
<section id="header">
<div class="container">
<div class="row">
<div>
<h1 class="about-info">An Inclusive Navigation App</h1>
</div>
</div>
</div>
</section>
<!-- PROJECT DETAIL -->
<section id="project-detail">
<div class="container">
<div class="row">
<!--<div class="col-md-12 col-sm-12">
<div class="project-detail-image">
<img src="images/project-image.jpg" class="img-responsive" alt="">
</div>
</div>-->
<div class="col-md-12 col-sm-12">
<div class="project-detail-text">
<h2>Overview</h2>
<p>In fall of 2019 I took an Inclusive Design course at OSU. This course was focused on
how to design for inclusivity and the persona
development life cycle in order to properly represent and serve the underserved
populations. I was tasked to work on a team of four to design
an application that was inclusive to the Deaf community. In this case, we needed to
make our app usable to both mainstream users as
well as the deaf community. Our team met in person 1-2 times a week over the course
of ten weeks to work on this project.</p>
</div>
<div class="col-md-offset-1 col-md-4 col-sm-6">
<div class="project-detail-info">
<p>My Roles</p>
<h3>User Research</h3>
<h3>Persona Development</h3>
<h3>Wireframing</h3>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="project-detail-info">
<p>Tools</p>
<h3>Paper prototypes</h3>
<h3>Balsamiq</h3>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="project-detail-info">
<p>Time Frame</p>
<h3>10 Weeks</h3>
</div>
</div>
</div>
<div class="project-detail-text">
<h2>Research</h2>
<p>In order to fully understand who we were designing for, our group conducted a combination of
qualitative and quantitative research.
We focused mostly on learning about the underserved, deaf population. Our main sources for
data were through online articles and
informal personal interviews with deaf individuals. Since one team member had close
connections with friends who were deaf, she was
in charge of all the interviews. The rest of us collected data through research papers and
online personal anecdotes from deaf
individuals. We collected our findings on a shared google doc and later came together to
synthesize our findings.</p>
</div>
<div class="project-detail-text">
<h2>Persona Development</h2>
<p>We then took our research findings and created affinity diagrams. We layed out specific
facts we found through our research on a
table and categorized them into similar groupings. By doing this, we were able to create
facets for our persona skeletons.</p>
<div class="photo-box">
<img src="photos/Inclusive-Case-Study/Affinity.png" class="img-responsive" alt="">
</div>
<p>Our team created two personas; one representing the underserved population: a deaf
individual, and the other represented the
mainstream population. This way we had representation from the two ends of the spectrum of
potential users. From there we then
"fleshed out" our personas and further developed them:</p>
</div>
<div class="photo-box">
<div class="col-md-6 col-sm-6">
<img src="photos/Inclusive-Case-Study/Sam.png" class="img-responsive" alt="">
</div>
<div class="col-md-6 col-sm-6">
<img src="photos/Inclusive-Case-Study/Bailey.png" class="img-responsive" alt="">
</div>
</div>
<div class="project-detail-text">
<h2>Ideation</h2>
<p>After creating our personas, we were ready to begin wireframing. Each team member came up
with a couple rough sketch ideas on their own. We
then came together to share ideas. From there, we were able to further develop our
wireframe sketches.</p>
<p>We also participated in a classroom showcase where we displayed our wireframes and received
input from other teams. This allowed us to make
changes and improvements to our design so far.</p>
</div>
<div class="photo-box">
<div class="col-md-4">
<img src="photos/Inclusive-Case-Study/Wireframe1.png" class="img-responsive" alt="">
</div>
<div class="col-md-4">
<img src="photos/Inclusive-Case-Study/Wireframe2.png" class="img-responsive" alt="">
</div>
<div class="col-md-4">
<img src="photos/Inclusive-Case-Study/Wireframe3.png" class="img-responsive" alt="">
</div>
<div class="project-detail-text">
<p>-</p>
</div>
<div class="col-md-4">
<img src="photos/Inclusive-Case-Study/Wireframe4.png" class="img-responsive" alt="">
</div>
<div class="col-md-4">
<img src="photos/Inclusive-Case-Study/Wireframe5.png" class="img-responsive" alt="">
</div>
<div class="col-md-4">
<img src="photos/Inclusive-Case-Study/Wireframe6.png" class="img-responsive" alt="">
</div>
</div>
<div class="project-detail-text">
<h2>Usability Evaluation</h2>
<p>Once we had a low fidelity prototype we felt good about, our group conducted a cognitive
walkthrough using our two personas. With a goal in mind, we evaluated each step our
personas would need to make to navigate through our application. If we felt our persona
would not have made the choice we had intended, we noted it down and then revisited the
prototype afterwards to make the appropriate changes.</p>
</div>
<div class="photo-box">
<div class="responsive-project-img">
<img src="photos/Inclusive-Case-Study/Cog-walk1.png" class="img-responsive" alt="">
</div>
<div class="responsive-project-img">
<img src="photos/Inclusive-Case-Study/Cog-walk2.png" class="img-responsive" alt="">
</div>
</div>
<div class="project-detail-text">
<p>From there we participated in another classroom showcase were we were able to get input from
our classmates. We recieved some really great feedback
on our ambulance warning screen. From the feedback we recieved, we decided we needed to
flash a bright yellow screen quickly to grab the users
attention to inform them that there is an ambulance near them. After the showcase, we made
our final changes.</p>
</div>
<div class="project-detail-text">
<h2>Prototypes</h2>
<p>From here we moved on to develop a mid-fidelity prototype using Balsamiq. As a team, we
collaboratively designed the prototype.</p>
</div>
<div class="photo-box">
<div class="responsive-project-img">
<img src="photos/Inclusive-Case-Study/Ambulance1.png" class="img-responsive" alt="">
</div>
<div class="responsive-project-img">
<img src="photos/Inclusive-Case-Study/Ambulance2.png" class="img-responsive" alt="">
</div>
<div class="responsive-project-img">
<img src="photos/Inclusive-Case-Study/TurnLeft1.png" class="img-responsive" alt="">
</div>
<div class="responsive-project-img">
<img src="photos/Inclusive-Case-Study/TurnLeft2.png" class="img-responsive" alt="">
</div>
</div>
<div class="project-detail-text">
<h2>Reflection</h2>
<p>This project taught me the importance of designing for inclusivity. There is such a wide
range of reasons why a person might not be
able to use a piece of software. Designing with the user in mind is crucial in order to
prevent exclusion. I was also able to get a lot of
practice creating and working with personas.</p>
<p>Given more time and resources I would have liked to create high fidelity prototypes and
conduct user interviews on those, focusing on our underserved deaf population.</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-6">
<h2>Evie May</h2>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-info">
<h4>Want to work with me?</h4>
<p><a href="mailto:eviemay98@gmail.com">eviemay98@gmail.com</a></p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<ul class="social-icon">
<li><a href="https://github.com/eviemayy" class="fa fa-github"></a></li>
<li><a href="https://www.linkedin.com/in/evie-may-953511162/"
class="fa fa-linkedin-square"></a></li>
<li><a href="https://twitter.com/maryevelynmay" class="fa fa-twitter"></a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- SCRIPTS -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>