-
Notifications
You must be signed in to change notification settings - Fork 0
/
project3_detail.html
387 lines (334 loc) · 26.8 KB
/
project3_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
<!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/project3.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/project3/overview_full.png">
</div>
<h2 class="page-header"><span style="color:#ff5722">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="About">About Tong Qu</h3>
<p class="project-desc">Tong Qu is the biggest event-finding platform in Shanghai Jiao Tong University. It allows students, student clubs, university staff and others to publish and find events on this platform. With this platform, the whole university community has become more vigorous, active and diverse.<br>
<p class="project-desc">So far, this platform consists of a website, iOS app and Android app.<br>
<a style = "color:#4A90E2" href="https://tongqu.me/" target="_blank">Learn more about Tong Qu (Only support Chinese)</a></p>
<div class = "divide_20"></div>
<img style = "width:100%" src="img/project3/achievement.png">
<div class = "divide_40"></div>
<h3 class="overview_subtitle" id="Objective">Objective</h3>
<p class="project-desc">Tong Qu's iOS app hasn’t been updated for more than one year since previous iOS developers graduated. A lot of bugs came out and students complained about its malfunction and abandoned using it.<br></p>
<p class="project-desc"><span style="font-weight: 600">
Therefore, our goal was to develop a new iOS version and improve the overall user experience.</span></p>
<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 formative research part, I collected user feedback and analytics data, prepared the plan and questions for the semi-structured interview and conducted competitive analysis. Then I took part in the analysis of our data, distilled the user requirements from the findings and came up with the personas.<br>
2.I led the discussion of allocating functions and adjusting information architecture in our team. I designed most of the lofi and hifi prototypes.<br>
3.Upon finishing the design work, I collaborated with iOS developer Ruiyang Wang to actualize the design and launched it to the iOS store. I also assisted product manager Xiaofan Lu carry out the app promotion by designing introduction page for the app on Tong Qu's website.</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">November 2016 - April 2017</p>
<h3 class="overview_subtitle">Project Team</h3>
<p class="project-desc">Huaiwei Sun | Xiaofan Lu | Ruiyang Wang | Sujun Zhang | Jiaxuan Wang | Lu Yan | Kangjie Chen</p>
<h3 class="overview_subtitle">Tools</h3>
<p class="project-desc">Pen | Paper | Photoshop | Sketch</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 class="overview_subtitle " id="Approach">Process</h3>
<img style = "width:100%" src="img/project3/process.png">
<div class="divide_80"></div>
</div>
</div>
</div>
<div id="Research">
<h2 class="page-header"><span style="color:#ff5722">02. </span>FORMATIVE 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">Research Plan</h3>
<p class = "project-desc">
<span style="font-weight: 600">Research goals:</span> <br>
1. <span style="font-weight: 600">Found out existing pain points that users had encounted during their experience with Tong Qu's iOS app.<br>
2. Discovered other user requirements from different user groups for adding/deleting/modifying features in the following design phases.</span> <br>
</p>
<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);">Collecting Existing User Feedback</span> - We collected Tong Qu's customer reviews from iOS App store and extracted the pain points and suggestions. This method helped us know the existing pain points and user requirements easily and quickly.<br></p>
<p class = "project-desc">
2. <span style="font-weight: 600; color: rgb(30,30,30)">App Analytics</span> - We checked the historical analytics data of Tong Qu and concluded the trends of how students used Tong Qu. It eanbled us to know the temporal changes in usage which reflected how users really used this product rather than what they talked about their experience.<br>
</p>
<p class = "project-desc">
3. <span style="font-weight: 600; color: rgb(30,30,30)">Semi-structured Interviews</span> - We asked students who have used Tong Qu before to probe how and why they used it and their preferences for the platform(website or app). We took digital notes during each interview. We learnt a lot about users' using habits and expectations.<br>
</p>
<p class = "project-desc">
4. <span style="font-weight: 600; color: rgb(30,30,30)">Competitive Analysis</span> - We studied exsiting products on the market which also played the role of event-publishing-and-finding platform. It taught us about how commercial products did their function design, information architecture, interaction design and detailed UI design.<br>
</p>
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Feedback">Collecting Existing User Feedback</h3>
<p class = "project-desc">First, we collected feedback from iOS store. They ranged from 2014 to 2016. We mainly focused on those after the last update.</p>
<p class = "project-desc"><span style="font-weight: 600">- Feedback from iOS stores mainly talked about the login and crash bugs which are the main pain points. As a result, we set the bug-fixing as our top priority in the later product requirement document.</span><br></p>
<img src="img/project3_detail/previous_feedback.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Analytics">App Analytics</h3>
<p class = "project-desc">Then we used the Apple's Analytics tool to look at the usage trends of Tong Qu. The marketing data are complete. But the usage data are limited to the users who are willing to share their data with Apple and developers like us.</p>
<p class = "project-desc"><span style="font-weight: 600">- The usage data showed that students thought of Tong Qu like a tool which helped them enrich their campus life. When the breaks began, they barely used this app.<br>
- Considered the limited number of users who wished to share data with us, our crashes stayed on a really high level which was congruent with users' direct feedback.</span></p>
<img src="img/project3_detail/crashes.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Interviews">Semi-structured Interviews</h3>
<p class = "project-desc">After knowing the general usage feedback and data, we started to collect in-depth qualitative data including:<br>
- what the users thought of Tong Qu.<br>
- what they expected from Tong Qu's app.<br>
- Whether they preferred app or just the website and why.</p>
<p class = "project-desc">We conducted 13 semi-structured interviews with students who have used Tong Qu before(most of them are our friends and classmates) in Shanghai Jiao Tong University and took notes of their answers.</p>
<p class = "project-desc"><span style="font-weight: 600">We used SWOT as a framework to categorize and analyze our notes in the spreadsheets.</span></p>
<div class="divide_20"></div>
<img class = "bottom_20" src="img/project3_detail/interview.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Competitive">Competitive Analysis</h3>
<p class = "project-desc">Meanwhile, we studied two popular apps on the market. We listed their Pros and Cons respectively in terms of the information architecture, function design, interaction design and detailed UI design.</p>
<div class="divide_20"></div>
<img src="img/project3_detail/competitor.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Findings">Synthesis of Findings</h3>
<p class = "project-desc"><span style="font-weight: 600">We aggregrated all the insights distilled from the research above and categorized them into two groups: existing pain points and new requirements.</span></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="img/project3/pain_points.png">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="img/project3/new_requirements.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="Personas">Personas</h3>
<p class = "project-desc">After the analysis of data, we used personas to represent the insights we got. We created 3 personas to illustrate our typical users, which helped us empathize with them and focus on their needs in the following design phases.</p>
<img src="img/project3/persona.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Requirements">User Requirements</h3>
<p class = "project-desc">After team discussion, we created the product requirement document and set priorities for the requirements.</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 cut certain features if we ran out of time and make design decisions when we were in design dilemmas.</span></p>
<img src="img/project3/requirements.png">
</div>
</div>
</div>
<div id="Design">
<div class="divide_80"></div>
<h2 class="page-header"><span style="color:#ff5722">03. </span>Design Iterations</h2>
<hr>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 class="overview_subtitle" id="Information_Architecture">Information Architecture</h3>
<p class = "project-desc">- Firstly, we listed all the essential functions and features for meeting the product requirements.<br>
- Then we discarded part of them due to the restriction of APIs and extracurricular time we had for this project. The remaining functions and features were integrated with Tong Qu's previous information architecutre. <br>
- Finally, we adjusted the details of the structure and created the new version's information architecture.</p>
<img src="img/project3/information_architecture.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Wireframes">Lofi Wireframes</h3>
<p class = "project-desc">Based on the information architecture, we came up with the wireframes and flows. However, we tweaked some functions and revised the information architecture in order to better satisfy the product requirement document.</p>
<img src="img/project3_detail/wireframe.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Prototype">Hifi Prototype & Iterations</h3>
<p class = "project-desc">After reaching consensus on wireframes and flows, we created hifi prototypes. We didn't use inVision or other softwares to make the prototype. We manually showed all the screens and interactions on my laptop during the team review.</p>
<p class = "project-desc"><span style="font-weight: 600;">Due to the limit of time and skillset we had, we didn't conduct user tests, whether it's benchmarking test or A/B test. Each time after knocking out the lofi wireframes or hifi prototypes, we just held quick and dirty internal discussion and review on all the screens. Since we were users ourselves, we were able to figure out the main issues in terms of usability.</span> </p>
<p class = "project-desc"><span style="color:#ff5722">If I could do it again now, I would conduct feedback session after wireframe phase and benchmarking test after hifi prototype phase. Feedback session would give me insights of how useful our features are to users. Benchmarking test and SUS score would help me evaluate the detailed and overall usability of the prototype.</span> </p>
<p class = "project-desc">With the help of the feedback from other team members, I modified several screens shown below.</p>
<div class="divide_80"></div>
<img src="img/project3_detail/iteration_1.png">
<div class="divide_80"></div>
<img src="img/project3_detail/iteration_2.png">
<div class="divide_80"></div>
<img src="img/project3_detail/iteration_3.png">
<div class="divide_80"></div>
<img src="img/project3_detail/iteration_4.png">
<div class="divide_80"></div>
<img src="img/project3_detail/iteration_5.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Final_Design">Final Design</h3>
<img src="img/project3_detail/final_design.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Flow">User Flow</h3>
<img src="img/project3_detail/flow.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Use_Case">Use Case</h3>
<p class = "project-desc">Our design work was always revolved around the personas(users) and product requirement document. <span style="font-weight: 600">We tested our design and flow in our use cases to see if they could help users achieve their goals.</span></p>
<div class="divide_20"></div>
<img src="img/project3_detail/use_case_1.png">
<div class="divide_20"></div>
<img src="img/project3_detail/use_case_2.png">
<div class="divide_20"></div>
<img src="img/project3_detail/use_case_3.png">
</div>
</div>
<div id="Implementation">
<div class="divide_80"></div>
<h2 class="page-header"><span style="color:#ff5722">04. </span>IMPLEMENTATION</h2>
<hr>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 class="overview_subtitle" id="Development">Development</h3>
<p class = "project-desc">I exported all the assets and specs to the iOS developer Ruiyang Wang. After he finished 95% of the coding work, <span style="font-weight: 600">we spent several days together testing and debugging to ensure there were as few bugs as possible.</span>
</p>
<div class="divide_20"></div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<video src="img/project3/debug.mp4" autoplay="true" loop="" style="width:100%; margin: 0;"></video>
</div>
<!-- <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
<img src="img/project3_detail/development.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="Launch">Launch and Publicity</h3>
<p class = "project-desc">When we were confident enough about our work, we launched it to the iOS store. I also designed introduction page on Tong Qu's website to introduce our new app.
<a style = "color:#4A90E2" href="https://tongqu.me/index.php/app" target="_blank">Check the introduction page here!</a></p>
<p class = "project-desc">Several updates have been done after I graduated, so some design details are different from those in this project.</p>
<img src="img/project3_detail/poster.png">
<div class="divide_20"></div>
<hr>
<div class="divide_40"></div>
<h3 class="overview_subtitle" id="Impact">Project Impact</h3>
<p class = "project-desc"><span style="font-weight: 600">1. Objective Data:</span> <br></p>
<p class = "project-desc">In order to evaluate the impact of this update, I compared the analytics data from Nov. 2016 and data from Nov. 2017.</p>
<p class = "project-desc"><span style="font-weight: 600">There is a huge improvement on usage data. Sessions(one session means that a user oepns the app and uses it for a certain amount of time once) have doubled. Active devices have went up to 1.4 times. Crashes have decreased by 93%.</span></p>
<img src="img/project3/quantative_result.png">
<div class="divide_80"></div>
<p class = "project-desc"><span style="font-weight: 600">2. Subjective Data:</span> <br></p>
<p class = "project-desc">I compared the ratings and reviews for old version and this new version from iOS store.</p>
<p class = "project-desc"><span style="font-weight: 600">There is also a huge improvement on users' subjective feedback. Ratings from users have gone from 1.5 to 4.7. Most of the reviews spoke hightly of this update.</span></p>
<img src="img/project3/qualitative_result.png">
<div class="divide_80"></div>
</div>
</div>
</div>
</div>
</div>
<a id ="scrollup" style="display: block;"></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>