-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio-MrOne.html
619 lines (486 loc) · 23.7 KB
/
portfolio-MrOne.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
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
<!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="https://fonts.googleapis.com/css?family=Roboto Slab|Open+Sans" rel="stylesheet">
<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>
/* show and hide side navigation when window is scrolled */
$(window).scroll(function(){
if(window.screen.width > 850){
var scrollTop_2 = $(window).scrollTop(),
offsetTop_2 = $(".process-start").offset().top;
/* show content side nav when scroll */
if(scrollTop_2 >= offsetTop_2){
$(".bs-docs-sidebar").addClass('visible');
console.log("run!");
}
else{
$(".bs-docs-sidebar").removeClass('visible');
}
}
});
</script>
<script src="js/SmoothScroll.js"></script>
<style>
body{
position: relative;
}
#mrOne li a {
font: openSans;
color: #5e88fc;
}
#mrOne li.active a{
color: white;
background-color: #5e88fc;
}
</style>
<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 data-spy="scroll" data-target=".bs-docs-sidebar">
<header class="portfolio-content-header-2" >
<div class="projectBg" style="background-image: url(img/img-header-MrOne-4.png)"></div>
<section class='intro' id="Top">
<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" target="_blank">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 its 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> Lead Product Designer, User Researcher, Team Coordinator</p>
<p> <span class='s-tittle'>Method & Skill:</span> Stakeholder interview, Information architecture, Wireframes, UI/UX design, Usability testing.</p>
</section>
</header>
<main class="portfolio-content-process-2">
<section class="process">
<!-- Side navigation -->
<div class="bs-docs-sidebar">
<ul class="nav nav nav-pills nav-stacked" id= "mrOne">
<li><a href="#Top">Go to Top</a></li>
<li><a href="#one">1. What is Mr.One</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#t">2. My approach in high level<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#21">2-1.Understandings</a></li>
<li><a href="#22">2-2.Competitive Analysis</a></li>
<li><a href="#23">2-3.Design and Test</a></li>
<li><a href="#24">2-4.Implementation</a></li>
<li><a href="#25">2-5.Usability Testing</a></li>
</ul>
</li>
<li><a href="#three">3. Case study</a></li>
</ul>
</div>
<h3 class="process-start" id="one">1. What is Mr.One?</h3>
<p>It's a web application that helps business analysts and data scientists to <span class="bold">analyze data, build predictive models</span>, and <span class="bold">deploy the model</span> to run predictions.</p>
<br>
<div class="row">
<div class="col-md-offset-2 col-md-9 col-sm-10 inline">
<img class="img-responsive" alt="data" src="img/img-MrOne-DataModel.svg">
</div>
</div>
<br>
<br>
<br>
<h3> Screens </h3>
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-8 inline">
<img class="img-responsive" alt="data" src="img/img-MrOne_Data.png">
<p>Data Quality</p>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-8 inline">
<img class="img-responsive" alt="data" src="img/img-MrOne-ModelResults.png">
<p>Model Selection</p>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-8 inline">
<img class="img-responsive" alt="data" src="img/img-MrOne-Insights.png">
<p>Model Insights</p>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-8 inline">
<img class="img-responsive" alt="data" src="img/img-MrOne_AdvancedModeling.png">
<p>Adjust Model Results</p>
</div>
</div>
<br>
<br>
<br>
<!--
<div class="row">
<div class="col-md-offset-2 col-md-2">
<h3>Data Quality</h3>
</div>
<div class="col-md-6">
<img class="img-responsive" alt="data" src="img/img-MrOne_Data.png">
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-offset-2 col-md-2">
<h3>Model Selection</h3>
</div>
<div class="col-md-6">
<img class="img-responsive" alt="model" src="img/img-MrOne-ModelResults.png">
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-offset-2 col-md-2">
<h3>Model Insights</h3>
</div>
<div class="col-md-6">
<img class="img-responsive" alt="insights" src="img/img-MrOne-Insights.png">
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-offset-2 col-md-2">
<h3>Adjust Model Parameters</h3>
</div>
<div class="col-md-6">
<img class="img-responsive" alt="advanced modeling" src="img/img-MrOne_AdvancedModeling.png">
</div>
</div> -->
<br>
<br>
<h3 id="21">2. My Approach in High Level</h3>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<img class="img-responsive" alt="advanced modeling" src="img/img-MrOne_process.svg">
</div>
</div>
<h3 >2-1. Understandings</h3>
<h3>The problem</h3>
<p>
Today’s companies generate tons of customer data every day, these data can be analyzed to inform business decisions and serve the customer better. However, the traditional data analysis tools like SAS has a steep learning curve. It requires training for an employee to master it. It needs experts of data science and the process costs a lot of time and money.
</p>
<h3>The Users</h3>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<img class="img-responsive" alt="advanced modeling" src="img/img-MrOne-Analysts.svg">
</div>
</div>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<img class="img-responsive" alt="advanced modeling" src="img/img-MrOne-DataScientists.svg">
</div>
</div>
<h3>The Customer</h3>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<img class="img-responsive" alt="advanced modeling" src="img/img-MrOne-BEs.svg">
</div>
</div>
<h3>The data science process and it’s context</h3>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<img class="img-responsive" alt="advanced modeling" src="img/img-MrOne_DataScienceProcess.svg">
</div>
</div>
<br>
<br>
<br>
<h3 id="22">2-2. Competitive Analysis</h3>
<br>
<br>
<br>
<div class="row">
<div class="col-md-offset-2 col-md-2 col-xl-1">
<img class="img-responsive" alt="dataRobot" src="img/img-MrOne_DataRobot.png">
</div>
<div class="col-md-offset-1 col-md-2 col-xl-1">
<img class="img-responsive" alt="IBMWatson" src="img/img-MrOne_ibm.png">
</div>
<div class="col-md-offset-1 col-md-2 col-xl-1">
<img class="img-responsive" alt="dataiku" src="img/img-MrOne_dataiku.png">
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<h3 id="23">2-3.Design and Test</h3>
<div class="row">
<div class="col-md-offset-2 col-md-10">
<img class="img-responsive" alt="userflow" src="img/img-MrOne-UserFlow.svg">
</div>
</div>
<br>
<h3>Wireframes</h3>
<p>I used wireframes to communicate the detailed flow, layouts, placements of functional components on each step with the team. It served as a media to explore ideas and make common decisions.</p>
<img class="img-responsive" alt="wireframes" src="img/img-MrOne_flow-temp.png">
<h3>Hi-fi Mockups and Prototypes</h3>
<p>I used hi-fi mock ups to explore the look and feel of the app, and build prototypes in Marvel to show the interactions. I usually tested them internally and iteratively with my data analysts colleagues before delivering them to the Engineers for development.</p>
<div class="row">
<div class="col-md-12">
<img class="img-responsive" alt="screens" src="img/img-MrOne_Screens.png">
</div>
</div>
<div class="row" id="24">
<div class="col-md-offset-2 col-md-10 col-sm-10">
<img class="img-responsive" alt="design assets" src="img/img-MrOne-Implementation.svg">
</div>
</div>
<h3 id="25">2-5.Usability Testing</h3>
<p>Before the Alpha version of Mr.One was released in the summer of 2017, the team wanted to improve the product's overal usability. So I initiated, planned and conducted a remote usability testing with 5 potential customers to get actionable suggestions on design improvements. For details, you can <a href="portfolio-RemoteTesting.html" target="_blank">check this post</a>.</p>
<br>
<br>
<br>
<p>-------------------------------------------------------------------------------------</p>
<p>Now the product is still in private Beta testing and is NDA protected. Therefore, I couldn't share it in detail here. Below is a case study of how I designed, reasoned and constantly improved 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 id = "three">3. Case Study: Designing a Feature for Users to Handle Issues in the 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 conducts the analysis, she wants to unify the data value and its meaning so that she could later understand the prediction result.</p>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<img class="img-responsive" alt="Case Study Context" src="img/img-Mr.OneCaseSenario.png">
<p class="small">Context</p>
</div>
</div>
<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">Constraints</span>: This case study only depicts how we designed the interface that allows the 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 the same meaning. When the number of unique values exceeds a certain amount, information will show up to assist the user to decide if she chose the right target or the right type of analysis. The latter 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 groups first may cause a user to wonder how to group them at first place.</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>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 straightforward design pattern.</p>
<h3>Step 2.Assigning the primary values to other two values</h3>
<p>We ideated two flows the user can approach to finish this task:</p>
<p class="indent">• a 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 explorations 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>
<h3>Interactive Prototypes</h3>
<p>Based on different explorations on step 1 and step 2, I built 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">• Straightforward user undo and redo</p>
<p>Cons</p>
<p class="indent">• Drop down menu eliminates the number of options a 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">• The user can see all available values in step 1</p>
<p class="indent">• The drop-down menu in step 2 make the UI simple and clean
</p>
<p>Cons</p>
<p class="indent">• It 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 the 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-3 col-md-6">
<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">Constraints are our good friends</span>: during the process of designing this small feature, I found it really important to know the constraints beforehand. Clear logical constraints helped us understand why it's needed, when it will be used, and situations we need to consider; technical constraints 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">
<h2><span class="bold big">Thank you for reading</span></h2>
<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=""></a>
<span class="tooltiptext-left">This is the first project</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-Acorn.html"></a><span class="tooltiptext-right">Next: Acorn iOS App</span></div>
</li>
</ul>
</div>
</footer> <!-- social icons & copy right -->
</body>
</html>