QQ 导航

logo.jpg
 

背景

QQ导航是一个网址导航类网站。 和门户站点新浪或网易不同的是,QQ导航本身并不创造内容或专题,而是收集,整理和分类流行的站点来为用户提供快捷访问它们的服务。到2012年6月,网址导航类网站的国内用户量已经达到了2.2亿人每周。在好123和360导航领跑这个细分门类的环境下,我的设计团队接到了重新设计QQ导航网站的任务,我们希望新的设计和想法能让它脱颖而出吸引更多的用户。

 

角色

交互设计师

团队

产品经理、项目经理、 视觉设计师、前端开发

时长

3个月

 
 

挑战

  1. 这个产品可以说颠覆了我对UX的认知。

  2. 对用户群体并不熟悉,甚至可以说有一些抵触。

  3. 竞争对手在领跑,用户数量相差巨大。

 
 

流程

用户研究  >  竞品分析 >  头脑风暴 > 交互设计 > 原型制作 > 视觉设计 > 开发迭代

 

用户研究 & 竞品分析

通过定量和定性用户研究,团队提取用户对网址导航产品期望的关键字为:“简洁”,“快速”、 “权威”、 “智能” 和“个性化”。但很多时候用户说的不一定是他们真正想要的,比如说“简洁”就和目前市场上任何一款导航类产品搭不上边。除此之外,即使新设计满足了以上所有的需求,也很难撼动好123和360导航在市场上的绝对领导地位(两家共占到市场一半以上的用户),而且超过70%的用户已经使用这两种导航类网站超过1年了。

2011年4月-2012年4月各主要导航网站日均覆盖人数(万人)

网址导航网站自然人用户数

用研团队对QQ导航影视部分的工作计划

QQ导航竞品及用户画像细分对比1

QQ导航竞品及用户画像细分对比2

主要导航网站用户人均周访问次数和覆盖人数比例

 

网址之家占当时所有导航站用户总量的35.1%, 其次是360导航(31.1%)。而在腾讯系产品带来许多流量的情况下, QQ导航只占1.3%的用户。

行业领头羊 - 网址之家

360导航

改版前的QQ导航

 

头脑风暴 & 交互设计

围绕着“简洁”,“快速”、 “权威”、 “智能” 和“个性化”这几个核心关键词我们重新设计了QQ导航主页的信息排列和构架,优化了内容分组和网址编辑功能。

QQ导航老版本优化点的标注

改版前的站点分组截图

改版前的名站导航模块

头脑风暴时对站点分组的提议1

头脑风暴时对站点重新分组的提议2

用户登录并使用‘我的导航“流程

 

QQ会员体系可以让用户更方便的管理自己喜欢的站点和偏好设置,我们因此优化了登录流程和自定义模组的交互细节。还对主页的排版做了重构使其更符合用户自然浏览的方式和个性化的需求。

导航页主页头脑风暴时的mock up

编辑我喜欢的内容

重新排版的QQ导航首页内容分布

管理名站导航

 

除了对站点管理、主页排版和登录流程的优化外,我们还对智能推荐网站、影视导航和一些数据上热门的小模块做了优化。

影视导航模块重构

影视导航模块 影视详情页面和评论

热门小模块 - 小游戏

热门小模块 - 天气。网游充值、生活缴费等

名站导航 - 智能推荐猜你喜欢的网站

 

UI 设计& 发布

在确定了网站构架,交互流程和视觉的修改优化后,前端工程师们很快发布了QQ导航V1.0版本,新的设计得到了用户的广泛好评并且点击率在上线第一周增加了308%,和过去一个月环比主页的点击量增加了266%。这个项目也让我认识到国内互联网产品的特殊性和用户第一的重要性,想了解更多可以查看这篇复盘总结

QQ导航新版主页

QQ导航新版 V1.0

QQ导航新版 V1.0 - 管理名站导航

QQ导航新版 V1.0 - 天气模组

QQ导航视觉风格由Pearl_Fu制作