-
Notifications
You must be signed in to change notification settings - Fork 0
/
project2_detail.html
582 lines (502 loc) · 44.5 KB
/
project2_detail.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112307082-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-112307082-1');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="../img/favicon.ico" />
<title>Huaiwei Sun | Philosophia</title>
<!-- Bootstrap core CSS -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> -->
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/responsive2.css"> -->
<!-- main CSS -->
<link rel="stylesheet" href="css/landing.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/project2.css">
<link href="https://fonts.googleapis.com/css?family=Cutive+Mono" rel="stylesheet">
</head>
<body>
<div id="fh5co-page">
<!-- Main Content -->
<div id="fh5co-main_detail">
<div class="fh5co-narrow-content">
<div id="Overview">
<div>
<img src="img/project2/overview_full.png">
</div>
<h2 class="page-header"><span style="color:#085eb9">01. </span>Overview</h2>
<hr>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 class="overview_subtitle" id="Objective">Design Objective</h3>
<p class="project-desc"><span style="font-weight: 600;">To improve the buying experience of gaming mice in BestBuy's brick and mortar stores through omnichannel experience design. We wanted to help our target users who stuggled with:<br>
- Poor selection of gaming mice and lack of related information in brick and mortar stores.<br>
- Lack of interaction with the mice in the display area and being unable to test them in real games.
</span></p>
<div class = "divide_40"></div>
<h3 class="overview_subtitle " id="Process">Process</h3>
<img style = "width:100%" src="img/project2/process.png">
<div class = "divide_40"></div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3 class="overview_subtitle">My Role</h3>
<p class="project-desc">1.In the divergent research part, we split the work and contribute to all the research almost equally. We did the field observation together. I finished the online walkthrough and decomposition of Logitech's website. I also helped with the distribution of survey and completed two interviews.<br>
2.In the convergent research part, I conducted contextual inquiry and helped with the distribution of survey. I also created the user journeys.<br>
3.In the design iteration, we worked together in the ideation, sketch and wireframe phases. When it came to prototype, I finished more than half of the hifi screens. After the project was over, I completed another iteration based on the feedback from users. I also contributed a lot to the cognitive walkthrough and benchmarking test both as the facilitator and the notetaker.</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3 class="overview_subtitle">Duration</h3>
<p class="project-desc">Sep. 2017 - Dec. 2017</p>
<h3 class="overview_subtitle">Project Team</h3>
<p class="project-desc">Huaiwei Sun | David Lacy | Nikhila Nyapathy | Sarah Brooks</p>
<!-- <h3 class="overview_subtitle" id="Approach">Process</h3>
<p class="project-desc">
<b>1.User Research:</b><br>
- Firstly, we collected and aggregated feedback from iOS stores, students, student club leaders. We also analyzed the data on Apple's App Analytics.<br>
- We conducted semi-structured interviews with our classmates and friends and probed to understand what they expected from this app.<br>
- Then, we did competitive analysis and learnt from similar apps on the market<br>
- Fianlly, we aggregated all the notes and used spreadsheets to analyze them to get the findings. And we created personas and formed user requirements for the following design iterations.<br>
<br>
<b>2.Desgin Iterations:</b><br>
- We started from the allocation of functions based on users' needs. Then we redesigned the information architecture according to the functions we decided to keep.<br>
- Then we explored the basic layout of the home screen and put forward different ideas. We evaluated them and picked one direction as a reference for the following design of wireframes and user flow of the whole app.<br>
- We created the wireframes and the basic user flow. We conducted internal reviews and tweaked them based on team members' feedback.<br>
<br>
- Next, we zoomed in on the hifi prototypes and finished one more round of iteration according to internal feedback.<br>
- Finally, we completed all the design of screens and user flow.<br>
- Unfortunately, due to the limit of time and skills we have, we didn't conduct usability tests in this project. We should have done some benchmarking tests to evaluate the usability or accessibility of our app and had one more iteration.<br>
<br>
<b>3.Development:</b><br>
- We export all the assets and specs and collaborated with iOS developers to actualize the design as accurate as possible.<br>
- After the devlopment, we shipped it to the iOS store in April 2017. We also carried out promotion within the university and introduced the new version of Tong Qu.<br>
- Finally, we used quantative from App Analytics and qualitative data from iOS store reviews to evaluate the impact of this update.
<br>
</p> -->
<h3 class="overview_subtitle">Tools</h3>
<p class="project-desc">Pen | Paper | Sketch | JustinMind | inVision</p>
</div>
</div>
<div id="Divergent">
<h2 class="page-header"><span style="color:#085eb9">02. </span>DIVERGENT RESEARCH</h2>
<hr>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="divide_20"></div>
<h3 class="overview_subtitle" id="Plan_1">Resaerch Plan</h3>
<p class = "project-desc">
<span style="font-weight: 600">Research goals:</span> <br>
1. <span style="font-weight: 600">Learnt about different contexts where users bought gaming mice.<br>
2. Discovered significant issues or potentials in each context.<br>
3. Compared different contexts and made a decision on which context to focus on in the following process.</span><br>
</p>
<br>
<p class = "project-desc">
<span style="font-weight: 600">Selection of Methods and Justification:</span> <br>
1. <span style="font-weight: 600; color: rgb(30,30,30);">Field Observation</span> - We visited a BestBuy store and a Target store. We observed the spatial layout of the store, the shelves for gaming mice and how users interacted with the environment. This method helped us discover some existing pain points in brick and mortar stores.<br></p>
<p class = "project-desc">
2. <span style="font-weight: 600; color: rgb(30,30,30)">Online Store Walk-through & Task Analyses</span> - We walked through the main online shopping platforms and conducted task analyses of buying a gaming mouse. This method helped us learn more about the buying process online and capture some existing pain points there.<br>
</p>
<p class = "project-desc">
3. <span style="font-weight: 600; color: rgb(30,30,30)">Website Decomposition</span> - We decomposed Logitech's website to learn about the basic components and flows for a online store.(We didn't choose Amazon or BestBuy because they were too complicated and had so many irrelevant parts).<br>
</p>
<p class = "project-desc">
4. <span style="font-weight: 600; color: rgb(30,30,30)">Survey</span> - We wanted to learn more about user's past experience of buying gaming mice at a large scale. So we created the survey and sent it to different gaming communities to quickly get responses and insights we needed.<br>
</p>
<p class = "project-desc">
5. <span style="font-weight: 600; color: rgb(30,30,30)">Semi-structured Interviews</span> - We wanted to learn more about people's past experiences within different retail contexts and more in-depth data like whys behind their behavior and thoughts. So we recruited 7 people who had prior buying experience of gaming mice and had 30-minute semi-structured interviews with them.<br>
</p>
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Observation">Field Observation</h3>
<p class = "project-desc">During our observation in BestBuy and Target, we found a lot of issues, including:<br>
<span style="font-weight: 600;">- Limited selections and information.<br>
- Restrictions to the display area and lack of interaction between customers and the gaming mice.<br>
- Lack of information of the price matching policy.<br>
- Accessibility issues caused by the high shelves.</span></p>
<img src="img/project2_detail/observation.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Walkthrough">Online Store Walk-through & Task Analyses </h3>
<p class = "project-desc">After the field observation, we studied 3 online stores(BestBuy.com, Amazon.com, Logitech.com) and conducted task analyses of buying a gaming mouse in each store. Following is our HTA chart for BestBuy.com.</span></p>
<p class = "project-desc"><span style="font-weight: 600;">The biggest pain point here was that people couldn't not touch and play with the gaming mice online when ergonomics were important.</p>
<div class="divide_20"></div>
<img src="img/project2_detail/task_analysis.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Decomposition">Website Decomposition</h3>
<p class = "project-desc">We decomposed Logitech's website to visualize the complex structure to further understand how pain points could arise from bad information architecture and function designs. The insights we found included:<br></p>
<p class = "project-desc"><span style="font-weight: 600;">
- The basic features for a online store included: List of products, Search, Compare, Product Details, Cart and Check out systems.<br>
- The brand Logitech G had an independent website which may confuse users when they missed it.<br>
- Prices of some products provided by other retailers like BestBuy were much cheaper than those on Logitech Website.<br>
- There was a lack of reviews from users for all the products.</span></p>
<div class="divide_20"></div>
<img src="img/project2_detail/website_decomposition.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Survey_1">Survey</h3>
<p class = "project-desc">After the investigation on both online and offline channels, we wanted to compare them at a large scale. We used survey to let users rate their buying experiences and explain why they had a good/bad experience.</p>
<p class = "project-desc"><span style="font-weight: 600;">- The overall result showed that the satisfaction rates of physical stores were lower than those of online stores.<br>
- The main pain point for online stores was that people could not try the mice.<br>
- The main pain point for physical stores was the limited selection. </span></p>
<img src="img/project2_detail/survey_1.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Interview_1">Semi-structured Interviews</h3>
<p class = "project-desc">With broad data gathered, we wanted to go deeper and learnt more about users' prior buying experiences of gaming mice. We conducted 7 semi-structured interviews to ask about participants' experiences and probe whys behind their behavior.</p>
<p class = "project-desc"> <span style="font-weight: 600;">We used affinity diagram to analyze the data collected here. </span></p>
<img class = "bottom_20" src="img/project2_detail/interview_1.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Affinity_diagram_1">Affinity Diagram</h3>
<p class = "project-desc">We had a note briefing session immediately after finishing the interviews. Then we used affinity diagram to categorize the notes we had and extracted the patterns of the purchase of gaming mice. The main patterns included:</p>
<p class = "project-desc"><span style="font-weight: 600;">- Technical features and ergonomics were very important to users.<br>
- Being able to try and feel the mice and the convenience of ordering online were in conflict.<br>
- In-depth research was necessary to our users.<br>
- Users wanted to get good deals within their budget.</span></p>
<div class="divide_20"></div>
<img src="img/project2_detail/affinity_diagram.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Comparison_of_contexts">Comparisons of contexts</h3>
<p class = "project-desc">Based on the data we collected from methods above, we conducted a comparative analysis to show the strengths and weaknesses of different modes of purchase.</p>
<img src="img/project2_detail/comparison.png">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Decision_of_context">Decision of Context</h3>
<p class = "project-desc">After a long team discussion, we finally decided that <span style="font-weight: 600;">we focused on how to improve the buying experience of gaming mice in BestBuy's brick and mortar stores through omnichannel experience design. Thus BestBuy physical store was our main target context.</span></p>
<img src="img/project2_detail/decision.png">
</div>
</div>
<div id="Convergent">
<div class="divide_80"></div>
<h2 class="page-header"><span style="color:#085eb9">03. </span>CONVERGENT RESEARCH</h2>
<hr>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 class="overview_subtitle" id="Plan_2">Resaerch Plan</h3>
<p class = "project-desc">
<span style="font-weight: 600">Research goals: <br>
1. Learnt more about BestBuy contexts and users who would potentially visit there to buy gaming mice.<br>
2. Researched and analyzed the entire process a user follows, before they visited the store, while in the store and after making a purchase.<br>
3. Generated the user requirements and design criteria for the following design phase.</span>
</p>
<br>
<p class = "project-desc">
<span style="font-weight: 600">Selection of Methods and Justification:</span> <br>
1. <span style="font-weight: 600; color: rgb(30,30,30);">Survey</span> - We had a very short survey for people who had in-store purchase experience of gaming mice in BestBuy. It was focused on issues users had experienced during in-store puchase and attributes of gaming mice they thought were important. We also collected demographic data about these participants for making personas and user journeys.<br></p>
<p class = "project-desc">
2. <span style="font-weight: 600; color: rgb(30,30,30)">Contexual Inquiry</span> - Where observations were too vague and surveys couldn’t give us in-depth details and enough whys behind the behavior, contextual inquiries could provide a better understanding of the user’s behavior within the context. With the help of participants, we could confirm all the touchpoints, emotional changes and potential issues within the BestBuy in-store context.<br>
</p>
<p class = "project-desc">
3. <span style="font-weight: 600; color: rgb(30,30,30)">Semi-structured Interview</span> - To gain a secondary perspective from a product expert who might elicit useful information on the problem space and other obstacles unbeknownst to the end-users or other designers, a semi-structured interview made sense as it allowed us to follow a guide but at the same time allowed the expert to give their input as it would bring up points which we probably would not be aware of.<br>
</p>
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Survey_2">Survey</h3>
<p class = "project-desc">First, we wanted to study the general purchase experiences of users in BestBuy's physical stores. Thus we used the survey and collected 114 valid responses from people who had bought gaming mice in BestBuy stores before.</p>
<p class = "project-desc"><span style="font-weight: 600">They rated the significance level of the pain points and the importance of different attributes of gaming mice in the survey.</span></p>
<img src="img/project2_detail/survey_2.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="contextual_inquiry">Contextual Inquiry</h3>
<p class = "project-desc">Then we delved deeper to collect some qualitative data. We conducted one contextual inquiry and two retrospective accounts of buying experiences in BestBuy. </p>
<p class = "project-desc"><span style="font-weight: 600">We observed and listened to how participants interacted with the context and asked questions based on it. We confirmed all the good points and pain points with the participants and probed the reasons behind them. We took the notes of these findings for the later analysis.</span> </p>
<img src="img/project2_detail/contextual_inquiry.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Interview_2">Semi-structured Interview</h3>
<p class = "project-desc">We also wanted the perspectives from the experts in BestBuy as a part of input. So we made appointment with an employee in BestBuy who had knowledge in the gaming department. The expert we interviewed was an Alienware specialist who was knowledgeable in gaming mice.</p>
<p class = "project-desc"><span style="font-weight: 600">We especially wanted to know if there were some restrictions on the clients who stocked their brands in store, and if so what they were. For example: are there limitations on what the client (eg: Logitech) can/cannot do in the store? Main questions are listed below.</span></p>
<img src="img/project2/interview_2.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Affinity_diagram_2">Affinity Diagram</h3>
<p class = "project-desc">We aggregated all the notes we collected from contextual inquiries and interviews and used affinity diagram to help us categorize all the insights we had. The main insights we distilled from the map included:</p>
<p class = "project-desc"><span style="font-weight: 600">
- Price may not be everthing for users since some of them cared more about the purchase experience they would get.<br>
- Users mainly conducted research online, through online stores, gaming communities, streaming platforms and reviews.<br>
- Important technical features included wired/wireless connection, programmable buttons, DPI setting, etc.<br>
- The biggest advantage for in-store context was that users could try and test the products.<br>
- However, BestBuy was not very knowledgable in the gaming field.<br>
- It also had service issues in terms of their complicated processes of price matching policy in physical stores.
</span></p>
<img src="img/project2_detail/affinity_diagram_2_1.png">
<div class="divide_20"></div>
<img src="img/project2_detail/affinity_diagram_2_2.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Personas">Personas & User Journeys</h3>
<p class = "project-desc">After collecting and analyzing all the data, we started to interprete them using different ways. </p>
<p class = "project-desc">
<span style="font-weight: 600">Firstly, based on the demographic data collected from survey and interviews, we concluded with two personas representing our typical users. Apart from personas, we described their buying experiences using journey maps.</span></p>
<div class="divide_20"></div>
<img src="img/project2_detail/persona_journey.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Empathy_map">Empathy Map</h3>
<p class = "project-desc">We also created two empathy maps to supplement the personas to help us better understand users' needs and guide us in the design phases.</p>
<img src="img/project2_detail/empathy_map_1.png">
<div class="divide_20"></div>
<img src="img/project2_detail/empathy_map_2.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Requirements">User Requirements and Design Criteria</h3>
<p class = "project-desc">Finally, we combined all the insights we had and listed user requirements, design criteria and the priority in this table which would lead all the following design phases.</p>
<p class = "project-desc"><span style="font-weight: 600;">- First, we would ensure that our designs could meet the user requirements.<br>
- Our designs also had to work in a proper way that users enjoyed, i.e, it needed to meet the design criteria.<br>
- The priority would help us make design decisions when we were in design dilemmas.</span></p>
<img src="img/project2_detail/user_requirements.png">
<div class="divide_20"></div>
</div>
</div>
<div id="Iteration">
<div class="divide_80"></div>
<h2 class="page-header"><span style="color:#085eb9">04. </span>DESIGN ITERATION</h2>
<hr>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 class="overview_subtitle" id="Brainstorming">Brainstorming</h3>
<p class = "project-desc">Revolving around the user requirements, we tried to come up with as many ideas as possible, from very conservative ones to very innovative ones.</p>
<img src="img/project2_detail/brainstorming.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Evaluation">Idea Evaluation</h3>
<p class = "project-desc"><span style="font-weight: 600;">We evaluated all the ideas we got in the brainstorm session and used creativity-feasibility map to evaluate these ideas. We picked ideas with the highest potential in terms of creativity and feasibility.</span></p>
<img src="img/project2/idea_evaluation_1.png">
<div class="divide_40"></div>
<p class = "project-desc"><span style="font-weight: 600;">Then we merged these ideas and eventually got four directions for us to explore in the sketch phase: Immersive Demo Area, Personalized
Recommendation System, Price Matching System, Efficient Shopping Assistance System.</span></p>
<img src="img/project2/idea_evaluation_2.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Sketches">Sketches</h3>
<p class = "project-desc"><span style="font-weight: 600">1. Immersive Demo Area</span> <br></p>
<p class = "project-desc">This system enables users to choose the devices they wanna try and book a demo slot online. Then all they need to do is go to the store to enjoy an immersive demo experience at the appointed time and make a confident purchase.</p>
<img src="img/project2/sketch_1.png">
<div class="divide_80"></div>
<p class = "project-desc"><span style="font-weight: 600">2. Personalized Recommendation System</span> <br></p>
<p class = "project-desc">This system recommends devices to users based on their budgets and games. It also includes expert reviews and availability check in the nearby stores.</p>
<img src="img/project2/sketch_2.png">
<div class="divide_80"></div>
<p class = "project-desc"><span style="font-weight: 600">3. Price Matching System</span> <br></p>
<p class = "project-desc">This system lets users scan the product to match the lowest price on the market and get a voucher by print or text messages. Users could show this voucher to the cashier when they check out.</p>
<img src="img/project2/sketch_4.png">
<div class="divide_80"></div>
<p class = "project-desc"><span style="font-weight: 600">4. Efficient Shopping Assistance System</span> <br></p>
<p class = "project-desc">This system works as an interactive streaming Q&A. Expert streamers could introduce new prodcuts, review existing products and of course answer users' questions related to a certain product here. Users could get instant help anywhere where they could connect to the internet.</p>
<img src="img/project2/sketch_3.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Feedback_1">Feedback Session for Sketches</h3>
<p class = "project-desc">In order to test the value and usefulness of these ideas to users, We carefully designed our feedback session and recruited 4 participants who had prior gaming experience to help us evaluate. </p>
<p class = "project-desc"><span style="font-weight: 600">We used spreadsheets to compare the Pros, Cons and value of each idea. Finally two of the ideas stood out and we were going to merge them into one system in the prototype phase.</span></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="img/project2_detail/sketch_feedback_1.png">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="img/project2_detail/sketch_feedback_2.png">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="img/project2_detail/sketch_feedback_3.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Prototype">Prototype</h3>
<p class = "project-desc">The prototype is an add-on to the BestBuy’s website. It consists of two parts: survey module and appointment module. It’s intended to help users find their ideal devices easily and book an appointment to demo all the devices they want in the immersive demo area in physical BestBuy stores.</p>
<img src="img/project2_detail/prototype_1.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Storyboard">Storyboard</h3>
<p class = "project-desc">To better illustrate and communicate the scenario to all the stakeholders where this prototype was used, we created the storyboard to describe the process of using this product.</p>
<img src="img/project2_detail/storyboard.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Feedback_2">Feedback Session for Prototype</h3>
<p class = "project-desc">In this phase we recruited 4 participants who had prior gaming experience to help us evaluate the flow of our prototype and further confirm the value of this idea. </p>
<p class = "project-desc"><span style="font-weight: 600">Users generally thought this idea was useful especially if it was supplemented by a walk-in booking system. We also received many great suggestions in terms of the flow and other interaction details of our prototype, which guided our Prototype Iteration One.</span></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="img/project2_detail/prototype_feedback_1.png">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="img/project2_detail/prototype_feedback_2.png">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="img/project2_detail/prototype_feedback_3.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Iteration_1">Prototype Iteration One</h3>
<p class = "project-desc"><span style="font-weight: 600">1. Suvery System</span> <br></p>
<img src="img/project2/iteration_one_1.png">
<div class="divide_80"></div>
<p class = "project-desc"><span style="font-weight: 600">2. Home Page</span> <br></p>
<img src="img/project2_detail/iteration_one_2.png">
<div class="divide_80"></div>
<p class = "project-desc"><span style="font-weight: 600">3. Demo List Page</span> <br></p>
<img src="img/project2_detail/iteration_one_3.png">
<div class="divide_80"></div>
<p class = "project-desc"><span style="font-weight: 600">4. Completion of Appointment Page</span> <br></p>
<img src="img/project2_detail/iteration_one_4.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="cognitive_walkthrough">Usability test - Cognitive Walkthrough</h3>
<p class = "project-desc">After the first iteration, we wanted to further test the usability of the prototype. We recurited 5 experts who had experience in UX research to help us finish the cognitive walkthrough and give us feedback.
</p>
<p class = "project-desc"><span style="font-weight: 600">We received many useful suggestions from experts and used them to guide us in the Prototype Iteration Two. Some suggestions were not accpeted and we gave the justifications here.</span></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="img/project2_detail/cognitive_walkthrough_1.png">
<img src="img/project2_detail/cognitive_walkthrough_3.png">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="img/project2_detail/cognitive_walkthrough_2.png">
<img src="img/project2_detail/cognitive_walkthrough_4.png">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Iteration_2">Prototype Iteration Two</h3>
<p class = "project-desc"><span style="font-weight: 600">1. Survey - Budget Page</span> <br></p>
<img src="img/project2_detail/iteration_two_1.png">
<div class="divide_80"></div>
<p class = "project-desc"><span style="font-weight: 600">2. Survey - Multiple Choices</span> <br></p>
<img src="img/project2_detail/iteration_two_2.png">
<div class="divide_80"></div>
<p class = "project-desc"><span style="font-weight: 600">3. Survey - Result</span> <br></p>
<img src="img/project2_detail/iteration_two_3.png">
<div class="divide_80"></div>
<p class = "project-desc"><span style="font-weight: 600">4. Demo Detail Page</span> <br></p>
<img src="img/project2_detail/iteration_two_4.png">
<div class="divide_80"></div>
<p class = "project-desc"><span style="font-weight: 600">5. Completion of Appointment Page</span> <br></p>
<img src="img/project2_detail/iteration_two_5.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Benchmarking">Usability Benchmarking Test</h3>
<p class = "project-desc">We had already evaluated the prototype amongst ourselves and experts. It was important to get users' opinions from our intended user group, i.e. student gamers and casual gamers in the corporate, to try it out and see if they found it usable. We recruited 5 participants from both schools and corporates who were gamers to help us evaluate the prototype.</p>
<p class = "project-desc"><span style="font-weight: 600">The feedback was very positive. We got a 88.5 high SUS score. Users made few errors in the flow. These results indicated that our prototype had a high usability. We also received some suggestions. Based on them I conducted another interation after the project was over.</span></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="img/project2_detail/benchmarking_1.png">
<img src="img/project2_detail/benchmarking_3.png">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="img/project2_detail/benchmarking_2.png">
<img src="img/project2_detail/benchmarking_4.png">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Final_design">Final Design</h3>
<p class = "project-desc">This semester project finished after we conducted the benchmarking test. Based on the feedback from the benchmarking test, I iterated again and alterd a lot of design details myself.</p>
<img src="img/project2_detail/final_design.png">
<div class="divide_20"></div>
</div>
</div>
</div>
</div>
<a id ="scrollup"></a>
<!-- End of Main Content -->
</div>
<!-- Bootstrap core JavaScript -->
<!-- <script type="text/javascript" src="js/jquery-3.2.1.js" ></script> -->
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
$(window).scroll( function(){
/* Check the location of each desired element */
$('.backColor2').each( function(i){
var top_of_object = $(this).offset().top + $(this).outerHeight()/8;
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > top_of_object ){
$(this).animate({
'opacity':'1'
// 'background': 'linear-gradient(to right, #56CCF2 , #2F80ED)' /* Standard syntax */
},{
duration: 5000
, easing: 'easeOutBounce'
,step: function(){
console.log(1);
$(this).css('background', 'linear-gradient(to right, #56CCF2 , #2F80ED)');
}
});
}
});
});
});
</script>
<!-- Plugin JavaScript
<script src="vendor/jquery/jquery.easing.min.js"></script>
<script src="vendor/jquery/scrollreveal.min.js"></script>
<script src="vendor/jquery/jquery.magnific-popup.min.js"></script>
Custom scripts for this template -->
<!--<script src="js/creative.min.js"></script>-->
<!-- <script type="text/javascript" src="js/popper.js"></script> -->
<!-- <script type="text/javascript" src="js/bootstrap.min.js"></script> -->
<!-- <script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/main.js"></script> -->
<!-- <script src="js/main-dev.js"></script> -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js'></script>
<!-- <script src="js/jquery-ui.js"></script> -->
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/landing.js"></script>
<script src="js/scrollup.js"></script>
</body>
</html>