-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathiterativeRedesign.html
429 lines (407 loc) · 24.3 KB
/
iterativeRedesign.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="template.css" , rel="stylesheet">
<link href="tangiacss.css" , rel="stylesheet">
<link href="style.css" , rel="stylesheet">
<title>Template</title>
</head>
<body>
<a id="circle" href="./index.html#PROJECTS ">
<img id="back" src="portAssets/backButton.png" class="fill-div" alt="back button">
</a>
<div id="pageHeader">
<p class="sectionHead">Tangia Redesign</p>
<div class="headLine"></div>
<p class="sectionSubtitle">How can we make streaming more interactive?</p>
</div>
<main id="root">
<header>
<h1>Case Overview</h1>
<section>
<p>
<h2>My Role</h2>
UX Designer/Front-end Developer
<br>
<h2>Background</h2>
This redesign was part of an upper-level UI/UX class at Brown. For this project, we had to pick a recent
startup from Y Combinator and attempt to design a prototype of an interface that would solve the
startup's
problem, but without looking at any of the startup's products. For our startup, we selected Tangia, a
monetization platform for streamers that enables viewers to buy interactions that affect the game being
streamed in real-time. For example, a viewer pays $15 to spawn a boss enemy, and it instantly appears in
the
streamer's Minecraft world.
We read Tangia's vision on Y Combinator but did not view any of their designed interfaces before
completing
the project.
<h2>Key Project Structure </h2>
<ul>
<li>Group design sprint </li>
<li>Low-fidelity re-design </li>
<li>High-fidelity Figma Prototype</li>
<li>Industry critique </li>
<li> Usability Testing</li>
<li>Final re-design </li>
</ul>
<h2> Key Project Outcome </h2>
A user-tested high-fidelity re-design of Tangia.
</p>
</section>
</header>
<section>
<h2>Selecting a Startup</h2>
<p>We had to pick a recent startup from Y Combinator and attempt to design a prototype of an interface that
would solve the startup's problem, but without looking at any of the startup's products.</p>
<p>For our startup, we selected Tangia, a monetization platform for streamers that enables viewers to buy
interactions that affect the game being streamed in real time. For example, a viewer pays $15 to spawn a
boss enemy, and it instantly appears in the streamer's Minecraft world.</p>
<p>We read <a href="https://www.ycombinator.com/companies/tangia">Tangia's vision on Y Combinator</a>, but
did not view any of their designed interfaces before completing the project.</p>
</section>
<section>
<h2>Sketching & Wireframing</h2>
<h3>Pre-Design Thinking</h3>
<p>Tangia affects both the viewers and the streamers. Because we would expect the viewers and the streamers
to see two very different interfaces, we decided to focus solely upon the interface for viewers. We
sketched a variety of possible interfaces, all of which were intended for desktop.</p>
<h3>Sketching</h3>
<p>We explored several design alternatives in order to imagine what Tangia might look like.</p>
<!-- rounded's sketches -->
<h4>Tangia envisioned as a standalone streaming site integrated with streaming servies to both interact with
and watch a stream (My Sketch).</h4>
<figure>
<img src='assets/rounded_sketches.png' alt='' />
<figcaption>
<ul>
<li>Top: vertical scrolling and item checkout selection with a pop-out tab</li>
<li>Middle: Horizontal scrolling with a checkout pop-out tab</li>
<li>Bottom: Horizontal scrolling with horizontal expanding tab</li>
</ul>
<p>(<a href='assets/rounded_sketches.png'>enlarge sketch</a>)</p>
</figcaption>
</figure>
<!-- shyworm's sketches -->
<h4>Tangia envisioned as a standalone website that will accompany other streaming services (such as Twitch,
YouTube, etc).</h4>
<figure>
<img src='assets/shyworm_sketches.png' alt='' />
<figcaption>
<ul>
<li>Top: home page with a welcome message, recommended streams, and search/browsing options in
the left navigation bar</li>
<li>Bottom Left: streamer's page with a preview of their stream and scrollable content of the
purchasable interactions. The navigation bar from the home page remains.</li>
<li>Bottom Right: built on the streamer's page, the checkout page appears like a pop-up that
blocks the rest of the screen while the user purchases the interaction.</li>
</ul>
(<a href='assets/shyworm_sketches.png'>enlarge sketch</a>)
</figcaption>
</figure>
<!-- sleepyotter's sketches -->
<h4>Tangia envisioned as an embedded feature on a streaming service such as Twitch.</h4>
<figure>
<img src='assets/embedded1.JPG' alt='' />
<figcaption> Interactivity of hover within the embedded feature(<a
href='assets/interface_sketch.png'></a>)</figcaption>
<img src='assets/embeddedselect.JPG' alt='' />
<figcaption>Version of the spawn in feature selections with descriptions and images not grouped together
(<a href='assets/interface_sketch.png'>enlarge sketch</a>)</figcaption>
<img src='assets/embeddedselectdescription.JPG' alt='' />
<figcaption>Popup of what image and description grouping would look like (<a
href='assets/interface_sketch.png'>enlarge sketch</a>)</figcaption>
<img src='assets/embeddedcheckout.JPG' alt='' />
<figcaption>Option for pricing where pricing is determined by how long until the feature would be
spawned in stream. (<a href='assets/interface_sketch.png'>enlarge sketch</a>)</figcaption>
<img src='assets/timeuntilspawn.JPG' alt='' />
<figcaption>Another option where timing could be specifically determined and would affect pricing. (<a
href='assets/interface_sketch.png'>enlarge sketch</a>)</figcaption>
</figure>
<!-- mawkishmeerkat's sketches -->
<h4>Tangia envisioned as a standalone streaming site integrated with streaming servies to both interact with
and watch a stream.</h4>
<figure>
<img src='assets/meerkat.JPG' alt='' />
<figcaption>
Clockwise, starting from top: sign-in page; profile picture with input boxes for information and
buttons for logout and saving/canceling new information; payment page for adding a card info;
streamer profile page whereon the user can but interactions; home page where user can search for
streamers and see streamers she follows.
(<a href='assets/meerkat.JPG'>enlarge sketch</a>)
</figcaption>
</figure>
<h3>Combining Ideas into a Wireframe</h3>
<p>After a group design sprint, we took the best elements of each sketch to create one cohesive wireframe
for a standalone interface. There were many possible ways for Tangia to exist (such as a feature
embedded in streaming services or a browser extension), but we decided to move forward envisioning
Tangia as a standalone site.</p>
<figure>
<img src="assets/wireframe.png">
<figcaption>Wireframe that combined our ideas from our individual sketches. (<a
href="assets/wireframe.png">enlarge wireframe</a>)</figcaption>
</figure>
<p>This final wireframe incorporated ideas from all of our sketches.</p>
<ul>
<li>From the browser extension, we took the sign-in page and navigation bar formats.</li>
<li>From the embedded sketch, we took the idea of a “interaction delay” for purchasable items and the
grouping of purchasable items into visually distinct boxes.</li>
<li>From the standalone accompanying site, we took the “recommended streams” on the home page and the
design of the home page in general.</li>
<li>From the standalone site integrated with streaming services, we took vertical scrolling and a banner
for the active launch</li>
</ul>
</section>
<section>
<h2>Mockups</h2>
<h3>Interactive High-Fidelity Mockup</h3>
<p>
Next, we created an interactive high-fidelity prototype, which is an enhanced version of the combined
wireframe, populated with sample realistic content. Feel free to interact with the prototype and
navigate through the different screens.
</p>
<figure>
<iframe width="800" height="450"
src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FLMDZCLdjD5Z8SmkTdak7AC%2FTangia-Re-design%3Fnode-id%3D1%253A338%26scaling%3Dscale-down%26page-id%3D0%253A1%26starting-point-node-id%3D1%253A833"
allowfullscreen></iframe>
<figcaption>Figma prototype of our Tangia interface before critique</figcaption>
</figure>
<h3>Mockup Critique</h3>
<p>
After designing our high-fidelity prototype, we shared with 30 other people and received feedback and
critiques from them. The critiques and the changes we implemented in response to the critiques are
listed below.
</p>
<table>
<thead>
<tr>
<th id="left-col-header">Critique Received</th>
<th id="right-col-header">Change Implemented</th>
</tr>
</thead>
<tbody>
<tr>
<td>Provide reassurance for users in regards to security for payment </td>
<td>Added a lock icon next to the payment information in account settings</td>
</tr>
<tr>
<td>Search bar in right rail is confusing</td>
<td>Removed the search bar from the right rail</td>
</tr>
<tr>
<td>Badges had unclear meaning</td>
<td>Removed badges from account page completely</td>
</tr>
<tr>
<td>Dark mode takes up too much space on the nav bar</td>
<td>Removed dark mode from the nav bar and placed it in the account page and only kept it in
sign in</td>
</tr>
<tr>
<td>Breathability</td>
<td>Removed the search bar from the right rail, reduced size of top nav bar, reduced right rail
to ⅔ the original size</td>
</tr>
<tr>
<td>Unclear color hierarchy. Colors don't have consistent meaning in regards to their function.
</td>
<td>Adhered to a consistent visual style so that button colors and background colors, etc are
all consistently used throughout the different pages of the site. Things that looked similar
to buttons were changed to avoid confusion.</td>
</tr>
<tr>
<td>Despite the importance of the stream, it was relatively small on the page. Unable to see the
chat</td>
<td>Made stream bigger</td>
</tr>
<tr>
<td>Unclear if the streaming page was a page for a specific streamer or the user's profile page.
Confused by the big logo with username with the streamer name. Unsure if that is their name
or the streamer's name</td>
<td>Added "[streamer name] is streaming [game name]"" to clarify that the streaming page is the
streaming page and made the name and image smaller</td>
</tr>
<tr>
<td>Would this have compatibility with other streaming platforms like youtube or facebook?
People felt main purpose of Tangia was more so a streaming platform rather than a support to
make streams more interactive</td>
<td>Added a return to Twitch button and the location of stream is now indicated under the
description of streams</td>
</tr>
<tr>
<td>In-app currency</td>
<td>Replaced money with tangerines (like bits on Twitch)</td>
</tr>
<tr>
<td>Confused if users have the ability to switch which streamer they are watching within Tangia
</td>
<td>Added home page with multiple suggested / previously watched streamers and a search bar so
that users can search for different streamers. This also aids in site navigation.</td>
</tr>
</tbody>
</table>
<p>
We modified our previous prototype, which you can interact with here.
</p>
<figure>
<iframe width="800" height="450"
src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FLMDZCLdjD5Z8SmkTdak7AC%2FTangia-Re-design%3Fnode-id%3D55%253A1543%26scaling%3Dcontain%26page-id%3D1%253A1119%26starting-point-node-id%3D55%253A2475"
allowfullscreen></iframe>
<figcaption>Figma prototype of our Tangia interface after implementing suggestions from critique
</figcaption>
</figure>
<p>
Design choices to achieve the original goals of the startup:
</p>
<ul>
<li>
Including a "dark mode" appeals to the intended audience of Tangia, which is gamers who frequently
prefer a dark mode.
</li>
<li>
Centralized the purchasable interactions to put them higher in the visual hierarchy.
</li>
<li>
Heavily featured stream spawn stats and recent interactions from other users to both emphasize and
engage users primarily in the form of in-game interactions.
</li>
<li>
Gamified purchasing using Tangerines (🍊) to incentivize spending for the intended audience
of gamers.
</li>
<li>
We chose to always have a method on each page to directly return to the most recent stream the user
has spawned an item for.
</li>
<li>
The checkout window is unintrusive and doesn't obscure the main functionality of the page, which is
browsing interactions and watching the livestream.
</li>
<li>
After making a purchase, the interaction appears in the top bar; this maintains engagement by
keeping interactions in view and in mind before they spawn in stream.
</li>
<li>
The home page increases engagement with streamers by showing recommendations for new streams that
the viewer might not have seen before.
</li>
</ul>
</section>
<section>
<h2>User Testing</h2>
<h3>Assigned Task</h3>
<p>Imagine you are a viewer of the Twitch streamer thejocraft_live. Buy a "Creeper Mob Spawn!" interaction
and confirm the purchase in your order history. Please think aloud as you perform the task. You will be
interacting with a Figma prototype and not a fully functional website.</p>
<h3>Testing Instructions via <a href="https://www.usertesting.com/">UserTesting.com</a></h3>
<p>Listed here are the instructions given to users while testing the prototype.</p>
<ol>
<li>Choose between light or dark mode, and sign in please.</li>
<li>Do not click on anything yet please! Describe what you are seeing on the home page. How would you
interact with this page?</li>
<li>Please proceed to thejocraft_live's stream page, and describe what you are seeing on the page and
what you would do. </li>
<li>Please purchase a "Creeper Mob Spawn!" interaction for thejocraft_live's stream. Please remember to
describe your thought process as you work through this task!</li>
<li>How do you know that your purchase registered? </li>
<li>If you have not yet, please confirm your purchase in your order history.</li>
<li>How would you navigate to the home page?</li>
</ol>
<h3>Analysis of Results</h3>
<h4>Expectations</h4>
<p>We expect the home page and checkout process to be intuitive and smooth.</p>
<p>We primarily think that the task of navigating to order history might be more difficult for users.</p>
<p>In addition, we suspect that subjects may be confused about the overall purpose of the site (such as what
the embedded Twitch stream is for).</p>
<h4>Observations and Errors</h4>
<p>We had three users test our site: Vikingevaluator, Tubbington, and Sessa925.</p>
<figure>
<blockquote>
"I would be able to spawn certain types of, probably, characters in the game to make it more
enjoyable and maybe to participate in the game. This is very interesting, by the way. The viewer is
not only watching the scene but also participating in the gameplay. This is very nice."
</blockquote>
<figcaption>-Vikingevaluator</figcaption>
</figure>
<figure>
<video width="800" height="450" controls>
<source src="assets/UserTestingA.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<figcaption>Screencapture of Vikingevaluator's walkthrough of our prototype</figcaption>
</figure>
<figure>
<video width="800" height="450" controls>
<source src="assets/UserTestingB.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<figcaption>Screencapture of Tubbington's walkthrough of our prototype</figcaption>
</figure>
<figure>
<video width="800" height="450" controls>
<source src="assets/UserTestingC.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<figcaption>Screencapture of Sessa925's walkthrough of our prototype</figcaption>
</figure>
<ul>
<li>Vikingevaluator did not make it to the order history but did everything else; Tubbington did
everything; Sessa925 did not complete an order but did everything else.</li>
<li>Tubbington initially thought that the images on the homepage led to clips of previous streams rather
than previous streams. Sessa925 was unsure why she would want to go back to a stream she recently
watched.</li>
<li>Vikingevaluator did not make it to the order history as we thought might happen.</li>
<li>Tubbington first clicked the watch history in the account to attempt to go back to home. His second
option was correctly the Tangia logo. He later said that clicking the logo was self-explanatory.
</li>
<li>Sessa925 could not click on the scroll bar and scroll, which is an unfortunate limitation of Figma.
</li>
</ul>
<h4>Possible Improvements</h4>
<p>The issue which Sessa925 ran into seems the most important to resolve, but it is not actually something
we can fix because of Figma itself.</p>
<p>To clarify Tubbington and Sessa925's critiques, we would change the wording of "Recently Watched" to be
"Current Stream" instead.</p>
<p>Two possible solutions to address Vikingevaluator's confusion: we could either put an exclamation mark on
the profile icon to indicate that attention is warranted on the profile page, or we could add a bell
icon with a number that indicates how many notifications the user has, including purchase notifications.
</p>
</section>
<section>
<h2>Contacting the Startup</h2>
<p>To round out the project, we contacted the Tangia team and shared our project with them. Here's a copy of
our email.</p>
<hr>
<p>
Hello!
<br><br>
We are sleepyotter, roundthings, mawkishmeerkat, and shyworm-our students from Brown University taking a
class in UI / UX! We are concluding a group project in which we had to pick a recent startup from Y
Combinator and attempt to design a prototype of an interface that would solve the startup's problem, but
without looking at any of the startup's products. We were intrigued by the premise of your
company—allowing viewers to interact with their favorite streamers—so we chose to tackle a prototype for
Tangia! We decided to create a standalone website interface for viewers. Specifically, we created a
prototype in Figma that allows a viewer to log in, navigate to a favorite streamer, and spawn creepers
into the game! If you are interested, we have shared the Figma prototype with you. We can also share
with you the whole writeup for our project if you would like! We would love to hear your thoughts on
what we created!
<br><br>
Warmly,<br>
sleepyotter, roundthings, mawkishmeerkat, and shyworm
</p>
</section>
</main>
<div class="flex-containerInv">
<nav class="navMenu">
<div class="flex-containerInv">
<div class="dot"></div>
<a href="produceble.html">Produceble</a>
<a href="yans.html">Yan's</a>
<a href="iterativeRedesign.html">Tangia</a>
<a href="menu.html">Menu Study</a>
<div class="dot"></div>
</div>
</nav>
</div>
</body>