-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpaxdei.html
723 lines (669 loc) · 40.8 KB
/
paxdei.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
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio - Amanda Alling Andrén</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("partials/header.html", function onclick(){
$('.sidenav').sidenav();
});
$("#fab").load("partials/fab.html", function onclick(){
$('.fixed-action-btn').floatingActionButton();
});
$("#footer").load("partials/footer.html");
});
</script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script src="https://kit.fontawesome.com/a98657c293.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
</head>
<body>
<header>
<div id="header"></div>
</header>
<!-- fixed action button -->
<div id="fab"></div>
<!-- Project section -->
<div class="parallax-container valign-wrapper" id="projects">
<div class="container">
<div class="row black rounded_corners" style="margin-top:40px;">
<div class="card card-background hoverable rounded_corners">
<div class="card-image center">
<img alt="Pax Dei logo on top of a screenshot from the game. A woman in medieval clothing is looking towards a forest." class="materialboxed responsive-img rounded_corners" src="images/projects/paxdei/paxdei_logo.jpeg">
<span class="card-title center col l10 offset-l1">
<div class="hide-on-small-screen">
<div class="roundbubble flow-text small-bubble-no-margain-bottom">UX</div>
<div class="roundbubble flow-text small-bubble-no-margain-bottom">Prototyping</div>
<div class="roundbubble flow-text small-bubble-no-margain-bottom">Testing</div>
<div class="roundbubble flow-text small-bubble-no-margain-bottom">PM</div>
<i class='devicon-xd-plain small-bubble-no-margain-bottom small-icon'></i>
<i class='small-bubble-no-margain-bottom'><img alt="Miro logo" src="images/projects/miro_icon_white.svg" width="60" height="60" style="margin-bottom:-3px;" class="none"/></i>
<i class="fab fa-steam small-bubble-no-margain-bottom small-icon" style="padding-top:0;"></i>
</div>
</span>
</div>
<div class="col s12 m12 l10 offset-l1" >
<h5 class="header white-text">Case Study</h5>
<h4 class="header" style="margin-top:0px;">Pax Dei</h4>
<p class="light flow-text ">
The team and I designed a traversal system for <a href='https://themainframe.com/en/' target='_blank'>Mainframe Industries</a>' sandbox MMO <a href='https://store.steampowered.com/app/1995520/Pax_Dei/' target='_blank'>Pax Dei</a>.
We conducted research and worked with an accessibility consultant to create six concepts, which we then prototyped and tested with blind individuals.
<br><br>
The final prototype, which included features such as an interactive map, navigation assistance, and audio narration, was well-received by testers.
I assisted with project planning, communication, testing, client contact, and prototyping/design.
<br><br>
<a href="#detailed" target="_blank">Jump to detailed case study</a>
</p>
</div>
</div>
</div>
<!-- <div class="row black rounded_corners" style="margin-top:40px;">
<div class="image col s12 m12 l4 offset-l1 center" style="margin-top:40px;">
<img alt="Audio prototype" class="materialboxed responsive-img projects" src="images/projects/paxdei/pax_dei.jpg" style="max-width:90%;margin: 0 auto;padding-bottom: 20px;">
<a href="https://xd.adobe.com/view/d4822d7d-c96e-4ab8-8f41-7bf25ea71137-81d1/" style="margin-bottom:20px;" target="_blank" class="btn-large waves-effect waves-light">try the prototype*</a>
<p class="img-caption">
* No sound? You might need to log in to Adobe Creative Cloud.
</p>
<div class="col" style="margin-bottom: 20px;">
<div class="roundbubble flow-text small-bubble" style="margin-left: 0px;">UX</div>
<div class="roundbubble flow-text small-bubble">Prototyping</div>
<div class="roundbubble flow-text small-bubble">Project Management</div>
<i class='small-bubble'><img alt="Miro logo" src="images/projects/miro_icon_white.svg" width="60" height="60" style="margin-bottom:-3px;" class="none"/></i>
<i class='devicon-photoshop-plain small-bubble small-icon'></i>
<i class='devicon-xd-plain small-bubble small-icon'></i>
</div>
</div>
<div class="col s12 m12 l6" style="padding-top:0px;margin-top:40px;">
<h5 class="header white-text" style="padding-left:10px;">Case Study</h5>
<h4 class="header" style="margin-top:0px;">Pax Dei</h4>
<p class="light flow-text ">
The team and I designed a traversal system for <a href='https://themainframe.com/en/' target='_blank'>Mainframe Industries</a>' sandbox MMO <a href='https://store.steampowered.com/app/1995520/Pax_Dei/' target='_blank'>Pax Dei</a>.
We conducted research and worked with an accessibility consultant to create six concepts, which we then prototyped and tested with blind individuals.
<br><br>
The final prototype, which included features such as an interactive map, navigation assistance, and audio narration, was well-received by testers.
I assisted with project planning, communication, testing, client contact, and prototyping/design.
<br><br>
<a href="#detailed" target="_blank">Jump to detailed case study</a>
</p>
</div>
</div> -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col s12 m12 l12">
<div class="divider"></div>
</div>
<div class="col s12 m12 l8 offset-l2">
<blockquote>
<p class="light flow-text"><i>
Their problem solving skills, organization and teamwork was truly inspiring.
The process used by the team was an almost flawless execution of the design thinking framework.
<br><br>
They have provided us with plenty of useful material that will help to create a better product in terms of accessibility
and additionally they might have laid the groundwork to enable blind gamers to navigate in
sandbox games, which would be an industry first.
<br><br>
We are extremely pleased with the work the four have been doing. We are excited to share these findings with
the games industry.
<br><br>
- <a href="https://www.linkedin.com/in/jasmin-dahncke-b163824b/" target="_blank">Jasmin Dahncke</a>, Senior UX Designer,
and <a href="https://www.linkedin.com/in/sulka/" target="_blank">Sulka Haro</a>, Design Director, at Mainframe Industries
</i></p>
</blockquote>
<p class="light flow-text">
These are excerpts from the
<a href="images/projects/paxdei/feedback.pdf" download target="_blank">feedback we received</a>!
</p>
</div>
<div class="col s12 m12 l12" id="">
<div class="divider"></div>
</div>
<div class="col s12 m12 l6">
<h6>DEFINING & RESEARCHING</h6>
<p class="light flow-text">
Our challenge was to design a solution for <a href="https://themainframe.com/en/" target="_blank">Mainframe Industries</a> to make the traversal system in their sandbox MMO <a href='https://store.steampowered.com/app/1995520/Pax_Dei/' target='_blank'>Pax Dei</a> accessible and enjoyable for totally blind individuals.
<br><br>
Throughout the project we worked closely with Mainframe Industries' Senior UX Designer Jasmin Dahncke and accessibility consultant Brandon Cole.
<br><br>
To gather insights, identify the main challenges faced by blind gamers, and inform the design, we conducted research through playtesting, benchmarking, interviews, and surveys.
</p>
</div>
<div class="col s12 m12 l6">
<figure>
<img alt="logo" class="materialboxed responsive-img projects" src="images/projects/paxdei/team.png">
<figcaption>
<p class="img-caption center">
The team, Brandon Cole (Accessibility consultant), and Jasmin Dahncke (Senior UX Designer at Mainframe)
</p>
</figcaption>
</figure>
<figure>
<img alt="Game posters: The Last of Us 2, Sea of Thieves, The Vale - Shadow of the Crown, Battlefield 2042, Assassins Creed Valhalla, Far Cry 6" class="materialboxed responsive-img projects" src="images/projects/paxdei/benchmarking.png">
<figcaption>
<p class="img-caption center">
Games with good blind accessibility
</p>
</figcaption>
</figure>
</div>
<div class="col s12 m12 l12" id="">
<div class="divider"></div>
</div>
<div class="col s12 m12 l6">
<figure>
<img alt="My concept sketch: a figure uses a map to set a waypoint, then tracks resources. It hears rock pings and audio narration descriptions of areas. It gets audio cues if it walks into a tree or close to a ledge." class="materialboxed responsive-img projects" src="images/projects/paxdei/concept_sketch.png">
<figcaption>
<p class="img-caption center">
A player journey and storyboard were created to guide the testing process
</p>
</figcaption>
</figure>
<figure>
<img alt="Our 6 concepts; interactive map, navigation assistance, audio narration, resources tracking, item scan, audio cues." class="materialboxed responsive-img projects" src="images/projects/paxdei/concepts.png">
<figcaption>
<p class="img-caption center">
Our 6 concepts
</p>
</figcaption>
</figure>
<figure>
<div class="videoContainer">
<iframe src="https://www.youtube.com/embed/5S62kmVLAlg"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
<figcaption>
<p class="img-caption center">
Highlight reactions from the test sessions
</p>
</figcaption>
</figure>
</div>
<div class="col s12 m12 l6">
<h6>PROTOTYPING & TESTING</h6>
<p class="light flow-text">
We developed several concepts to address the problem and, after consulting with the accessibility consultant, selected the most promising ones to prototype.
After developing an audio prototype we iterated based on feedback from player test sessions.
<br><br>
The tests identified several issues to be addressed in the next iteration, such as difficulties with setting a waypoint and understanding audio cues.
The second version of the prototype received positive feedback and the players completed the scenarios significantly faster than in the first version.
However, some players still struggled with finding information about resources in their current location and with understanding that "current location" was a menu option.
<br><br>
We addressed these issues in the final version, and concluded that customization and optional accessibility features would be important to consider implementing.
</div>
<div class="col s12 m12 l12" id="">
<div class="divider"></div>
</div>
<div class="col s12 m12 l6">
<h6>DELIVERY & TAKEAWAYS</h6>
<p class="light flow-text">
I presented our project to Mainframe Industries. The presentation received positive reactions and the I was able to answer detailed questions. Mainframe Industries was satisfied with the project and provided valuable feedback.
<br><br>
In a team retrospective following the project, the team identified a few key takeaways, including the importance of conducting a dry-run of tests and interviews, changing test scenarios between tests, and testing the online meeting place in advance. Additionally, the team emphasized the importance of explaining unusual words during the presentation.
</p>
</div>
<div class="col s12 m12 l6">
<figure>
<div class="videoContainer">
<iframe src="https://www.youtube.com/embed/j1F6eJ394H8"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
<figcaption>
<p class="img-caption center">
Watch the presentation
<br><br>
</p>
</figcaption>
</figure>
<div class="chatbox" style="margin-top: 10px;" type="textarea" >
<figure>
<p class="bubble you hoverable flow-text">"They really did an amazing job with this. They're way ahead of the vast majority of developers I've worked with when it comes to having a mindset for accessibility in games" <br>‒ Game Designer at Mainframe</p>
<figcaption>
<p class="bubble-figcaption center">
</p>
</figcaption>
</figure>
</div>
</div>
<div class="col s12 m12 l12" id="deliverables">
<div class="divider"></div>
</div>
<div class="col s12 m12 l6">
<figure>
<div class="videoContainer">
<iframe src="https://www.youtube.com/embed/IU1nFgTag5c"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
<figcaption>
<p class="img-caption center">
Prototype walkthrough
</p>
</figcaption>
</figure>
</div>
<div class="col s12 m12 l6">
<h6>RESOURCES & PROTOYPE</h6>
<p class="light flow-text">
We want to share our work, in the hope of more accessible games in the future!
</p>
<ul class="browser-default flow-text">
<li class="bullet"><a href="https://docs.google.com/document/d/1CLQTlVT8uru1q2gc6CUcXsBCbJIgmCsS/edit?usp=sharing&ouid=100451098787764042038&rtpof=true&sd=true" target="_blank">Benchmarking Document</a></li>
<li class="bullet"><a href="https://drive.google.com/file/d/1lqwAgYtbrhUpcrzp8vYzxfX4ehxtSmqt/view?usp=sharing" target="_blank">Design Specs</a></li>
<li class="bullet"><a href="https://drive.google.com/file/d/1X3RFzbSIfqWPkkwjkpdmCfJY9qXTpTrw/view?usp=sharing" target="_blank">Report</a></li>
<li class="bullet"><a href="https://drive.google.com/file/d/17lAnSC2b4wF1ohrUqvoEj7d76mdgAKxc/view?usp=sharing" target="_blank">Adobe XD Prototype (zip)</a></li>
<li class="bullet"><a href="https://xd.adobe.com/view/d4822d7d-c96e-4ab8-8f41-7bf25ea71137-81d1/" target="_blank">Adobe XD Prototype (link)</a></li>
</ul>
</div>
</div>
<div class="divider" id="detailed"></div>
<ul class="collapsible">
<li>
<div class="collapsible-header rounded_corners black center"><h6><a>Detailed Case Study</a></h6></div>
<div class="collapsible-body"><span>
<div class="row " style="line-height: 2rem;">
<div class="col s12 m12 l4">
<ul class=" flow-text" style="padding-left: 10px; margin-top: 20px;">
<li class="bullet"><a href="#defining" >1. Defining the Problem</a></li>
<li class="bullet"><a href="#research" >2. Research</a></li>
<li class="bullet"><a href="#concept" >3. Concept</a></li>
<li class="bullet"><a href="#developing" >4. Prototyping & Testings</a></li>
<li class="bullet"><a href="#delivering" >5. Delivery</a></li>
<li class="bullet"><a href="#takeaways" >6. Key takeaways</a></li>
<li class="bullet"><a href="#deliverables" >7. Deliverables & Documents</a></li>
</ul>
</div>
<div class="col s12 m12 l8">
<blockquote>
<p class="light flow-text"><i>
Their problem solving skills, organization and teamwork was truly inspiring.
The process used by the team was an almost flawless execution of the design thinking framework.
<br><br>
They have provided us with plenty of useful material that will help to create a better product in terms of accessibility
and additionally they might have laid the groundwork to enable blind gamers to navigate in
sandbox games, which would be an industry first.
<br><br>
- <a href="https://www.linkedin.com/in/jasmin-dahncke-b163824b/" target="_blank">Jasmin Dahncke</a>, Senior UX Designer,
and <a href="https://www.linkedin.com/in/sulka/" target="_blank">Sulka Haro</a>, Design Director, at Mainframe Industries
</i></p>
</blockquote>
</div>
<div class="row">
<div class="col s12 m12 l12" id="defining">
<div class="divider"></div>
</div>
<div class="col s12 m12 l6">
<h6>1. DEFINING THE PROBLEM</h6>
<h5>The Brief</h5>
<p class="light flow-text">
Our challenge was to design a solution for <a href="https://themainframe.com/en/" target="_blank">Mainframe Industries</a> to make the traversal system in their unannounced sandbox MMO more accessible and enjoyable for totally blind individuals.
</p>
<h5>Target Group</h5>
<p class="light flow-text">
Totally blind gamers.
</p>
<h5>Collaboration</h5>
<p class="light flow-text">
We frequently updated Mainframes Senior UX Designer Jasmin Dahncke on our progress, and she provided us with insights. Mainframe also put us in contact with the accessibility consultant Brandon Cole, who we worked with closely during the project.
</p> </div>
<div class="col s12 m12 l6">
<figure>
<a href="https://themainframe.com/en/" target="_blank"><img alt="logo" class="responsive-img projects" src="images/projects/paxdei/logo.png" style="padding-right:100px;padding-left:100px;"></a>
<figcaption>
<p class="img-caption center">
Mainframe Industries Logo
</p>
</figcaption>
</figure>
<figure>
<img alt="logo" class="materialboxed responsive-img projects" src="images/projects/paxdei/team.png">
<figcaption>
<p class="img-caption center">
The team, Brandon Cole (Accessibility consultant), and Jasmin Dahncke (Senior UX Designer at Mainframe)
</p>
</figcaption>
</figure>
</div>
<div class="col s12 m12 l12" id="research">
<div class="divider"></div>
</div>
<div class="col s12 m12 l6">
<figure>
<img alt="Game posters: The Last of Us 2, Sea of Thieves, The Vale - Shadow of the Crown, Battlefield 2042, Assassins Creed Valhalla, Far Cry 6" class="materialboxed responsive-img projects" src="images/projects/paxdei/benchmarking.png">
<figcaption>
<p class="img-caption center">
Games with good blind accessibility
</p>
</figcaption>
</figure>
</div>
<div class="col s12 m12 l6">
<h6>2. RESEARCH</h6>
<p class="light flow-text">
We defined our top research goals:
<br>How does a blind gamer play now?
<br>How do other games implement accessibility well?
<br>What was an accessibility design that failed in other games?
</p>
<h5 class="header">Playtest</h5>
<p class="light flow-text">
We played the game to understand the flow, the feeling, and their user journey.
</p>
<h5 class="header">Benchmarking</h5>
<p class="light flow-text">
During one of our first meetings we were assigned 3 game titles that had received praise for their accessibility settings.
<br><br>
We played these games in order to understand what was good, and what was bad.
</p>
<h5 class="header">Accessibility Consultant</h5>
<p class="light flow-text">
We discussed our benchmark findings and questions with the accessibility consultant before our interviews and surveys.
</p>
<h5 class="header">Interviews & surveys</h5>
<p class="light flow-text">
Before we could design any solutions we had to understand the main challenges that blind gamers face when they play.
<br><br>
We interviewed our target audience, and sent out surveys which helped us understand the challenges better.
</p>
</div>
<div class="col s12 m12 l12" id="concept">
<div class="divider"></div>
</div>
<div class="col s12 m12 l6">
<figure>
<img alt="My concept sketch: a figure uses a map to set a waypoint, then tracks resources. It hears rock pings and audio narration descriptions of areas. It gets audio cues if it walks into a tree or close to a ledge." class="materialboxed responsive-img projects" src="images/projects/paxdei/concept_sketch.png">
<figcaption>
<p class="img-caption center">
My concept sketch in the form of a user journey
</p>
</figcaption>
</figure>
<figure>
<img alt="Our 6 concepts" class="materialboxed responsive-img projects" src="images/projects/paxdei/concepts.png">
<figcaption>
<p class="img-caption center">
Our 6 concepts
</p>
</figcaption>
</figure>
</div>
<div class="col s12 m12 l6">
<h6>3. CONCEPT</h6>
<p class="light flow-text">
</p>
<h5 class="header">Concept sketches</h5>
<p class="light flow-text">
Each team member created a concept that would fulfill the brief. We then voted on the top solutions to iterate on during the prototyping.
</p>
<h5 class="header">Player journey & Storyboard</h5>
<p class="light flow-text">
We created a storyboard for the prototype and test flow for the player tests. This helped us create a better first test session.
</p>
<h5 class="header">Concepts</h5>
<p class="light flow-text" style="padding-bottom: 0px; margin-bottom: 10px;">
During our concept workshop we identified the top concepts:
</p>
<ul class="browser-default flow-text">
<li class="bullet">Interactive Map</li>
<li class="bullet">Navigation Assistance</li>
<li class="bullet">Resource Tracking (Audio Cue Toggle)</li>
<li class="bullet">Audio Narration</li>
<li class="bullet">Audio Cues + Audio Glossary</li>
<li class="bullet">Item Scan</li>
</ul>
<h5 class="header">Accessibility Consultant</h5>
<p class="light flow-text">
We discussed our ideas with the accessibility consultant before moving on to prototyping, and he approved all the concepts. He also explained more in detail how he would prefer the navigation assistance and map to work.
</p>
</div>
<div class="col s12 m12 l12" id="developing">
<div class="divider"></div>
</div>
<div class="col s12 m12 l6">
<h6>4. PROTOTYPING & TESTING</h6>
<p class="light flow-text">
We created an audio prototype which we iterated on, based on feedback from the player test sessions.
<br><br>
Due to technical issues with Adobe XD prototype sharing, we had to quickly adapt our test sessions. We realized that the button keybinds didn't work well in the browser, and that the testers needed to sign in to an adobe account in order to hear the audio. This forced us to improvise, and we solved it by pretending that the players used voice control and letting them tell us which buttons to press during the test session. This also gave us an opportunity to gather data regarding their preferred buttons for each interaction.
<h5 class="header">Version 1 top insights</h5>
<p class="light flow-text">
All the testers liked the interactive map, and loved the audio narration descriptions. Most could easily navigate both the menu and the environment, but we identified the key problems to fix in the next iteration:
</p>
<ul class="browser-default flow-text">
<li>40% of the users had trouble with setting Home as a waypoint</li>
<li>40% of the users had trouble understanding some audio cues</li>
<li>40% of the users wished the list would tell you how many items are in it</li>
<li>40% of the users wanted the map to immediately tell them their location when opened</li>
</ul>
<h5 class="header">Version 2 top insights</h5>
<p class="light flow-text">
The navigation worked much better during this version. Each tester completed the scenarios significantly faster than last time. We also gained insight into some details that could be made even better:
</p>
<ul class="browser-default flow-text">
<li>60% of the players struggled with finding information about resources in their current location</li>
<li>It wasn't clear to some players that "current location" was a menu</li>
<li>We realized that some audio cues were too similar</li>
</ul>
<h5 class="header">Summary of tests</h5>
<p class="light flow-text">
Overall, the players were engaged, excited, and positive about the prototype! The interactive map and audio narration descriptions were especially well liked, and several mentioned that they were excited to play the game in the future.
<br><br>
As with all players, each has specific preferences. As such, it is important that the accessibility features are customizable and optional.
</p>
</div>
<div class="col s12 m12 l6">
<figure>
<img alt="Player demographic: 5 players. 2 are 23 years old, 1 is 30 years old, 2 are 35 years old. 1 female, 4 males. All are from the US." class="materialboxed responsive-img projects" src="images/projects/paxdei/demographic.png">
<figcaption>
<p class="img-caption center">
Player demographic
</p>
</figcaption>
</figure>
<figure>
<div class="videoContainer">
<iframe src="https://www.youtube.com/embed/IU1nFgTag5c"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
<figcaption>
<p class="img-caption center">
Prototype walkthrough
</p>
</figcaption>
</figure>
<figure>
<div class="videoContainer">
<iframe src="https://www.youtube.com/embed/5S62kmVLAlg"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
<figcaption>
<p class="img-caption center">
Highlight reactions from the test sessions
</p>
</figcaption>
</figure>
</div>
<div class="col s12 m12 l12" id="delivering">
<div class="divider"></div>
</div>
<div class="col s12 m12 l6">
<figure>
<div class="videoContainer">
<iframe src="https://www.youtube.com/embed/j1F6eJ394H8"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
<figcaption>
<p class="img-caption center">
I presented our project to Mainframe Industries.
<br><br>
</p>
</figcaption>
</figure>
<div class="chatbox" style="margin-top: 10px;" type="textarea" >
<figure>
<p class="bubble you hoverable flow-text">"They really did an amazing job with this. They're way ahead of the vast majority of developers I've worked with when it comes to having a mindset for accessibility in games" <br>‒ Game Designer at Mainframe</p>
<p class="bubble you hoverable flow-text">"Gotta admit, I was so impressed with their work that I wanted to start pushing this stuff even more in our project. (...) this made me realize how we need to rewire people's thinking if we want to do this properly and not as an afterthought" <br>‒ Combat Lead at Mainframe</p>
<figcaption>
<p class="bubble-figcaption center">
Some of the reactions from Mainframe employees.
</p>
</figcaption>
</figure>
</div>
</div>
<div class="col s12 m12 l6">
<h6>5. DELIVERY</h6>
<p class="light flow-text">
About 20 of the coworkers joined us for the presentation online, but there was more watching on a big screen at the office.
<br><br>
We were delighted by the positive reactions, and we got to answer several detail-oriented questions.
<br><br>
Mainframe was very happy with our project, and we got some great <a href="images/projects/paxdei/feedback.pdf" download target="_blank">feedback</a>.
</p>
</div>
<div class="col s12 m12 l12" id="takeaways">
<div class="divider"></div>
</div>
<div class="col s12 m12 l6">
<h6>6. KEY TAKEAWAYS</h6>
<p class="light flow-text">
As always we did a team retrospective after the project!
</p>
<ul class="browser-default flow-text">
<li class="bullet">Always do a dry-run of the tests and interviews</li>
<li class="bullet">Change the test scenarios from test to test</li>
<li class="bullet">Test the online meeting place at least 2 times beforehand</li>
<li class="bullet">Explain unusual words in the presentation</li>
</ul>
</div>
<div class="col s12 m12 l6">
<figure>
<img alt="" class="materialboxed responsive-img projects" src="images/projects/paxdei/retrospective.png">
<figcaption>
<p class="img-caption center">
Our island retrospective!
</p>
</figcaption>
</figure>
</div>
<div class="col s12 m12 l12" id="deliverables">
<div class="divider"></div>
</div>
<div class="col s12 m12 l6">
<h6>7. DELIVERABLES & DOCUMENTS</h6>
<p class="light flow-text">
We want to share our work, in the hope of more accessible games in the future!
</p>
<ul class="browser-default flow-text">
<li class="bullet"><a href="https://docs.google.com/document/d/1CLQTlVT8uru1q2gc6CUcXsBCbJIgmCsS/edit?usp=sharing&ouid=100451098787764042038&rtpof=true&sd=true" target="_blank">Benchmarking document</a></li>
<li class="bullet"><a href="https://drive.google.com/file/d/1lqwAgYtbrhUpcrzp8vYzxfX4ehxtSmqt/view?usp=sharing" target="_blank">Design specs</a></li>
<li class="bullet"><a href="https://drive.google.com/file/d/17lAnSC2b4wF1ohrUqvoEj7d76mdgAKxc/view?usp=sharing" target="_blank">Adobe XD Prototype (zip)</a></li>
<li class="bullet"><a href="https://drive.google.com/file/d/1X3RFzbSIfqWPkkwjkpdmCfJY9qXTpTrw/view?usp=sharing" target="_blank">Report</a></li>
</ul>
</div>
<div class="col s12 m12 l6">
<a href="https://drive.google.com/file/d/17lAnSC2b4wF1ohrUqvoEj7d76mdgAKxc/view?usp=sharing" target="_blank">
<figure>
<img alt="" class="materialboxed responsive-img projects" src="images/projects/paxdei/prototype.png">
<figcaption>
<p class="img-caption center">
Download our prototype!
</p>
</figcaption>
</figure>
</a>
</div>
<div id="embedded_prototype">
<div class="center col s12 m12 l12">
<div class="divider"></div>
<h6 class="center">PROTOTYPE</h6>
<p class="light flow-text">
No sound? You might need to log in with a free Adobe account, or watch the video!
</p>
</div>
<div class="col s12 m12 l12 center">
<iframe style="border: 1px solid rgba(0, 0, 0, 0);" width="800" height="500" src="https://xd.adobe.com/embed/d4822d7d-c96e-4ab8-8f41-7bf25ea71137-81d1/" allowfullscreen></iframe>
</div>
</div>
<div class="center col s12 m12 l12">
<figure>
<div class="videoContainer">
<iframe src="https://www.youtube.com/embed/IU1nFgTag5c"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
<figcaption>
<p class="img-caption center">
Prototype walkthrough
</p>
</figcaption>
</figure>
</div>
</div>
<div class="divider"></div>
<div class="row " style="margin: 0rem;line-height: 2rem;">
</span></div>
</li>
</ul>
<div class="col s12 m12 l12 center">
<div class="divider"></div>
<a style="margin:40px;" href="index#projects" class="btn-large waves-effect waves-light">Back to projects</a>
</div>
<!-- These are not automatically imported to the pages -->
<div class="row">
<div class="col s12 m12 l12">
<div class="carousel" id="more_projects">
<a href="cities">
<div class="carousel-item rounded_corners">
<div class="card card-background hoverable">
<div class="card-image">
<img alt="Cities logo over a picture of a city skyline" class="center" src="images/projects/cities/cities.jpg">
</div>
</div>
</div>
</a>
<a href="madshot">
<div class="carousel-item rounded_corners">
<div class="card card-background hoverable">
<div class="card-image">
<img alt="Crypids logo" class="center" src="images/projects/madshot/MadShot_Poster.png">
</div>
</div>
</div>
</a>
<a href="paxdei">
<div class="carousel-item rounded_corners">
<div class="card card-background hoverable">
<div class="card-image">
<img alt="Pax Dei logo on top of a screenshot from the game. A woman in medieval clothing is looking out over the forest" class="center" src="images/projects/paxdei/pax_dei_2.jpeg">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Project section end -->
<!-- footer & contact section -->
<footer class="page-footer black" id="contact">
<div id="footer"></div>
</footer>
</body>
</html>