-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathuniversally.html
621 lines (464 loc) · 23.8 KB
/
universally.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
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
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
<!DOCTYPE html>
<html lang="en">
<head>
<title>universal.ly case study</title>
<!--Favicon-->
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta property='og:image' content="portfolio.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta property='og:image' content="pictures/universally.png">
<!-- External -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab+Highlight:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body style="margin:0; padding: 0">
<!-- NAVIGATION SECTION -->
<nav class="navbar navbar-expand-md">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<i class="fa-solid fa-bars black"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="index.html" class="nav-item nav-link black la link2 spotlight light mobileHide">✧</a>
</div>
<div class="navbar-nav ml-auto">
<a href="index.html" class="nav-item nav-link black la link2 spotlight light">Home</a>
<a href="#portfolio" class="nav-item nav-link black la link2 spotlight light">Selection</a>
<!--a href="#about" class="nav-item nav-link black la link2 spotlight light">About</a-->
<a href="https://drive.google.com/file/d/1Hfm1uXe4QhQysjZeVUTTWHaGtvF3K5bk/view?usp=drive_link" target="_blank" class="nav-item nav-link black la spotlight link2 light">Resume ⤴︎</a>
<a href="#footer" class="nav-item nav-link black la link2 spotlight light">Contact</a>
<!--a href="archive.html" class="nav-item nav-link black la link2 spotlight light">Archive</a-->
</div>
</div>
</nav>
<!-- CONTENT SECTION -->
<div class="container space2">
<div class="row">
<div class="col-sm-12" style="padding-top: 5%;">
<h1>universal.ly</h1>
</div>
</div>
</div>
<!--div class="container space2">
<div class="row">
<iframe class="diagram" src="https://docs.google.com/presentation/d/e/2PACX-1vTJ-fPcsTg3cyU_VYDcoi0J_RxWnC7wNTRVrqXvixqMrbNt8IVgr9iJlcOUvNzHorRvbC5vhWm3dfph/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div></div-->
<!--div class="container space2">
<div class="row">
<div class="col-sm-3">
<p> <span class="bold"> ROLE(S): </span> UX Researcher, UX Designer </p>
</div>
<div class="col-sm-5">
<p> <span class="bold"> TOOLS(S): </span> Figma, Google Form, Google Docs, Power BI, Zoom,
Calendly, Final Cut Pro </p>
</div>
<div class="col-sm-4">
<p> <span class="bold"> DURATION: </span> April - June 2021 </p>
</div>
</div>
</div-->
<div class="container space2">
<div class="row">
<div class="col-sm-12">
<h2>Problem</h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<p> Project universal.ly was started at University of Washington (UW) Seattle, in collaborated efforts with relevant departments, such as the Disability Resources for Students (DRS), to iterate
on solutions that can help streamline disability accommodation processes for students in higher
education. </p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4 class="insans"> how might we streamline disability accommodation processes for students in higher education?</h4>
</div>
</div>
</div>
<!--<div class="container">
<div class="row">
<div class="col-sm-12"> <p> A student named Antonio Milane made headlines when his petition to Stanford took off on social media. The university had accepted him, but had denied his request for accommodation.
The university ultimately retracted their statement and changed their position after receiving pressure online. Unfortunately, Antonio's experience isn't an uncommon one within higher education, as barriers still exist in many forms for students with disabilities.</p>
</div>
</div>
</div>-->
<div class="container space">
<div class="row">
<div class="flex-container">
<div> <img class="screen" src="pictures/universally/stats1.png" alt="In 2016 the number of US undergraduate students who had reported having a disability hovered around
11%."> </div>
<div> <img class="screen" src="pictures/universally/stats2.png" alt="Of the students who reported having a disability, only about 24% received the proper
accommodations they needed."> </div>
</div>
</div>
</div>
<div class="container space2">
<div class="row">
<div class="col-sm-12">
<p> With the increasing number of students pursuing higher education, there has been a greater demand on
universities to provide the proper accommodations. Despite expanded efforts to provide better academic resources and accommodations, the process of
applying for accommodations can be confusing and oftentimes entail a several weeks-long waiting
period, with no guarantee it'll be implemented properly. </p>
</div>
</div>
</div>
<!--<div class="container space2">
<div class="row">
<div class="col-sm-12"><ol>
<li> <span class="extrabold"> Artifact analysis: </span> compiled and investigated existing solutions (and/or tools) that aim to streamline disability accommodation processes for students in higher education.</li>
<li> <span class="extrabold"> Survey: </span> looked for pain points direct stakeholders (students) have in their disability accommodations processes (what it currently involves, what they look for, what they want to improve, and how).</li>
<li> <span class="extrabold"> Interviews: </span> gathered feedback on current process from indirect (DRS Staff and Professors) and direct stakeholders (students); how changes in the process would impact them.</li>
</div>
</div>
</div>-->
<div class="container space2" id="survey">
<div class="row">
<div class="col-sm-12" style="padding-top: 1%;">
<h2>Research</h2>
</div>
</div>
</div>
<div class="container space2">
<div class="row">
<div class="col-sm-6">
<p> From <span class="bold"> Surveys, </span> I looked for pain points direct stakeholders
(students) have in their disability accommodations processes (what it currently involves, what they
look for, what they want to improve, and how).</p>
<p> The full results were synthesized into a data visualization program, in Power BI. </p>
<!--h4 class="mont" style="text-align: left; padding-top: 2%;">click to interact & zoom</h4-->
<img style="max-width: 20vw; margin-left: 50%;" src="pictures/arrow.png">
</div>
<div class="col-sm-6">
<iframe title="universal.ly data Main Finding (w/ Demographics)" width="600" height="373.5" src="https://app.powerbi.com/view?r=eyJrIjoiNzJiN2M4Y2UtOTY4NC00YzNlLThkZDQtOWE1YjQ2NjEwMjliIiwidCI6ImY2YjZkZDViLWYwMmYtNDQxYS05OWEwLTE2MmFjNTA2MGJkMiIsImMiOjZ9" frameborder="0" allowFullScreen="true"></iframe>
</div>
<!--4 accounted for 51.95% of How would you rate the ease of this process?-->
</div>
</div>
<div class="container space2" style="padding-top: 3%;">
<div class="row">
<div class="col-sm-12">
<p> For the question, <span class="bold">"What changes would you make to the process?"</span> I coded the custom responses further through a process of <span class="bold">Thematic Analysis</span>
in a top-down approach, where I was able to highlight responses and look for similar pain points.
Through all the reponses, a total of 6 themes were coded:</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h3> 1. Documentation-related </h3>
<p>Varying documentations are required to apply for accommodations with the DRS. Out of the 21 respondents, 6 responses mentioned current documentation-related processes as a "barrier" and considered it "tricky".</p>
</div>
</div>
</div>
<div class="container">
<div class="flex-container"> <img class="diagram" src=pictures/universally/theme1.png alt="Coded Theme 1.">
</div>
</div>
<div class="container space5">
<div class="row">
<div class="col-sm-12">
<h3> 2. Transparency on accommodations </h3>
<p>As the other theme with most responses, 6 responses also indicated that they'd like more upforth transparency when it comes to the types of accommodations provided by the DRS. Most of the student responses in this category echoed a lack of information access.</p>
</div>
</div>
</div>
<div class="container">
<div class="flex-container"> <img class="diagram" src=pictures/universally/theme2.png alt="Coded Theme 2.">
</div>
</div>
<div class="container space5">
<div class="row">
<div class="col-sm-12">
<h3> 3. Unclear, tedious process </h3>
<p>Some survey respondents also suggested that the current process for applying and implementing disability accommodations were unclear or tedious, with responses in varied stages.</p>
</div>
</div>
</div>
<div class="container">
<div class="flex-container"> <img class="diagram" src=pictures/universally/theme5.png alt="Coded Theme 5.">
</div>
</div>
<div class="container space5">
<div class="row">
<div class="col-sm-12">
<h3> 4. User interface </h3>
<p>A few respondents noted the user interface of the website and myDRS form.</p>
</div>
</div>
</div>
<div class="container">
<div class="flex-container"> <img class="diagram" src=pictures/universally/theme6.png alt="Coded Theme 6.">
</div>
</div>
<div class="container space5">
<div class="row">
<div class="col-sm-12">
<h3> 5. Communication issues </h3>
<p>Some respondents brought up communication issues in its various forms thoughout their process.</p>
</div>
</div>
</div>
<div class="container">
<div class="flex-container"> <img class="diagram" src=pictures/universally/theme3.png alt="Coded Theme 3.">
</div>
</div>
<div class="container space5">
<div class="row">
<div class="col-sm-12">
<h3> 6. Delays / Lack of response </h3>
<p>Delays or a lack of response was also a common theme found throughout responses.</p>
</div>
</div>
</div>
<div class="container">
<div class="flex-container"> <img class="diagram" src=pictures/universally/theme4.png alt="Coded Theme 4.">
</div>
</div>
<div class="container space2" style="padding-top: 3%;">
<div class="row col-sm-12">
<p>In combination with the survey results, an <span class="bold"> Artifact Analysis</span> was
conducted to determine the best possible and feasible solution (example: whether a redesign, feature
updates, a whole new product, or something else entirely) to the problems stakeholders had. We compiled
and investigated existing solutions (and/or tools) that aim to streamline disability accommodation
processes for students in higher education.</p>
</div>
</div>
<div class="container space2">
<div class="row col-sm-12">
<p>This artifact analysis, together with the interviews and survey, helped decide what a feasible solution can look like - finalized as the DRS site redesign. The following are the various tools analyzed for the artifact analysis, based on how stakeholders currently communicate when it comes to disability accommodations:</p>
</div>
</div>
<div class="container space2">
<div class="row">
<div class="flex-container">
<div> <img class="screen" src="pictures/universally/artifact1.png" alt="Artifact Analysis Part 1, with emails and UW's internal online services form called myDRS."> </div>
<div> <img class="screen" src="pictures/universally/artifact2.png" alt="Artifact Analysis Part 2, with phone calls and UW's DRS website."> </div>
</div>
</div>
</div>
<div class="container space2">
<div class="row">
<div class="col-sm-12" style="padding-top: 3%;">
<h2>Empathize</h2>
</div>
</div>
</div>
<div class="container space2">
<div class="row col-sm-12">
<p> From <span class="bold"> Interviews, </span> we gathered feedback on current process from indirect
(DRS Staff and Professors) and direct stakeholders (students) to investigate how changes in the process
currently work for them and why changes may or may not help them.</p>
</div>
</div>
<div class="container space2">
<div class="row col-sm-12">
<div class="flex-container">
<div> <img class="screen" src="pictures/universally/persona1.png"
alt="Persona of DRS Staff Christina Mack"> </div>
<div> <img class="screen" src="pictures/universally/persona3.png"
alt="Persona of UW Professor Patricia Wilkerson"> </div>
</div>
</div>
</div>
<div class="container space2">
<div class="row col-sm-12">
<div class="flex-container">
<div> <img class="screen" src="pictures/universally/persona2.png"
alt="Persona of Student 1, Rick David"> </div>
<div> <img class="screen" src="pictures/universally/persona4.png"
alt="Persona of Student 2, Julia Petra"> </div>
</div>
</div>
</div>
<div class="container space2">
<div class="row col-sm-12">
<p> Some other notable things to note from the interview with Christina is the fact that workload from other
UW campus, like Bothell and Tacoma, also gets passed on to the main campus in Seattle due to the lack of
personnel and funding, compared to the demand for DRS services.</p>
</div>
</div>
<div class="container space2">
<div class="row">
<div class="col-sm-12" style="padding-top: 3%;">
<h2>Information Architecture</h2>
</div>
</div>
</div>
<div class="container space2">
<div class="row">
<div class="col-sm-12">
<p> The following sitemap was made while sifting through the DRS site to point out how the feature updates we were suggesting can be easily and realistically integrated into the website:</p>
</div>
</div>
</div>
<div class="container">
<div class="flex-container"> <img class="diagram" src=pictures/universally/sitemap.png
alt="DRS Sitemap with New Features Suggestion.">
</div>
</div>
<div class="container space2">
<div class="row">
<div class="col-sm-12" style="padding-top: 3%;">
<h2>Chosen Solution(s)</h2>
</div>
</div>
</div>
<div class="container space2">
<div class="row">
<div class="col-sm-12">
<p> After sketching some Lo-Fidelity designs, a Hi-Fidelity Design was finalized based on UW's brand identity, which includes their designated logo, colors, and fonts.
Feature updates to the main DRS site was chosen out of all the possible artifacts as it was the most feasible option realistically, and it also aligned with goals the DRS had as secondary stakeholders.</p>
</div>
</div>
</div>
<!--<div class="container">
<div class="flex-container"> <img class="diagram" src=pictures/universally/hi-fi1.png alt="Suggested Solution 1: New to DRS Quiz.">
</div>
</div>
<div class="container">
<div class="flex-container"> <img class="diagram" src=pictures/universally/hi-fi2.png alt="Suggested Solution 2: Information on Specified Documentation.">
</div>
</div>
<div class="container">
<div class="flex-container"> <img class="diagram" src=pictures/universally/hi-fi3.png alt="Suggested Solution 3: Information on Common Accommodations.">
</div>
</div>
<div class="container">
<div class="flex-container"> <img class="diagram" src=pictures/universally/hi-fi4.png alt="Suggested Solution 4: Feedback Form.">
</div>
</div>-->
<div class="container space2">
<div class="row col-sm-12">
<div class="flex-container">
<div> <img class="screen" src="pictures/universally/hi-fi1.png"
alt="Suggested Solution 1: New to DRS Quiz."> </div>
<div> <img class="screen" src="pictures/universally/hi-fi2.png"
alt="Suggested Solution 2: Information on Specified Documentation."> </div>
</div>
</div>
</div>
<div class="container space2">
<div class="row col-sm-12">
<div class="flex-container">
<div> <img class="screen" src="pictures/universally/hi-fi3.png"
alt="Suggested Solution 3: Information on Common Accommodations."> </div>
<div> <img class="screen" src="pictures/universally/hi-fi4.png"
alt="Suggested Solution 4: Feedback Form."> </div>
</div>
</div>
</div>
<!--<div class="bg">
<div class="figma">
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FvTSf2m2fMpq7dnXPETPray%2Funiversal.ly%3Fnode-id%3D26%253A3" allowfullscreen></iframe>
</div>
<p class="center">Figma file embedded showcasing prototype</p>
</div>-->
<div class="container space2">
<div class="row">
<div class="col-sm-12" style="padding-top: 3%;">
<h2>Impact</h2>
</div>
</div>
</div>
<div class="container space2">
<div class="row">
<div class="col-sm-12">
<p>In collaboration with the <a class="link" href="http://sdc.asuw.org/"> <i class="fas fa-external-link-alt"></i> Student Disability Commission (SDC) </a> and the Disability Resources for Students (DRS),
the student <a class="link" href="http://depts.washington.edu/uwdrs/current-students/accommodations/"> <i class="fas fa-external-link-alt"></i> Accommodations</a> page was restructured with the Information Architecture solutions we provided, creating more transparency for the 4000+ students who receive DRS accommodations across UW.
</p>
</div>
</div>
</div>
<!--<div class="container space2">
<div class="flex-container"> <iframe width="560" height="315" src="https://www.youtube.com/embed/tTJgtx8lwBI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p class="center">Youtube video containing walkthrough of universal.ly's UW DRS site redesign.</p>
</div>-->
<div class="container space2">
<div class="row">
<div class="col-sm-12">
<h2>Lessons Learned</h2>
</div>
</div>
</div>
<div class="container space2">
<div class="row">
<ul>
<li>Learned how to better handle and present participants' sensitive information (such as considering the extent of anonymizing data).</li>
<li>Successfully transferred research findings into implementation, through considering feasibility in ideation.</li>
<!--<li>This project also allowed me to learn how to think about ideating feasible products, to truly allow it to reach implementation, therefore creating impact beyond ideation.</li>-->
</ul>
</div>
</div>
<div class="container space2">
<div class="row">
<div class="col-sm-12">
<h2>What I Would Do Differently</h>
</div>
</div>
</div>
<div class="container space2">
<div class="row">
<ul>
<!--<li>Given less time constraints, more time could be spent on testing out our lo-fidelity sketches to better validate the various features.</li>-->
<li>As researcher, I would've ideally liked to take a more in-depth approach on coding the findings.</li>
<li>Some parts of the process that were split up between team members, transcription could be improved or more consistent for future references.</li>
</ul>
</div>
</div>
</body>
<!-- CONTENT END-->
<button class="scrollToTopBtn">☝️</button>
<!--div class="footer space2">
<h4 class="center"> project tags: #uxresearch #webdesign</h4>
</div-->
<!--FOOTER SECTION-->
<footer class="py-4 bg flex-shrink-0">
<div id="footer" class="container">
<h3 class="karla credits"> stay in touch ✍︎ </h3>
</div>
<div class="container">
<ul class="social-btns">
<li>
<a class="link3" href="https://www.linkedin.com/in/sidiknatasha" target="_blank">linkedin</a>
</li>
<li>
<a class="link3" href="mailto:sidiknatasha@gmail.com" target="_blank">email</a>
</li>
</ul>
</div>
<div class="container">
<hr>
</div>
<div class="container credits">
<p class="karla"> designed & developed by © Natasha A Sidik </p>
</div>
</footer>
</html>
<script src="script.js"> </script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>