-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio-MrOne-Test.html
388 lines (306 loc) · 17.4 KB
/
portfolio-MrOne-Test.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
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="img/favicon_w.ico" type="image/x-icon"> <!--bookmark icon-->
<link rel="bookmark" href="img/favicon_w.ico" type="image/x-icon">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style-new.css"> <!-- Resource style -->
<link rel="stylesheet" href="css/bootstrap.css"> <!--Bootstrap style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-49903446-2', 'auto');
ga('send', 'pageview');
</script> <!--google analytics-->
<title>UX case study - Mr.One</title>
</head>
<body>
<header class="portfolio-content-header-2">
<div class="projectBg" style="background-image: url(img/img-header-MrOne-4.png)"></div>
<section class='intro'>
<!--<img alt='MrOne big data application' class='img-responsive' src="img/img-header-MrOne-2.png"/>-->
<h1>Mr.One <span class="thin">- The AI powered big data analysis application</span></h1>
<p>Challenges: As the lead designer, support <a href="http://www.r2.ai">R2.ai, Inc.</a> in designing the AI powered data analytic and modeling web application with the best UX practice. Digest the complex data science process and translate it into user friendly flows and interfaces. Keep the look and feel in line with the most updated design trends while maintaining it’s own styles.</p>
</section>
<section class=" info">
<p> <span class='s-tittle'>Time:</span> Sep 2016 - Feb 2018</p>
<p> <span class='s-tittle'>Role:</span> User Researcher, UI / UX Designer, Team Management</p>
<p> <span class='s-tittle'>Method & Skill:</span> Focus group, wireframes, UI/UX design, informal walkthrough, remote usability testing .</p>
</section>
</header>
<main class="portfolio-content-process-2">
<section class="process">
<h3>What I did: </h3>
<p class='indent'>1. Stakeholder interviews;</p>
<p class='indent'>2. Competitive analysis;</p>
<p class='indent'>3. Crafted user flows, interactions and wireframes</p>
<p class='indent'>4. Made high-fidelity interactive prototypes, logo, brand, etc</p>
<p class='indent'>5. Collaborated with IT on implementation; </p>
<p class='indent'>6. Lead informal walkthrough and improvements</p>
<p class='indent'>7. Lead remote usability testing and improvements</p>
<p>The product is still in private Beta testing and is NDA protected. Therefore, I couldn't share it in detail here. To get you a sense of my process, below is a case study of how I design, reasoning and constantly improve a feature for users to handle multiple values in two-values only target variables, in collaboration with Shelly, the design intern, Yiwen, the CEO and the engineering team.</p>
<h3>Case Study: Designing a Feature for Users to Handle Issues in Target Variable</h3>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<img class="img-responsive" alt="structure" src="img/img-MrOne_DesignOption4.gif">
<p class="small">Final Design Choice</p>
</div>
</div>
<p><span class="bold">Context</span>: a data analyst wants to predict what type of membership a customer will use based on customer behavior data. Different codes have been used to represent two membership types: free and premium. The codes included "1", "2", "free", "premium", and even "Apple" and "Banana". Before she conduct the analysis, she wants to unify the data value and its meaning so that she could later understand the prediction result.</p>
<p>
<span class="bold">Scenario</span>: After the analysts uploaded her data and selected the target variable membership_type, the application showed her that there are more than 2 unique values in this variable. She once confirmed that this is the target that she wanted to study and then selected "free" and "premium" as the two values of the membership_type. The analysts also told the application that "1" represents "free", "2" and "banana" represent "premium". Now that the target variable has only two values and the analysts would be able to continue her analysis.
</p>
<p>
<span class="bold">Constrains</span>: This case study only depicts how we designed the interface that allows user to select the two valid values of the target variable in binary classification analysis, as well as to tell which two values actually has same meaning. When the number of unique values exceeds a certain amount, informations will show up to assist the user decide if she chose the right target or the right type of analysis. The later part is not included in this case study.
</p>
<h3>User Flow</h3>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<img class="img-responsive" alt="structure" src="img/img-MrOne_UserFlows-1.svg">
<p class="small">User Flow - Option 1</p>
<img class="img-responsive" alt="structure" src="img/img-MrOne_UserFlows-2.svg">
<p class="small">User Flow - Option 2</p>
</div>
</div>
<p>We chose user flow -1 because we believe that selecting two value as the first step provides a clear entrance, and is more logical, whereas asking users to group the values into three group first may cause user wonder how to group them.</p>
<h3>Ideation</h3>
<h3>Step 1.Selecting two values:</h3>
<p>The challenge here is how to ask the user to select two primary values for the target variable. There are two values, not more, not less, and the order doesn't matter.</p>
<div class="row">
<div id="carousel-1" class="carousel slide col-md-offset-3 col-md-6" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner " role="listbox">
<div class="item active">
<img class="img-responsive" src="img/img-MrOne_1-1.jpg" alt="Step 1-Option 1">
<div class="carousel-caption">
<p class="carousel-cap">1-1 Drop Down List</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="img/img-MrOne_1-2.jpg" alt="Step 1-Option 2">
<div class="carousel-caption">
<p class="carousel-cap">1-2 Check Box</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="img/img-MrOne_1-3.jpg" alt="Step 1-Option 3">
<div class="carousel-caption">
<p class="carousel-cap">1-3 Drag and Drop</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--<p>Our first approach is to use two drop-down lists, indicating that there are two values to select from all values detected from the target variable. It's clear that two values needs to be selected, while a user cannot see all the available options at a glance.</p>
<div class="row">
<div class="col-md-offset-1 col-md-3">
<img class="img-responsive" alt="structure" src="img/img-MrOne_1-1.jpg">
<p class="small">1-1.Drop Down List</p>
</div>
<div class="col-md-3">
<img class="img-responsive" alt="structure" src="img/img-MrOne_1-2.jpg">
<p class="small">1-2.Check Box</p>
</div>
<div class="col-md-3">
<img class="img-responsive" alt="structure" src="img/img-MrOne_1-3.jpg">
<p class="small">1-2.Drag and Drop</p>
</div>
</div>-->
<!-- <p>Our second approach is to use check box, all the available values can be seen at once and a constrain is applied when the user has selected two values. </p>
<div class="row">
<div class="col-md-offset-4 col-md-4">
<img class="img-responsive" alt="structure" src="img/img-MrOne_1-2.jpg">
<p class="small"></p>
</div>
</div>
<p>Then we tried using two empty boxes. User can drag and drop the value to fill the box. And all available values are placed as cards. So it is that two values needs to be selected, and user can drag the value card to fill the empty box.</p>
<div class="row">
<div class="col-md-offset-4 col-md-4">
<img class="img-responsive" alt="structure" src="img/img-MrOne_1-3.jpg">
<p class="small">1-3.Drag and Drop</p>
</div>
</div>-->
<p>Overall "Drag and Drop" has the benefit of displaying all values and making it clear that user only needs to select two values. Drag and drop is also a more straight forward design pattern.</p>
<h3>Step 2.Assigning the primary values to other two values</h3>
<p>We ideated two types of flows the user can apporach to finish this task:</p>
<p class="indent">• user can either decide the values grouped by the primary values (e.g., value a, c, d means the same as primary value "1", for primary value "2", value b, e means the same, the rest are garbled and should be deleted)</p>
<p class="indent">• or decide how to deal with a value one by one (e.g., value a = "1", value b ="2", value c = "1")</p>
<p>2-1 Explores the first flow while 2-2, 2-3 are to exploration for the second flow</p>
<div class="row">
<div id="carousel-2" class="carousel slide col-md-offset-3 col-md-6" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-2" data-slide-to="1"></li>
<li data-target="#carousel-2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner " role="listbox">
<div class="item active">
<img class="img-responsive" src="img/img-MrOne_2-1.jpg" alt="Step 2-Option 1">
<div class="carousel-caption">
<p class="carousel-cap">2-1.Group by value</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="img/img-MrOne_2-2.jpg" alt="Step 2-Option 2">
<div class="carousel-caption">
<p class="carousel-cap">2-2.Assign value one by one - 1</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="img/img-MrOne_2-3.jpg" alt="Step 2-Option 3">
<div class="carousel-caption">
<p class="carousel-cap">2-3.Assign value one by one - 2</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--
<div class="row">
<div class="col-md-offset-1 col-md-3">
<img class="img-responsive" alt="structure" src="img/img-MrOne_2-1.jpg">
<p class="small">2-1.Group by value</p>
</div>
<div class="col-md-3">
<img class="img-responsive" alt="structure" src="img/img-MrOne_2-2.jpg">
<p class="small">2-2.Assign value one by one - 1</p>
</div>
<div class="col-md-3">
<img class="img-responsive" alt="structure" src="img/img-MrOne_2-3.jpg">
<p class="small">2-3.Assign value one by one - 2</p>
</div>
</div>
-->
<h3>Interactive Prototypes</h3>
<p>Based on different explorations on step 1 and step 2, I build 4 different prototypes iteratively with the help from Shelly, feedbacks from design review meetings and internal tests with the analysts. </p>
<h3>Design Exploration 1</h3>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<img class="img-responsive" alt="structure" src="img/img-MrOne_DesignOption1.gif">
<p class="small">Design Exploration 1</p>
</div>
</div>
<p>Pros</p>
<p class="indent">• It's clear that user needs to choose two options</p>
<p class="indent">• Visibility of system status and the available action for each value</p>
<p class="indent">• Straight forward user undo and redo</p>
<p>Cons</p>
<p class="indent">• Drop down menu eliminates the number of options user can see.</p>
<p class="indent">• Using table make the interface not visually pleasing, too much content upfront may add to the cognitive load to the users.</p>
<p class="indent">• % information is not necessary when assigning values</p>
<p class="indent">• Not visually pleasing</p>
<h3>Design Exploration 2</h3>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<img class="img-responsive" alt="structure" src="img/img-MrOne_DesignOption2.gif">
<p class="small">Design Exploration 2</p>
</div>
</div>
<p>Pros</p>
<p class="indent">• All available values can be seen readily in step 1</p>
<p class="indent">• Drop down menu in step 2 make the UI simple and clean</p>
<p>Cons</p>
<p class="indent">• Constrain is not obvious that only two values can be selected in step 1</p>
<p class="indent">• May require too many user clicks when the target variable has too many values</p>
<h3>Design Exploration 3</h3>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<img class="img-responsive" alt="structure" src="img/img-MrOne_DesignOption3.gif">
<p class="small">Design Exploration 3</p>
</div>
</div>
<p>Pros</p>
<p class="indent">• The use of color make it easy to distinguish two different values</p>
<p class="indent">• Guided process in step 2, easy to learn</p>
<p class="indent">• Grouped action to assign values, reduce the number of user clicks</p>
<p class="indent">• Can have a overview of what values means the same in groups</p>
<p>Cons</p>
<p class="indent">• Forced order in second step might conflict with user's mental model</p>
<p class="indent">• Not easy to undo/redo, change the variable value</p>
<h3></h3>
<h3>Design Exploration 4</h3>
<div class="row">
<div class="col-md-offset-4 col-md-4">
<img class="img-responsive" alt="structure" src="img/img-MrOne_DesignOption4.gif">
<p class="small">Design Exploration 4</p>
</div>
</div>
<p>Pros</p>
<p class="indent">• Intuitive, easy to understand</p>
<p class="indent">• Easy undo/redo</p>
<p class="indent">• Can see the values in group nicely</p>
<p class="indent">• Visually pleasing</p>
<p>Cons</p>
<p class="indent">• Will require too many user clicks when the variable has too many values </p>
<p>Overall, we all liked the last option for its intuitive interaction and simple visuals, and the Engineer will implement it in the coming release round.
</p>
<p><span class="bold">Learnings</span></p>
<p><span class="bold">Constrains are our good friends</span>: during the process of designing this small feature, I found it really important to know the constrains beforehand. Clear logical constrains helped us understand why it's needed, when it will be used, and situations we need to consider; technical constrains helped us choose feasible design options; and the time constrain reminded us not to lost in details too much.</p>
<p><span class="bold">Collaboration boosts fruitful results</span>: I'm amazed at how members in our team form their mental model differently. It was because we encouraged each of us to share our thoughts freely that yield totally different flows and interactions. And it was from the divergent explorations where we come up with our best design.</p>
<br>
<br>
<br>
<div class="foot_wraper">
<div class="row end-of-article">
<div class="col-md-2 col-md-offset-1 col-xs-4">
<img class="img-responsive" alt="Thank you for reading" src="img/img-footer-thanks.svg">
</div>
<div class="col-md-8 col-xs-8">
<p><span class="bold big">Thank you for reading</span><p>
<p class="foot_text">If you have any questions or want to collaborate, you are more than welcome to drop me an <a href="mailto:[email protected]?Subject=Hello%20Weiwei" target="_blank">email</a>.</p>
</div>
</div>
</div>
</section>
</main> <!-- cd-main-content -->
<footer class='content-nav-wrapper' > <!--footer with social networks and contact -->
<div class='content-nav row'>
<ul class="bs-glyphicons-list">
<li>
<div class="tooltip2"><a class="glyphicon glyphicon-chevron-left" aria-hidden="true" href="portfolio-NewAPedia.html"></a><span class="tooltiptext-left">Previous: NewApedia</span></div>
</li>
<li>
<div class="tooltip2"><a class="glyphicon glyphicon-th" aria-hidden="true" href='index.html'></a><span class="tooltiptext-top">Back to homepage</span></div>
</li>
<li>
<div class="tooltip2"> <a class="glyphicon glyphicon-chevron-right" aria-hidden="true" href="portfolio-RemoteTesting.html"></a><span class="tooltiptext-right">Next: Remote Usability Testing</span></div>
</li>
</ul>
</div>
</footer> <!-- social icons & copy right -->
</body>
</html>