-
Notifications
You must be signed in to change notification settings - Fork 0
/
default.html
459 lines (423 loc) · 19.8 KB
/
default.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
<!DOCTYPE HTML>
<html>
<head>
<title>Beta Quest UX</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="I'm still learning to code. This is my beta portfolio page built from the ground up. Wendy Lim, UX Designer." />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed|Poiret+One|Pathway+Gothic+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="header">
<p class="logo"><a href="http://questux.co.uk/project-portfolio.html">Back to Quest UX</a></p>
<!-- Nav -->
<nav>
<ul class="main-nav">
<li><a href="http://questux.co.uk">About Wendy</a></li>
<li><a href="http://questux.co.uk/skills.html">Portfolio</a></li>
<li><a href="http://questux.co.uk/contact.html">Contact</a></li>
</ul>
<!--Case Study Navigation-->
<ul class="cs-nav">
<li><a href="#casestudy">Case Study</a>
<ul>
<li><a href="#userresearch">User Research & Personas</a></li>
<li><a href="#mapjourney">Map the User Journey</a></li>
<li><a href="#designstudio">Design Studio Method</a></li>
<li><a href="#prototyping">Prototyping</a></li>
<li><a href="#usability">Usability Testing</a></li>
<li><a href="#download">Download Case Study</a></li>
</ul>
</li>
</ul>
</nav>
</div><!--End of Header-->
<!-- Case Study Title -->
<div class="title container">
<h1>The Quest to bring repeat cinema goers to
<strong>IMDB</strong>
</h1>
<!-- Solution Image -->
<img class="app-solution" src="images/imdb-screen1.png" alt="IMDb Smartphone App Solution"/>
<ul class="details">
<li>GA Student Project</li>
<li>Duration: 2 weeks</li>
<li>Date Completed: Sept-2014</li>
</ul>
</div>
<!-- Main -->
<div class="main container">
<div class="content">
<!--Project Summary Section-->
<div class="summary">
<div class="challenge">
<h4>Challenge</h4>
<p>IMDb is a popular film information and review’s website with almost 3 million film and TV titles and over 55 million registered users.</p>
<p>In this case study, they decide to expand their market from being an information provider to selling cinema tickets directly in the UK. They want a service that:</p>
<ul>
<li>Informs you of of movies showing at cinemas in your area</li>
<li>Allows you to easily purchase tickets</li>
<li>Uses a digital pass to use at the cinema</li>
</ul>
</div>
<!--The Team & Role-->
<div class="team-all">
<h4 class="team-head">The Team</h4>
<ul class="team">
<li class="left-team">
<img src="images/iconwendy.png" alt="Wendy Wizard Character"/>
<span>Wendy<br>The Wizard</span>
</li>
<li class="middle-team">
<img src="images/iconalex.png" alt="Alex Templer Character"/>
<span>Alex<br>Leader</span>
</li>
<li class="right-team">
<img src="images/iconoleks.png" alt="Oleks Druid Character"/>
<span>Oleks<br>The Oracle</span>
</li>
</ul>
<h4 class="team-head">My Role</h4>
<p class="role">Working with a team of UX Designers over two weeks, we interviewed cinema goers and researched the opportunities for IMDB through competitive analysis. I lead on mapping out the customer journey and wireframing multiple prototypes, turning our sketched ideas into testable mock-ups shown and tested by real cinema goers.</p>
</div>
</div>
<!--Skills & Equipment-->
<div class="skill-section">
<h2 class="heading arrow-right">Skills & Equipment</h2>
<div class="skill-tool">
<!--Skill Icons-->
<ul class="skills">
<li>
<img src="images/potion.png" alt="User Research & Personas"/>
<p>User Research <br>& Personas</p>
</li>
<li>
<img src="images/doublequill.png" alt="Design Studio Method"/>
<p>Design Studio<br>Method</p>
</li>
<li>
<img src="images/gears-bw.png" alt="Prototyping"/>
<p>Prototyping</p>
</li>
<li>
<img src="images/cogsplosion.png" alt="Usability Testing"/>
<p>Usability<br>Testing</p>
</li>
<li>
<img src="images/treasuremap.png" alt="Map the User Journey"/>
<p>Map the<br>User Journey</p>
</li>
</ul>
<ul class="tools">
<li>
<img src="images/tool-surveymonkey.png" alt="Survey Monkey" />
<p>Survey Monkey</p>
</li>
<li>
<img src="images/tool-balsamiq.png" alt="Balsamiq" />
<p>Balsamiq</p>
</li>
<li>
<img src="images/tool-graffle.png" alt="Omnigraffle" />
<p>Omnigraffle</p>
</li>
<li>
<img src="images/tool-invision.png" alt="inVision" />
<p>inVision</p>
</li>
</ul>
</div>
</div><!--End of Skills & Equipment-->
<!--Achievements-->
<div class="achievements">
<img src="images/wizard.png" alt="Wizard Character" />
<h2 class="heading arrow-left">Achievements</h2>
<h3 class="heading">A solution that explores three strategic opportunities for IMDb</h3>
<!--Column-->
<div class="chieve">
<p>A checkout that integrates <strong>multiple payment options</strong> and the ability to book at all cinemas will create a new revenue stream for IMDB.</p>
<img src="images/badge1.png" alt="Badge Icon 1"/>
<p class="badge">one purchase to rule them all</p>
</div>
<!--Column-->
<div class="chieve">
<p>Being able to easily <strong>share going to the cinema</strong> with your own network of friends and family will increase number of IMDB registered user.</p>
<img src="images/badge2.png" alt="Badge Icon 2"/>
<p class="badge">speak friend and enter</p>
</div>
<!--Column-->
<div class="chieve">
<p>Giving people a way to <strong>keep track of films</strong> they are thinking of seeing, when they think of it, will lead to more users viewing upcoming and new films on IMDB.</p>
<img src="images/badge3.png" alt="Badge Icon 3"/>
<p class="badge">not all those who wander are lost</p>
</div>
</div>
</div><!--Close of Content-->
<div><!--Solution Image and Case Study Top-->
<img class="desktop-only dig" src="images/imdbcasestudy.png" alt="Three Screens from IMDb Solution">
<a name="casestudy"></a>
<div class="quotebox">
<div class="quote">
<blockquote>“I like that you delved deeper into the problem and went further to understand the wider issues facing cinema ticket sales.”</blockquote>
<cite>
Mike Atherton<br>UXDI Instructor
</cite>
</div>
</div>
</div>
</div> <!--Close of Main-->
<!--Case Study Section-->
<div class="casestudy container">
<div class="content">
<!--Section Heading-->
<div class="cs-heading head-research">
<a name="userresearch"></a>
<img src="images/potion.png" alt="User Research & Personas"/>
<p>User Research <br>& Personas</p>
</div>
<!--User Research 3 Columns-->
<div class="research">
<h3>Personas</h3>
<p>Our screening survey of over 50 responsents enabled us to find and interview 8 cinema goers:</p>
<ul>
<li>Age Range: 28-41</li>
<li>identified as infrequent cinema goers</li>
<li>All had bought cinema tickets online previously</li>
</ul>
</div>
<div class="insights">
<h3>Key Insights</h3>
<ul>
<li>People are familiar with the IMDB site and brand, but used the site infrequently.</li>
<li>Friend recommendations was ranked the 2nd most popular reason for choosing to see a film, above who was in it and what critics say. The most popular influencer was the film trailer or poster.</li>
<li>Few people identified online ticket purchasing as needing improvement, but this was a small proportion out of other needs talked about.</li>
</ul>
</div>
<h2 class="central">What<br>We Discovered</h2>
<!--User interviews double, double, toil and bubble-->
<div class="interviews">
<ul>
<li>‘I chose that film because there wasn’t much choice for children at the cinema'</li>
<li>‘never heard of IMDB’</li>
<li>'There are lots of films I would like to go and see. I find out about them by who I like and going to see their films’</li>
<li>‘If someone put something on facebook it might tempt me to click out and have a look'</li>
<li>'It’s a great library of old movies.'</li>
<li>‘I used it the other day to check out an actor I couldn’t remember the name of'</li>
<li>‘I like a good poster, if I’m standing on the train I like to look out the doors and I see a good poster I might look it up online and see whats this film’</li>
<li>‘The one thing I hate when you buy something online is that thing where it makes you authorize your card. I’ll throw everything out the pram and probably not complete the process’</li>
<li>'I prefer to hear from reviewers I trust. Usually I just look at a movie poster and it will have loads of 4 or 5 stars, then its a good film. But if its got 5 stars from like the Daily Mail it’s probably rubbish.’</li>
<li>'I hate having to make online accounts. So if I didn’t have to visit every single cinema and have to sign-up to every single website just to buy a cinema ticket, once a year’</li>
<li>'It’s mostly word of mouth and maybe if they’ve said it on Facebook. I trust them more than critics'</li>
<li>‘I usually use IMBd to check out a film that’s going to be on TV’</li>
<li>'I use it to look for film reviews, but rarely. Rotten Tomatoes is better as you can see more variety of good quality magazines or sites that review it, where-as IMDB is just this rating, I don’t know what to trust.’</li>
<li>‘I like looking at IMDB ratings for retro film reviews before watching them at home.'</li>
<li>'I don’t directly go on to IMDb, it’s just one of the first results when searching on Google.'</li>
<li>'I go with a group of friends mostly and we go online to make sure we have all the tickets together'</li>
<li>'I used it to look up an actor, I couldn’t remember what he was in.'</li>
<li>'The last film I saw it was a spare of the moment thing really'</li>
<li>'I usually go on (imdb) just to check how good the film actually is'</li>
</ul>
</div>
<!--Personas-->
<div class="personas">
<h2 class="personas-title">Created Three Personas</h2>
<img class="breakpoint" src="images/mob-3personas.png" alt="Three Personas" />
<div class="onepersona">
<img class="desktop-only" src="images/rachel.png" alt="Rachel Primary Persona"/>
<p>“Cinema check-outs can be so fiddly and force me to sign-up. I just want to buy and go”</p>
<p class="small"><strong>RACHEL</strong> 41 year old mother of a 9 year old boy, who needs a lot of entertaining in the school holidays</p>
</div>
<div class="onepersona">
<img class="desktop-only middle-team" src="images/julie.png" alt="Julie Persona"/>
<p>“I’d like to go to the cinema more, but I hate getting caught out and wasting my time on a bad film.”</p>
<p class="small"><strong>JULIE</strong> 28 year old existing IMdb user, who’s super organised in her work and personal life</p>
</div>
<div class="onepersona">
<img class="desktop-only right-team" src="images/matt.png" alt="Matt Persona"/>
<p>“It’s all about a great night out seeing the big releases with a bunch of good friends”</p>
<p class="small"><strong>MATT</strong> 31 year old sociable guy, who owns all the latest tech gadgets and likes to think of himself as a trend spotter</p>
</div>
</div>
</div><!--End of first content div in case study-->
<!--Solution Aha Moment-->
<div class="ahabox">
<div class="content">
<h2 class="heading">Solution: Just Add Button?</h2>
<div class="aha-text">
<p>Our research and interviews identified that IMDb’s proposition to sell cinema tickets alone was unlikely to meet the needs of UK cinema goers. Currently users perception of IMDb is firmly as an information provider, firstly of film facts and trivia, followed by some trust of reviews, but then little to no awareness of the showtime listings service.</p>
<p>Users are not using the site to meet the pre-curosor steps before deciding to purchse a cinema ticket. Our hypothesis therefore is that if we focused solely on adding and designing a purchasing feature, this would not be sufficient to capture the majority of cinema goers.</p>
<p>We needed to tackle the needs higher up the funnel in order to bring people to IMDb to first disocver the films they want to see and help them in planning their trip, before direciing them to purchase tickets.</p>
</div>
<div class="aha-steps">
<h3>IF...People used IMDb to</h3>
<ol>
<li>Step 1: Discover a film to see</li>
<li>Step 2: Plan to go to cinema</li>
<li>Step 3: Purchase ticket</li>
</ol>
</div>
<div class="funnel">
<h3>THEN...We expect</h3>
<img src="images/funnel.png" alt="Funnel image" />
<ul>
<li>More views of new<br>and upcoming films</li>
<li>More IMDb<br>Registered Users</li>
<li>More £<br>Revenue</li>
</ul>
</div>
</div><!--Content within the aha box-->
</div>
<div class="content"><!--Start of second content section after soluntion banner-->
<!--Section Heading-->
<div class="cs-heading mapjourney">
<a name="mapjourney"></a>
<img src="images/potion.png" alt="Map the User Journey"/>
<p>Map the<br>User Journey</p>
</div>
<div class="map">
<div class="paper paper-1">
<img src="images/uflow-discover.png" alt="User flow step 1 diagram" />
</div>
<!--<div class="paper paper-2">
<img src="images/uflow-discover.png" alt="User flow step 1 diagram" />
</div>
<div class="paper paper-3">
<img src="images/uflow-discover.png" alt="User flow step 1 diagram" />
</div>-->
<h2> → Pull to Explore</h2>
</div><!--End of map-->
<!--Section Heading-->
<div class="cs-heading design">
<a name="designstudio"></a>
<img src="images/potion.png" alt="Design Studio Method"/>
<p>Design Studio<br>Method</p>
</div>
<!--Design sketches background-->
<div class="skamps">
<div class="top box">
<p>The Design Studio Method involves quickly sketching, critiquing and building on ideas in a group workshop.</p>
<p>Using our personas and research we created more than a dozen different ideas in the course of a 2 hour session and then sorted and prioritised these into:</p>
</div>
<div class="must box">
<h3>Must Do</h3>
<ul>
<li>Map and search tool to help locate cinema based on location</li>
<li>Smartphone app to cater for tech savvy, but keep consistent across different devices and website</li>
<li>Provide a digital pass, like QR code saved within the app, so its the right size for scanning</li>
<li>Quicker checkout by integrating with common payment options, e.g. Amazon and Paypal</li>
</ul>
</div>
<div class="wont box">
<h3>Won't Do</h3>
<ul>
<li>Automatic plays tailer when app scans a film poster</li>
<li>Loyalty scheme for ticket purhcases</li>
<li>On-boarding process that let’s you choose which critics you trust</li>
<li>Prompt after seeing a film to rate reviewers</li>
</ul>
</div>
<div class="should box">
<h3>Should Do</h3>
<ul>
<li>Save a seat for a friend without having to pay for their ticket</li>
<li>Get your friends opinion on whether to see a film</li>
<li>Keyword search and filtered categories to customise what films to see</li>
</ul>
</div>
<div class="could box">
<h3>Could Do</h3>
<ul>
<li>Browser plugin to feed into IMDb watchlist</li>
<li>Present offers and events, such as cheaper tickets and special showings</li>
</ul>
</div>
</div><!--End of Design Studio: Skamps-->
<!--Section Heading-->
<div class="cs-heading proto">
<a name="prototyping"></a>
<img src="images/potion.png" alt="Prototyping"/>
<p>Prototyping</p>
</div>
<div class="prototyping">
<div class="iteration hand">
<img src="images/prototype-paper.png" alt="Sketched phone with the buy screen" />
<div class="info">
<h2>Paper Prototype</h2>
<h3>Objectives</h3>
<ul>
<li>Check the flow between each app screen</li>
<li>Visualise the content hierarchy for each screen</li>
<li>Communicate with the team on how features could fit together</li>
</ul>
</div>
</div>
<div class="iteration wire">
<img src="images/prototype-wire.png" alt="Wireframe of the buy screen and invite friends tab" />
<div class="info">
<h2>Wireframes</h2>
<h3>Objectives</h3>
<ul>
<li>Check if users can navigate through each screen easily</li>
<li>Gather responses to new social sharing features: Save a seat for a friend and poll friends for a film review</li>
<li>Six Iterations</li>
<li><a href="#">Go to the early prototype</a></li>
</ul>
</div>
</div>
<div class="iteration mock">
<img src="images/prototype-mock.png" alt="Branded mock-up of save seat for friends" />
<div class="info">
<h2>Mock-ups</h2>
<h3>Objectives</h3>
<ul>
<li>Test save and select seats screens from updated checkout flow</li>
<li>Test film finder options and search</li>
<li>Two Iterations</li>
<li><a href="#">Go to the final prototype</a></li>
</ul>
</div>
</div>
</div><!--End of prototyping section-->
<!--Section Heading-->
<div class="cs-heading">
<a name="usability"></a>
<img src="images/potion.png" alt="Usability Testing"/>
<p>Usability<br>Testing</p>
</div>
<!--3 Rounds of Testing-->
<div class="usability">
<div class="testing">
<img src="images/usabilityTest3.png" alt="People testing the app">
<h3>Round 1: With Design Team</h3>
</div>
<div class="testing">
<img src="images/usabilityTest.png" alt="People testing the app">
<h3>Round 2: With Friends & Family</h3>
</div>
<div class="testing">
<img src="images/usabilityTest2.png" alt="People testing the app">
<h3>Round 3: Guerilla Testing at Rick Mix Cinema</h3>
</div>
</div><!--End of Usability-->
</div><!--End of content-->
</div> <!--End of Case Study-->
<!-- Footer -->
<div class="footer-wide">
<a name="download"></a>
<h2 class="container footer">Get in Touch</h2>
<ul>
<li><a href="#">Level Up</a></li>
<!-- Contact -->
<li>
<a class="icon fa-twitter" href="#"><span class="label">Twitter</span></a>
<a class="" href="#"><span class="label">Linkedin</span></a>
</li>
<li><a href="">Go on Another Quest</a></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/oridomi.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>