QQ Browser for Mac
Background
As the portal connecting user and the internet, browser is always the key product for top companies. QQ browser for Mac is the first attempt made by Tencent for its MAC user back in 2011. Am very lucky to be able to work with a group of talented people on it. Our goal is to design a browser that meets the exceptional standard of Mac user while embrace the habit/behavior for QQ/domestic users.
ROLE
Interaction Designer
TEAM
UI Designer, PM, Developer
TIME FRAME
6 months
Challenges
From 0 to 1 within a tight schedule.
High expectation for usability & style.
Mature market with fierce competition.
Process
User Research > Competitor Analysis > Brain Storm > Interaction Design > UI design > Prototype > Develop Iterations
User Research > Competitor Analysis
Through quantitative & qualitative research - despite the demand on speed & security we found out that domestic users expect a browser that embrace Apple style & supports hand gesture, cross platform sync, powerful site management, custom plug-in and QQ instant messenger integration. In the first iteration, we decided to focus on features such as site management, cross platform sync and reading mode.
Design background
Competitor analysis - Safari
Competitor analysis - Chrome
Competitor analysis - Firefox
User research
Competitor analysis and insights
Quantitative research - User characteristics
Qualitative research - User requirements
Grouping of potential requirements
Brain Storm > Interaction Design
Balsamiq wire-frames were first used to illustrate interaction ideas from brainstorm sessions.
Site management menu
Collection mode - How to activate
Collection mode - Personal collections
Reading mode activation
Reading mode - Dark theme
Reading mode - Font customization
Reading mode - Choose theme
UI designer then created the visual files according to mock up, they will add their creative ideas and suggest better interactions along the way and UX designers will update the mock ups accordingly. Product features gradually mature with every iteration like this.
Toolbox menu expand view
Quick access site and dynamic menu
Reading mode - Choose theme
Reading mode - Choose font/size
Crop collection - save as favorite / share
Reading mode - bookmark
Favorite - suggestions based on big data/preference
User Favorite Management - view and organize folders
Choose device and data (bookmarks in this case) to sync on QQ browser for iPad
Quick access and history synced with QQ browser for iPad
Choose device and data (bookmarks in this case) to sync on QQ browser for iPhone
Quick access synced with QQ browser for iPhone
I created a 2 minutes 44 seconds demo which illustrated the ideas of site management, cross platform sync, hand-gesture support on mobile devices, etc. The demo was a good medium to communicate design ideas with rest of the team.
UI design > Develop iterations
The final release was well received by user and we pulled off 5 major release in the second quarter of 2012 successfully.
Screenshot for first release of QQ Browser (V1.0.0) Visual guideline was created by Eric Lu
PS. If you are interested, I’ve got some thoughts about icon and wording in UX design here. (It’s written in Chinese thou)