/
cs-meme.html
executable file
·554 lines (549 loc) · 34.8 KB
/
cs-meme.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
<!doctype html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-122458092-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-122458092-1');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Judy S. Wang">
<meta name="description" content="Welcome to the portfolio of Judy S. Wang, UX designer. A creative storyteller, visual strategist, and empathetic advocate of user-centered experiences. Check out my latest projects and drop me a line to say hello.">
<title>Judy S. Wang Portfolio</title>
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,400i,600,700" rel="stylesheet">
<!-- CSS -->
<!--<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">-->
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
<link href="styles/main-styles.css" rel="stylesheet" type="text/css">
<link href="styles/main-v2.css" rel="stylesheet" type="text/css">
<link href="styles/cs-meme.css" rel="stylesheet" type="text/css">
<link href="styles/accordion.css" rel="stylesheet" type="text/css">
<!-- favicon -->
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
</head>
<body>
<a name="navbar"></a>
<nav>
<div class="nav-wrapper">
<a href="index.html" class="logo-button"><img src="images/graphics/logo-abstract-j-pink.png" alt="navbar logo"></a>
<menu>
<a href="index.html" class="menu-button" id="work"> <span class="menu-text">WORK</span></a>
<a href="about.html" class="menu-button" id="bio"><span class="menu-text">BIO</span></a>
<!--<a href="docs/uxd-resume-judyswang.png" class="menu-button" target="_blank"><span class="menu-text">RESUME</span></a>-->
</menu>
</div>
</nav>
<section class="container shadow">
<header>
<section class="spacer-h50px"></section>
<!-- <section class="meme-header"></section>-->
</header>
<section class="article-wrap">
<article class="case-study"><a name=""></a>
<div class="title">
<h2>CASE STUDY</h2>
<h1>WHAT DO YOU MEME?<span class="superscript">TM</span> MOBILE GAME</h1>
</div>
<div class="intro">
<h2>ABOUT THIS PROJECT</h2>
<p> <b>PROBLEM: </b>Create a proof of concept for converting a popular tabletop game for adults, <a href="https://whatdoyoumeme.com/" target="_blank">What Do You Meme?™ (WDYM)</a>, into a mobile game. <!--Determine how receptive users would be towards playing a mobile version of WDYM.--> </p>
<br>
<p><b>SOLUTION:</b> Keep only the top three game mechanics and "translate" all others to fit within a mobile format by taking advantage of its native strengths (e.g. automation).</p>
<br>
<p><b>RESULT:</b> The interactive prototype MVP that I <a href="https://docs.google.com/presentation/d/1VT33nugPjAX0GPoXQyabDmBr69hUTR2bMBCBAlpmkCk/edit?usp=sharing" target="_blank">presented</a> to the stakeholders gave them the ability to experience the mobile game as a brief tutorial. </p>
<br>
<p><b>MY ROLE:</b> User Research, UX/UI, and Usability Testing on a solo capstone project.</p>
<br>
<p><b>MY TOOLS:</b> Figma, Axure, UsabilityHub.com, Google Forms, Loom, YouTube.</p>
</div>
</article>
<div class="view-prototype">
<a href="https://www.figma.com/proto/dipc3ctv6YzJXVP1idGQ3c82/meme-mobile--game-2?node-id=78%3A1460&scaling=min-zoom" class="button-link" target="_blank"> <span class="button-text">VIEW PROTOTYPE</span> </a>
<img src="images/cs-meme/meme-mobile-game.gif" alt="meme mobile game submit screen">
</div>
<section class="dark-solid-wrap">
<div class="screenshots-wrap snapshot-iterations">
<h2>SNAPSHOT OF ITERATIONS</h2>
<div class="screenshots-group">
<div class="screenshot"><h4>Sketch #1</h4><img src="images/cs-meme/prototype/prototype-design-process-1.png" alt="wireframe of launch screen"></div>
<div class="screenshot"><h4>Sketch #2</h4><img src="images/cs-meme/prototype/prototype-design-process-2.png" alt="wireframe of profile page"></div>
<div class="screenshot"><h4>Wireframe #1</h4><img src="images/cs-meme/prototype/prototype-design-process-3.png" alt="wireframe of settings window"></div>
<div class="screenshot"><h4>Wireframe #2</h4><img src="images/cs-meme/prototype/prototype-design-process-4.png" alt="wireframe of new cards"></div>
<div class="screenshot"><h4>Mockup #1</h4><img src="images/cs-meme/prototype/prototype-design-process-5.png" alt="wireframe of player's hand of cards"></div>
<div class="screenshot"><h4>Mockup #2</h4><img src="images/cs-meme/prototype/prototype-design-process-6.png" alt="wireframe for selecting a caption card"></div>
</div>
</div>
</section>
<article class="case-study">
<div class="summary">
<div class="spacing-div-h40px"></div>
<div class="spacing-div-h20px"></div>
<h2>SUMMARY</h2>
<div class="spacing-div-h20px"></div>
<p> The stakeholders asked the following questions: What would the mobile version of WDYM tabletop game look like? To what extent would it be possibile to preserve and incorporate all of its original game mechanics? Would a mobile game be appealing to their customers? They expected to use the results of this study to determine the amount of human and financial capital they would need to invest in order to build this product and the feasibility of this project.<br>
<br>
It was important to the stakeholders that their users experienced familiarity and a seamless transition in going from one format to the other. Based on design research and user tested results, I created a data-driven blueprint for building WDYM mobile game. In general, I was able to stay true to the original tabletop game and also introduced a few new features, such as a timer and a status update window, which allowed me to “translate” certain gameplay experiences into a better fit for the mobile game format. </p>
</div>
</article>
</section>
<!-- <section class="dark-meme-wrap">
<div class="process-wrap">
<h2>MY PROCESS</h2>
<div class="process-skills">
<div class="one-third">
<h3>RESEARCH</h3>
<ul>
<li>Interviews</li>
<li>Market Research</li>
<li>User Surveys</li>
<li>Field Study</li>
<li>Competitive Analysis</li>
<li>Personas</li>
</ul>
</div>
<div class="one-third">
<h3>INFO ARCH</h3>
<ul>
<li>Style Guide</li>
<li>User Stories</li>
<li>User Flows</li>
<li>Sketches</li>
<li>Wireframes</li>
<li>Mockups</li>
</ul>
</div>
<div class="one-third">
<h3>TESTING</h3>
<ul>
<li>Rapid Prototyping</li>
<li>A/B Testing</li>
<li>Usability Testing</li>
</ul>
</div>
</div>
<div class="role-n-tools">
<h3>MY TOOLS</h3>
<span>Figma, Axure RP, UsabilityHub, Slack, Google Forms, Loom, YouTube</span>
</div>
</div>
</section>-->
<section class="article-wrap">
<article class="case-study">
<div class="research">
<h2>RESEARCH</h2>
<br>
<img src="images/cs-meme/meme-card-game.png" class="meme-cards" alt="what do you meme card game">
<br>
<p> If you look into some of today’s most popular tabletop games — with classics, such as Monopoly and Clue, or modern favorites, such as Cards Against Humanity, Settlers of Catan, and Ticket to Ride — you would easily find a mobile version of these games. According to research firm, NewZoo, smartphone and tablet game revenues accounted for <a href="https://newzoo.com/insights/articles/the-global-games-market-will-reach-108-9-billion-in-2017-with-mobile-taking-42/" target="_blank">42% of the global games market in 2017</a> and projected trends show steady and continued growth over the next three years. Based on these figures, there is great opportunity for reaching a wider audience, especially given today's lifestyle where we have a close relationship with technology and depend so much on our mobile devices.</p>
<h3>GLOBAL GAMES MARKET</h3>
<a href="images/cs-meme/global_games_market_graph.png" target="_blank"><img src="images/cs-meme/global_games_market_graph.png" class="global-market" alt="chart of 2016-2020 global games market"></a> </div>
</article>
<div class="video-group">
<div class="video one-half">
<h3>RANKINGS & ANALYTICS</h3>
<div class="video-wrap">
<iframe width="" height="" src="https://www.youtube.com/embed/mLnN81OyS8U" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="video one-half">
<h3>FIELD STUDY</h3>
<div class="video-wrap">
<iframe width="" height="" src="https://www.youtube.com/embed/-wMjARChUO8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="research-spacer"></div>
</section>
<section class="dark-meme-wrap">
<div class="survey-wrap">
<h2>SURVEY RESULTS</h2>
<h1>HABITS OF MOBILE GAME USERS</h1>
<div class="data-row-group">
<div class="data-row"> <span class="percent">240%</span>
<p class="percent-detail">MORE top 100 ranked tabletop games on Android than iOS</p>
</div>
<div class="data-row"> <span>25%</span>
<p>play mobile games everyday</p>
</div>
<div class="data-row"> <span>67%</span>
<p>play mobile games 1-2x or more per week</p>
</div>
<div class="data-row"> <span>58%</span>
<p>play mobile games 4-6hrs or more per month</p>
</div>
<div class="data-row"> <span>50%</span>
<p>would download a mobile app that is popular in general or among their friends</p>
</div>
</div>
</div>
</section>
<section class="data-footnote">
<p><a href="https://docs.google.com/document/d/1UdeCH1Q-9qE3qUQBafOzOiA-u0Z4qtY8an4RlKsdG9o/edit?usp=sharing" target="_blank">*click here for links to all user survey results</a></p>
</section>
<section class="article-wrap">
<article class="case-study">
<div class="analysis">
<h3>COMPETITIVE ANALYSIS</h3>
<p> Based on the data I collected, I mapped out some of the differences in user experience between tabletop and mobile games. The chart below illustrates some of my key findings.</p>
</div>
</article>
<div class="analysis-chart-group">
<div class="one-half">
<h4>TABLETOP GAMES</h4>
<div class="analysis-chart">
<ul>
<li class="odd">Face-to-face human interaction</li>
<li class="even">Tactile feel of game board and pieces</li>
<li class="odd">Physical actions of moving game pieces, writing notes and points, shuffling cards</li>
<li class="even">Long instruction manuals for complex games</li>
<li class="odd">Longer game sessions (over many hours)</li>
<li class="even">Can be bought in stores or online</li>
</ul>
</div>
</div>
<div class="one-half">
<h4>MOBILE GAMES</h4>
<div class="analysis-chart">
<ul>
<li class="odd">Play with anyone, anywhere in the world</li>
<li class="even">No wear ‘n tear or missing game pieces</li>
<li class="odd">Automation of tracking, player order, actions, points, cards, and game pieces</li>
<li class="even">Computer guided practice game or tutorial</li>
<li class="odd">Shorter game sessions (until battery dies)</li>
<li class="even">Can download and play immediately</li>
</ul>
</div>
</div>
</div>
</section>
<section class="article-wrap">
<article class="case-study">
<div class="personas">
<h3>PERSONAS</h3>
<p> Once I had compiled all the collected data, I created three personas to represent the most common types of users I discovered.</p>
</div>
</article>
<div class="personas-group">
<div class="user-profile">
<div class="persona-img"><img src="images/cs-meme/01-persona-jason.png" alt="young white male using a tablet at a cafe"></div>
<div class="persona-details">
<h4>JASON LEVINE</h4>
<p> <strong>AGE:</strong> 28 <br>
<strong>OCCUPATION:</strong> Film Producer<br>
<strong>LOCATION:</strong> Atlanta, GA</p>
<br>
<q>I’m on the road a lot for work, but want to connect with my fiancee and loved ones in a fun and creative way.</q><br>
<br>
<p><strong>ABOUT</strong><br>
Jason works at a major film studio in Atlanta and travels often to shoot on-location. He loves books, video games, and photography in his spare time. He enjoys playing tabletop games with his fiancee, parents, and friends as a longtime tradition. He is always looking for new ways to stay connected with loved ones when he travels, and mobile games provide a great channel and outlet for relaxing and connecting. <br>
<br>
<strong>FRUSTRATIONS</strong> <br>
Some tabletop games can get boring • Board games don’t fit in his suitcase • Some mobile games can be difficult to navigate</p>
</div>
</div>
<div class="user-profile">
<div class="persona-img"><img src="images/cs-meme/02-persona-cathy.png" alt="senior japanese woman making cake batter"></div>
<div class="persona-details">
<h4>CATHY WATANABE</h4>
<p><strong>AGE:</strong> 73 <br>
<strong>OCCUPATION:</strong> Freelance Writer<br>
<strong>LOCATION:</strong> Huntington Beach, CA</p>
<br>
<q>Technology intimidates me because it changes so quickly and there’s a lot to learn.</q><br>
<br>
<p><strong>ABOUT</strong><br>
Cathy was born and raised in southern California. She’s a published author enjoying her retirement. For leisure, Cathy loves to scrapbook, sing in the church choir, and cook new recipes. Cathy enjoys spending time with her grandkids over the weekends and holidays. She is learning how to use Facebook and email, so she can stay in touch. Her grandkids have been teaching her about their favorite mobile games.<br>
<br>
<strong>FRUSTRATIONS</strong><br>
Technology is confusing and changes quickly • Complicated and confusing steps to setup a game session</p>
</div>
</div>
<div class="user-profile">
<div class="persona-img"><img src="images/cs-meme/03-persona-cory.png" alt="senior black male with white beard"></div>
<div class="persona-details">
<h4>CORY JACKSON</h4>
<p><strong>AGE:</strong> 55 <br>
<strong>OCCUPATION:</strong> Robotics Engineer<br>
<strong>LOCATION:</strong> Austin, TX</p>
<br>
<q>Playing mobile games sounds like a great idea for our family road trip this summer, but I prefer games that encourage family interaction.</q><br>
<br>
<p><strong>ABOUT</strong><br>
Cory loves computers and robots. He is often recruited by his family and friends to trouble-shoot their computer problems. With two kids in their mid-20s and a third kid finishing college next year, Cory is planning a summer RV trip with his immediate and extended family. All the kids suggest that they download some mobile games to pass the time on the road.<br>
<br>
<strong>FRUSTRATIONS</strong><br>
Single-player games defeat the purpose of family time • Some mobile games drain batteries too quickly </p>
</div>
</div>
</div>
</section>
<section class="article-wrap">
<article class="case-study">
<div class="info-arch">
<h2>INFORMATION ARCHITECTURE</h2>
<p>Using a process that was loosely inspired by the <a href="http://gamestorming.com/6-8-5s/" target="_blank">6-8-5 sketching game</a>, I spent 5-minutes <a href="https://jayesswang.files.wordpress.com/2018/05/meme-brainstorm-user-stories-20180418.pdf" target="_blank">brainstorming some initial ideas</a>, which helped me to map out and create <a href="https://docs.google.com/spreadsheets/d/1ZuKIvQFoIKjXd7-PZQzCncpRQuIykCZHn9wNsianbNA/edit?usp=sharing" target="_blank">user stories</a>, user flows, and a rough draft of the <a href="https://jayesswang.files.wordpress.com/2018/05/meme-tutorial-script-20180420.pdf" target="_blank">mobile game tutorial script</a>. </p>
</div>
</article>
<div class="container">
<section class="light-solid-wrap">
<div class="user-flows">
<h3>USER FLOWS</h3>
<img src="images/cs-meme/user-flow-player.png" alt="">
<div class="spacing-div-h40px"></div>
<div class="spacing-div-h20px"></div>
<img src="images/cs-meme/user-flow-judge.png" alt="">
</div>
<h3 class="sketches-title">STORYBOARDING</h3>
<div id="meme-sketches"></div>
</section>
</div>
<article class="case-study">
<div class="info-arch">
<div class="spacing-div-h20px"></div>
<p>With each <a href="https://jayesswang.files.wordpress.com/2018/05/meme-user-flows-sketches-20180419.pdf" target="_blank">iteration of sketches</a>, the user experience and layout of features began to take more shape and form, as old questions were answered and new questions came up. <br>
<br>
For example, where should the card decks go? Where should the avatars be placed? How large or small should we make the profile image? How would player’s differentiate between the judge’s deck or the player’s deck of cards? How would players keep track of the score? How would players get prompted and reminded when it’s his or her turn to be the judge? <br>
<br>
Once I had fleshed out my storyboards, I created wireframes based on the ideas that aligned the closest with the stakeholders' goals. <br></p>
</div>
</article>
</section>
<section class="dark-solid-wrap">
<div class="screenshots-wrap">
<h2>WIREFRAMES</h2>
<div class="screenshots-group">
<div class="screenshot"><h4>Menu</h4><img src="images/cs-meme/wireframe-01-launch-screen.png" alt="wireframe of launch screen"></div>
<div class="screenshot"><h4>Profile</h4><img src="images/cs-meme/wireframe-02-change-avatar.png" alt="wireframe of profile page"></div>
<!--<div class="screenshot"><h4>Settings</h4><img src="images/cs-meme/wireframe-03-settings.png" alt="wireframe of settings window"></div>-->
<div class="screenshot"><h4>New Cards</h4><img src="images/cs-meme/wireframe-04-flip-cards.png" alt="wireframe of new cards"></div>
<!--<div class="screenshot"><h4>Read Caption Cards</h4><img src="images/cs-meme/wireframe-05-read-captions.png" alt="wireframe of player's hand of cards"></div>-->
<div class="screenshot"><h4>Submit a Caption Card</h4><img src="images/cs-meme/wireframe-06-select-caption.png" alt="wireframe for selecting a caption card"></div>
</div>
</div>
</section>
<section class="spacing-div-h40px"></section>
<section class="article-wrap">
<article class="case-study">
<div class="style">
<h3>STYLE GUIDE</h3>
<p> The stakeholders emphasized that creating a functional and usable MVP was the highest priority. Also, the stakeholders asked that I adhere to the original branding and visual style of WDYM. <br>
<br>
I began by curating a moodboard of popular memes and images from the <a href="https://whatdoyoumeme.com" target="_blank">WDYM website</a>.</p>
<br>
<img src="images/cs-meme/meme-moodboard.png" alt=""><br>
<br>
<p>For type, I chose Helvetica, which is used in the WDYM Caption Cards, and Impact, which is considered the defacto meme font. For the color palette, I sampled colors from the WDYM logo. I also created a <a href="https://www.figma.com/file/dipc3ctv6YzJXVP1idGQ3c82/meme-mobile-game-2018" target="_blank">pattern library of components</a> that were used to build the mobile app, which allowed me to maintain consistency among all elements.</p>
<div class="style-guide">
<div class="style-guide-wrap">
<h5>COLOR PALETTE</h5>
<div class="color-palette">
<div class="color-wrap">
<div class="color-square" id="teal"></div>
<p>#27C7CA</p>
</div>
<div class="color-wrap">
<div class="color-square" id="eggplant"></div>
<p>#A7459A</p>
</div>
<div class="color-wrap">
<div class="color-square" id="yellow"></div>
<p>#FFE231</p>
</div>
<div class="color-wrap">
<div class="color-square" id="navy"></div>
<p>#332F79</p>
</div>
<div class="color-wrap">
<div class="color-square" id="drk-gray"></div>
<p>#666666</p>
</div>
<div class="color-wrap">
<div class="color-square" id="lt-gray"></div>
<p>#DADADA</p>
</div>
</div>
</div>
<div class="style-guide-wrap">
<h5>TYPOGRAPHY</h5>
<div class="type-group">
<div class="impact">
IMPACT 22pt. <br>
<span>ABCDEFGHIJKLMN<span></span>OPQRSTUVWXYZ</span>
<br>
</div>
<div class="helvetica">
<p>HELVETICA 18pt.</p>
<span>ABCDEFGHIJKLMN<span></span>OPQRSTUVWXYZ</span><br>
<span>abcdefghijklmn<span></span>opqrstuvwxyz</span>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
</article>
</section>
<section class="article-wrap">
<article class="case-study">
<div class="testing">
<h2>USABILITY TESTING</h2>
<p>I engaged in <a href="https://www.figma.com/file/dipc3ctv6YzJXVP1idGQ3c82/%23cs-meme?node-id=259%3A3773" target="_blank">rapid prototyping and iterated constantly</a> as I built the prototype from wireframes to mockups, testing each design frequently and applying user feedback quickly. <br>
<br>
Using Google Hangouts and screen sharing, I followed a <a href="https://jayesswang.files.wordpress.com/2018/05/script-ux-usability-test.pdf" target="_blank">usability test script</a> and remotely observed three users in real-time as they navigated through the prototype and completed a series of assigned tasks. Afterward, I compiled their <a href="https://docs.google.com/document/d/1eXM0MqZnDdgo-JbvImlenclDIpIdO4AnQ2Y2DbCTpEU/edit?usp=sharing" target="_blank">comments and feedback</a> into a Google Doc. <br>
<br>
In total, I cycled through roughly four iterations of prototypes and testing before arriving at the final deliverable. </p><br>
<div class="game-evolution">
<h4>1st Draft</h4>
<img src="images/cs-meme/meme-1st-to-final-version-1.png" alt="">
<div class="spacing-div-h20px"></div>
<h4>Final Prototype</h4>
<img src="images/cs-meme/meme-1st-to-final-version-2.png" alt="">
</div>
</div>
</article>
</section>
<section class="article-wrap">
<article class="case-study">
<div class="prototyping">
<h3>RAPID PROTOTYPING</h3>
<p>Here are some examples of how the mobile game features evolved through the design, testing, and iteration process: <br>
<br>
<strong>BACKGROUND:</strong> I combined some ideas from the moodboard in various ways and conducted A/B testing. Based on users’ responses, I created the final version of the mobile game’s background. [<a href="https://usabilityhub.com/tests/3e1e728dfd83/results/9851f3a5ddad" target="_blank">Background A/B Test</a>] <br>
<br>
<strong>BUTTONS:</strong> In the sketches, I initially started with a “drag + drop” feature for users to submit their Caption Card and draw new Caption Cards from the card deck. I choose this feature at first because of the trend in adding more interactivity and "bells and whistles" to digital products. However, when I noticed that users in the 50+ years age demographic tested negatively for this features, I had to rethink my decision. They complained that their thumbs obstructed their view, which increased their annoyance and reduced the joy they felt for the mobile game. In the end, I decided to use buttons because it was more widely accepted and brought a higher value to the most number of users. <br>
<br>
<strong>CAPTIONS:</strong> I designed the Caption Cards to overlay their caption on the Photo Card for a few reasons. Given that the mobile game format lives in the digital world, I wanted to replicate the experience of creating a meme, exactly as you would in real life. Also, given the wide age demographic of our users, I felt that seniors would likely have more difficulty reading the small print on the Caption Cards and would appreciate the caption displayed in a larger font over a Photo Card. Although some users commented that this feature confused them a little at the beginning of the tutorial, this same group did not express any frustration and remarked that they easily figured out what was happening.<br>
<br>
<strong>GAME STATUS:</strong> In any tabletop game, there’s always a person that keeps track of the game status, whose turn it is, and what actions need to happen next. I was able to solve that problem by introducing a status window that prompts all the players of the next action. Initially, I added an input field of emojis to allow players to like or respond to a caption. However, during user testing, I discovered that all of our users disliked this feature, citing that it was confusing or that they probably wouldn’t use it (in its current form). As a result, I removed the feature because it was unnecessary in an MVP and tabled it as a future option to revisit. <br>
<br>
<strong>TUTORIAL:</strong> I tested the tutorial script and colored text bubbles until I achieved a good balance of brevity and depth that would not bore current fans or confuse new fans. [<a href="https://usabilityhub.com/tests/7d7cff2fb6ec/results/a40b4f71be31" target="_blank">Preference Test #1</a> | <a href="https://usabilityhub.com/tests/f40bc8b797f8/results/779c4f656391" target="_blank">Preference Test #2</a>] <br>
<br>
<strong>TIMER:</strong> In Exploding Kittens mobile game, there was a gauge that moved based on a player’s likelihood of drawing the exploding kitten card (players avoided this card at all cost). This feature inspired me to introduce a timer to WDYM mobile game. With a timer, the mobile game created a greater sense of urgency, allowing players to experience the energetic pace of the tabletop game. Without the timer, I noticed that the players and judges took much longer to read and submit their Caption Cards. Once I added a timer, the users commented that they felt less distracted and more engaged in playing WDYM mobile game. The users differed in their preference of a countdown that ranged from 30- to 90-seconds. I took the average of both extremes and settled on a sweet spot of a 60-seconds timer.</p>
</div>
</article>
</section>
<div class="view-prototype">
<a href="https://www.figma.com/proto/dipc3ctv6YzJXVP1idGQ3c82/meme-mobile--game-2?node-id=78%3A1460&scaling=min-zoom" class="button-link" target="_blank"> <span class="button-text">VIEW PROTOTYPE</span> </a>
<img src="images/cs-meme/meme-mobile-game.gif" alt="meme mobile game submit screen">
</div>
<section class="dark-solid-wrap">
<div class="screenshots-wrap">
<h2>MOCKUPS</h2>
<div class="screenshots-group">
<div class="screenshot"><h4>Change Avatar</h4><img src="images/cs-meme/mockups/01-change-avatar.png" alt=""></div>
<div class="screenshot"><h4>Start Tutorial</h4><img src="images/cs-meme/mockups/02-start-screen.png" alt=""></div>
<div class="screenshot"><h4>Read a Caption Card</h4><img src="images/cs-meme/mockups/09-submit-card.png" alt=""></div>
<!--<div class="screenshot"><h4>Caption Card Submitted</h4><img src="images/cs-meme/mockups/10-card-sent.png" alt=""></div>-->
<!--<div class="screenshot"><h4>Observation Mode</h4><img src="images/cs-meme/mockups/11-gray-judges-cards.png" alt=""></div>-->
<!--<div class="screenshot"><h4>Judge Submits the Winner</h4><img src="images/cs-meme/mockups/12-gray-cards.png" alt=""></div>-->
<!--<div class="screenshot"><h4>New Round</h4><img src="images/cs-meme/mockups/14-new-photo-card.png" alt=""></div>-->
<div class="screenshot"><h4>Cards Submitted to Judge</h4><img src="images/cs-meme/mockups/15-shiba-cards.png" alt=""></div>
<div class="screenshot"><h4>Judge Reads Caption Cards</h4><img src="images/cs-meme/mockups/18-shiba-card.png" alt=""></div>
<div class="screenshot"><h4>Judge Selects a Winner</h4><img src="images/cs-meme/mockups/19-winner.png" alt=""></div>
</div>
</div>
</section>
<section class="article-wrap">
<article class="case-study">
<div class="conclusion">
<div class="spacing-div-h40px"></div>
<h2>WHAT I LEARNED</h2>
<p>Throughout the design process, I realized that many of the game mechanics in a tabletop game could not simply be converted directly into a mobile game. As I observed users in field studies, mapped out the similarities and differences in the tabletop and mobile versions of three test games, and sketched out various user flows and stories, it became clear to me that I had to think outside the box and find ways to "translate", not "convert", the experience. <br>
<br>
As I brainstormed and sketched ideas, I realized that some game mechanics were more important to preserve than others. Based on this insight, I listed all the game mechanics in WDYM (tabletop version) and narrowed them down to the three most important ones: </p><br>
<ol>
<li>Each player always had a deck of five caption cards in hand and would submit a card to pair with the photo card,</li>
<li>Each player would take a turn being the judge and choosing a winning caption, and</li>
<li>Once all the players had served as the judge, the round would end and a new round would begin.</li>
</ol><br>
<p>This framework ensured that I would be mindful of the "big picture" and stay on course to meet the most important goal for the stakeholders - that users would experience a seamless transition between the tabletop and mobile versions of WDYM. By highlighting these rules, I created constraints that channeled my creativity to innovate and offer alternative solutions in a productive and relevant way. <br>
<br>
I learned that the process of rapid prototyping, with frequent testing and constant iteration, ensured that I focused my time and efforts on building only the most neccessary and successful features and eliminating all the ineffective ones, even when the feedback surprised me. Most importantly, as I collected more data, I became more confident in advocating for certain design choices that may not seem "popular," "trendy," or "cool." <br>
<br>
In the end, I not only felt more emboldened to advocate on behalf of users, but also had the data and numbers to persuade C-level decision makers to greenlight the development phase of this project.
</p>
</div>
</article>
</section>
<section class="connect-block"><a name="contact-anchor"></a>
<div class="connect-wrap">
<h2 class="connect-heading">Wanna connect?</h2>
<p class="connect-text">I'd love to hear from you! To get in touch, please <a href="mailto:judyswang@gmail.com" >e-mail me</a> or say hello on <a href="https://www.linkedin.com/in/judywlee/" target="_blank">LinkedIn</a>. Also, please feel free to <a href="docs/uxd-resume-judyswang.ngf" target="_blank">download my resume</a>. </p>
</div>
</section>
</section>
<section class="bottom-nav">
<h2 id="more-projects">More Projects</h2>
<div class="container-900px projects-springboard">
<a href="cs-boxly.html" class="project-box pink-bkgd">
<div class="project-wrapper">
<p class="project-type">Case Study</p>
<h3 class="project-title capitalize-text bold-text">Boxly</h3>
<p class="project-category">Visual Design • UI/UX • Testing</p>
</div>
</a>
<a href="cs-meme.html" class="project-box pink-bkgd">
<div class="project-wrapper">
<p class="project-type">Case Study</p>
<h3 class="project-title capitalize-text bold-text">What Do You Meme?<br>
Mobile Game</h3>
<p class="project-category">User Research • UX/UI • Testing</p>
</div>
</a>
<a href="cs-folio.html" class="project-box black-bkgd">
<div class="project-wrapper">
<p class="project-type">Project</p>
<h3 class="project-title capitalize-text bold-text">CSS LAB: JW FOLIO</h3>
<p class="project-category">Responsive Design • Frontend</p>
</div>
</a>
<a href="daily-ui.html" class="project-box black-bkgd">
<div class="project-wrapper">
<p class="project-type">Project</p>
<h3 class="project-title capitalize-text bold-text">Daily UI</h3>
<p class="project-category">Design Patterns • Psychology</p>
</div>
</a>
<a href="https://jayesswang.wordpress.com" target="_blank" class="project-box black-bkgd">
<div class="project-wrapper">
<p class="project-type">Collection</p>
<h3 class="project-title capitalize-text bold-text">Untitled 2013-2018</h3>
<p class="project-category">Fashion Photography</p>
</div>
</a>
<div class="project-box gray-border">
<div class="project-wrapper">
<h3 id="coming-soon">Coming Soon!</h3>
</div>
</div>
</div>
</section>
<section class="footer-wrap">
<!--<section class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">MORE PROJECTS <span>▼</span></label>
<div class="down-triangle"></div>
<div class="tab-content">
<a href="cs-meme.html">WHAT DO YOU MEME?</a>
<a href="cs-boxly.html">BOXLY</a>
<a href="cs-folio.html">JW PORTFOLIO</a>
</div>
</section>-->
<footer>
<div class="social-footer-wrap">
<a href="mailto:judyswang@gmail.com" class="social-link" target="_blank"><span class="social-text">EMAIL</span> </a> <span>|</span>
<a href="https://www.linkedin.com/in/judywlee" class="social-link" target="_blank"><span class="social-text">LINKEDIN</span> </a> <span>|</span>
<a href="https://www.github.com/jayesswang" class="social-link" target="_blank"> <span class="social-text">GITHUB</span> </a>
</div>
<p class="copyright">Copyright ©2018-2022 Judy S. Wang <br>
Designed and developed by Judy S. Wang</p>
</footer>
</section>
</body>
</html>