-
Notifications
You must be signed in to change notification settings - Fork 0
/
qqbrowser.html
293 lines (241 loc) · 16.7 KB
/
qqbrowser.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ruiyi's portfolio">
<meta name="author" content="Ruiyi Zhou">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/agency.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.2/css/personal.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap-3.3.2/js/bootstrap.min.js"></script>
<script src="animation.js"></script>
<script src="bootstrap-3.3.2/js/bootstrap.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script src="js/modernizr.custom.97074.js"></script>
<script src="js/scrollbacktotop.js"></script>
<!-- Parallax Scrolling -->
<script src="js/parallax.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/scrollhidden.js"></script>
<!-- End -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<title>QQ Browser</title>
<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', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-54877627-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<!--Navigation Bar-->
<body>
<!--Navigation-->
<nav id="nav" class="navbar navbar-default navbar-inverse navbar-fixed-top hidden">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<a class="navbar-brand" href="index.html">Ruiyi Zhou</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="index.html#expertise">Expertise</a>
</li>
<li>
<a class="active" href="index.html#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="RuiyiZhou-MS-HCDE.pdf">Resume</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--Home image-->
<div class="parallax-window" data-parallax="scroll" data-image-src="images/qqbrowser-2.png">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="navbar-toggle" data-toggle="collapse" data-target="#fakenavbar" aria-expanded="false" aria-controls="fakenavbar" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<a class="navbar-brand" href="index.html">Ruiyi Zhou</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="fakenavbar" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="index.html#expertise">Expertise</a>
</li>
<li>
<a class="page-scroll" href="index.html#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="RuiyiZhou-MS-HCDE.pdf">Resume</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
<!-- /.container-fluid -->
<div class="container">
<div class="titlename margin15">
<p style="margin-top:20%">QQ Browser</p>
<p style="font-size:1em">A top-ranked mobile browser run on Android platform designed specifically for Chinese users, had over 30 million daily active users.</p>
</div>
</div>
</div>
<!--Summary-->
<div class="margintop100">
<div class="container">
<div class="bluearea">
<div class="container">
<div class="row margin15">
<div class="col-md-3">
<h3>Team Role<i class="fa fa-fw fa-user"></i></h3>
<p>Product Manager</p>
</div>
<div class="col-md-3">
<h3>Duration<i class="fa fa-fw fa-calendar-o"></i></h3>
<p>07/2011 - 06/2014</p>
<p>3 years</p>
</div>
<div class="col-md-3">
<h3>Methods<i class="fa fa-fw fa-book"></i></h3>
<p>Competitive Analysis</p>
<p>Data-driven Design</p>
<p>Fast Usability Test</p>
</div>
<div class="col-md-3">
<h3>Tools<i class="fa fa-fw fa-wrench"></i></h3>
<p>Axure</p>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="padding:15px">
<!-- Detail -->
<div class="row margintop50">
<div class="col-md-7" style="float: none; margin: 0 auto;">
QQ Browser for Android was initially launched in 2009. I first joined the team in July, 2011, and left for school in June 2014. During the time I was there, the product grew rapidly, gained more than 3o million daily active users. My responsibilities were mainly in two parts, developing new features and collecting user feedback for iterative design process. Below are several selected pieces of work.
</div>
</div>
<h3 class="nextproject ">Bookmark Redesign</h3>
<hr class="featurette-divider">
<p>QQ Browser once had two separate bookmark systems. One bookmark system was shown on the homepage of browser, which we called the homepage bookmark. Homepage bookmark was designed to mark the frequently-used websites. Users were able to send some of these homepage bookmarks to desktop of their mobile phones. Another bookmark system was shown on the bookmark page, which could be accessed through main menu of the browser. We called this bookmark system the common bookmark. Common bookmark was designed before the homepage bookmark to offer the basic capability of saving bookmarks and it was not that different from the homepage bookmark except it was not shown on the browser's homepage. There was a kind of redundancy here. Besides, most users were sticking to a particular kind of bookmark system they were familiar with, and were not willing to change their habits. Thus we separated the users of bookmark into two groups because of the bad design.</p>
<p>To solve this program, we redesigned to bind in these two bookmark systems into one. The key design concept was that all bookmarks were stored on the bookmark page, while users could send some frequently-used bookmarks to the browser's homepage for convenient use, just like users could send some bookmarks to the desktop of mobile phone.</p>
<img class="featurette-image img-responsive " src="images/img_bookmark.jpg" style="width: 800px; margin:0 auto; ">
<h3 class="nextproject ">QRcode Scanning</h3>
<hr class="featurette-divider">
<p>QR Code could store the information of a paragraph of words, a HTML link, a name card, etc. The principle of QR Code Scanning was that if we use the camera to shoot a QR Code, QQ Browser could decode the QR Code and get the information stored in it. We reinforced the QR Code Scanning to make it much stronger. First of all, QQ Browser could recognize a paragraph of words, and a HTML link, which could be either stored as a bookmark or open in a new window. Secondly, QQ Browser could recognize the information of a name card, and users could save the information directly as a name card in contacts, or dial the phone number offered, or send an email to the email address offered.</p>
<img class="featurette-image img-responsive " src="images/img_qrcode_1.jpg" style="width: 800px; margin:0 auto; ">
<p>What was more, not only the QR Code shot by the camera could be recognized, the QR Code stored locally on the phone and the QR Code showed on a webpage could also be recognized, which was quiet original because other apps or software could only recognize the QR Code shot by the camera.</p>
<img class="featurette-image img-responsive " src="images/img_qrcode_2.jpg" style="width: 800px; margin:0 auto; ">
<p>In addition, we also supported the recognition of barcode, which was widely used on almost every product. Users could use QQ Browser to recognize the barcode and search for more information on the Internet. In the future, users might be able to buy the product they wanted by using QQ Browser to scan the barcode.</p>
<img class="featurette-image img-responsive " src="images/img_qrcode_3.jpg" style="width: 800px; margin:0 auto; ">
<h3 class="nextproject ">Fraudulent Website Check</h3>
<hr class="featurette-divider">
<p>It was the browser's responsibility to protect users from fraudulent websites and guarantee safety. So we designed the fraudulent website check system. Every time a new link is about to be open, the browser would check the security while loading it. If the website was identity verified, a green icon would appear on the address bar to notify safety, without interrupting user's workflow. If, on the other hand, a fraudulent website is to be open, a red icon will appear on the address bar and QQ browser will interrupt the loading process to show a warning page, indicating that the website was dangerous, might cause password leak, for instance. In-detail information about this fraudulent website will be provided, with an advise to close the window.</p>
<img class="featurette-image img-responsive" src="images/img_security_1.jpg" style='width:800px; margin:0 auto;'>
<p>As to websites related to online payment, such as Paypal, Amazon and Taobao, the website security status would be checked under more strict standards. </p>
<p>Besides, the database of fraudulent websites is updated continuously, to enablt QQ Browser to be able to deal with emergent situation. For instance, if a newly-appeared website tends to be dangerous, QQ Browser could update database in a very short time and make sure the users could get appropriate in-time warning, if attempted to view this website.</p>
<img class="featurette-image img-responsive" src="images/img_security_2.jpg" style='width:800px; margin:0 auto;'>
<h3 class="nextproject ">User Feedback and Loyalty Cultivation</h3>
<hr class="featurette-divider">
<p>I communicated with users from all over China via online IM, phone calls, emails, face-to-face interview, etc. I dealt with more than 500 feedbacks a day. I sorted these feedbacks into different categories according to their worth. About 5% of the feedbacks were very valuable, these feedbacks either reflected severe bugs or hard-to-accept designs. Once getting these feedbacks, I would immediately build up a team to revise our designs and codes. If necessary, an updated version would be released within 3 days since the feedback.</p>
<p>Besides, I cultivated users' passion and loyalty by running various activities both online and offline. Recently, at the end of year 2012, I sent letters of thanks and gifts to some valuable users who had been supportive during the whole year. Their happiness of getting these letters and gifts were spread out through online social networking such as Weibo and attracted many new users of QQ Browsers. Each month, a name list of valuable users would be updated and the users on the list would get a gift, and their name would appear on the thanks page of each released version of QQ Browser. Now, thanks to the loyalty cultivation plan, we have more than 500 valuable users who actively offered their help to us, such as being the admin of online forum, answering other users' questions about the product, and pointing out the bugs and bad designs we left out.</p>
<img class="featurette-image img-responsive " src="images/img_feedback_1.jpg" style="width: 800px; margin:0 auto; ">
</div>
<!-- Footer -->
<footer id="contact">
<div class="footer-above">
<div class="container">
<div class="row margin15">
<div class="footer-col col-md-3">
<h3>Get in touch</h3>
<ul class="list-inline">
<li>
<a href="http://www.linkedin.com/pub/ruiyi-zhou/94/b52/644/en" class="btn-social"><i class="fa fa-fw fa-linkedin"></i></a>
</li>
<li>
<a href="https://www.facebook.com/zhou.ruiyi" class="btn-social"><i class="fa fa-fw fa-facebook"></i></a>
</li>
<li>
<a href="http://instagram.com/ruiyizhou/" class="btn-social"><i class="fa fa-fw fa-instagram"></i></a>
</li>
<li>
<a href="https://www.pinterest.com/zhouruiyi/" class="btn-social"><i class="fa fa-fw fa-pinterest"></i></a>
</li>
</ul>
</div>
<div class="footer-col col-md-3">
<h3>Right now</h3>
<p>I'm currently a student at Human Centered Design and Engineering, University of Washington.</p>
</div>
<div class="footer-col col-md-3">
<h3>Location</h3>
<p>Seattle, Washington, 98105</p>
</div>
<div class="footer-col col-md-3">
<h3>Contact me</h3>
<i class="fa fa-fw fa-envelope-o"></i>ryzhou@uw.edu<br>
<i class="fa fa-fw fa-mobile"></i>206.383.9873<br>
</div>
</div>
<div class="copyright">
<p>Copyright © Ruiyi Zhou</p>
</div>
</div>
</div>
</footer>
</div>
<!-- FOOTER -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script type="text/javascript">
$(function() {
$(' #da-thumbs > li ').each(function() {
$(this).hoverdir();
});
});
</script>
</body>
</html>