QQ index page
Background
QQ Index page is a web dictionary site. Unlike portals like Yahoo or BBC, it doesn’t create its own content, instead it collects and categorize popular websites that allow fast access for its user. By June 2012, user for this market have reached 22 billion/week in China. With hao123 and 360 leading the market, QQ index page was tasked to my team and we were expected to make it stand out from the crowd.
ROLE
Interaction Designer
TEAM
UI Designer, Product Manager, Project Manager， Front End Developer
TIME FRAME
3 months
Challenges
Everything against the UX guidelines I know.
Unconventional product targeting unfamiliar users.
Process
User Research > Competitor Analysis > Brain Storm > Interaction Design > UI design > Develop & Release
User Research > Competitor Analysis
The key words extracted from user interviews were ‘Simplicity’, ‘fast’, ‘authoritativeness’. ‘smart’ and ‘personality’. However, achieving those in the re-design is simply not enough. Hao123 and 360 have taken more than half of the market share and 70% of their users have used the service for more than a year. It will be unwise to compete with them head on.
2011-2012 Daily user count on major index page (10K/Unit)
Index Page market share diagram
User research schedule on movie section of the Index Page
Quantitative user research on competitor’s and insights - 1
Quantitative user research on competitor’s and insights - 2
Weekly activity analysis for major Index page
Hao123 took 35.1% of all the users for Index page market, followed by 360 Index with 31.1%. QQ Index page only took 1.3% of total user base and that was with all the benefits from the power QQ membership.
Market leader - hao123.com
360 Index page
QQ Index page before redesign
Brain Storm > Interaction Design
With those key wards(‘Simplicity’, ‘fast’, ‘authoritativeness’. ‘smart’ and ‘personality’) at the center of the redesign process, we also tried to enhance the modules/sections with higher click rate.
Marked section for potential redesign
Site category before redesign
Site navigation before redesign
Low fidelity mock up for site category redesign
Low fidelity mock up for site category redesign 2
User login and use customized site navigation
Using existing resources from QQ movie and QQ membership could also work in our favor. Enhanced log-in aim to allow easier & faster access of favorite sites & utilities on the go. The new index page also swapped the position of site management and utilities, It follows the natural direction of how user scan the page and made the page more visually appealing.
Mock up with more visualized site navigation
Edit customized content after login
Re-structured layout for QQ Index page
Manage site navigation in new layout
Beside the redesign on site management, main page layout and login process, I’ve also tried some optimization on site recommendation, movie index page and popular gadget modules according to back end user data(Users don’t say what they actually do or want in interview so make sure to check the actual data).
Movie Index page layout redesign
Movie index page - movie detail page
Popular module - Games
Popular module - Weather, game top up and utility bills, etc
Site Management - Site you may like according to user preference and history
UI design > Develop & Release
Screenshot for V 1.0 of QQ index page. The new design had received positive feedback and has achieved a 308% increase on click rate for the first day after release while maintained a 266% increase on main page compare with last month.
QQ index redesign full view
QQ index V1.0
QQ index V1.0 - site management
QQ index V1.0 - weather module
PS. I’ve also posted a blog about this project in Chinese here if you are interested.