产品设计体会(6031)产品新首页诞生记

2009年夏天,“e网打进”的产品portal做了一个改版项目,叫“变脸”,回想一下,我们正是按照:“战略、范围、结构、框架、表现”的顺序做的,设计师也从头到尾很充分的参与其中。很快半年过去了,产品、公司、团队里很多事情都发生了变化,不过对于这个项目来说,还是有些可以分享一下的东西……

这个项目的缘起是为了统一公司几个产品的portal风格,但我们希望能在老板给出的这个目标下找到“变脸”的更多价值。于是项目开始后我查看了portal页面的访问情况,分析了用户场景,画了下图。

产品portal的用户场景
产品portal的用户场景

在“e网打进”刚上市之时,portal页面只是付费用户的登录入口,有一个简单的填写账号密码的输入框,并没有额外的商业价值,但随着产品的成长,渐渐有了点名气,当时每个月有几万UVUnique Visitor,独立访客),其中:

非付费用户的访客占大多数,超过80%,短期内相当稳定;付费用户20%弱,目的其实很明确——登录,很少会东张西望看其他内容;极少数的经销商,有个入口登录后台也就行了。

非付费用户的访客访问portal的行为逐渐增多,他们通过各种途径知道了“e网打进”,可能是通过搜索引擎,可能是听到朋友说起,有了点兴趣,但是到了这个页面以后,看不到产品介绍、不知道如何购买,虽然portal本身使用了“e网打进”,服务部门的同学可以及时与访客交流,但页面内容的缺失导致流失率依然很高。

有了上述分析,很直接的想法就是portal要转型,重点满足普通访客,促进他们转化为e的付费用户,所以我们加重了营销相关内容,力求创造更多的销售机会,也就是所谓的“潜在用户”。进一步思考:

潜在用户 = 访客数 × 转化率

我们可以一方面通过增加页面的营销内容提高转化率,另一方面也可以通过SEO、公关、推广等方式增加访客数,下面只说前者,但两者的目的都是希望能加粗上图中访客到“潜在用户”的线。

之后,我们和销售、服务一起讨论,确认了目的,总结出portal需要哪些页面,以及导航菜单的结构,因为整个站点的复杂度相对较低,所以我们压缩在一级菜单里解决了,如下表。

产品portal菜单结构示意
产品portal菜单结构示意

接着是确定每个页面上都需要哪些元素,以首页为例,我们列出了下表。

首页的元素
首页的元素

上面的工作可以看作“结构化思维”,“战略、范围”的设计基本完成,接下来就是“形象化表达”了,“结构、框架、表现”,UE的同学就成了主角。下面几张图是用哪些工具做的就不说了,这里聊一下PDUE谁做什么事情,怎么配合。

一开始,PDUE一起讨论,手绘出首页的大概样子。PD要表达清楚每一个模块的商业目标,可以给出自己对页面的布局建议,但最终的页面结构,UE可以主导确定。

纸面Demo
纸面Demo

然后是线框图,PD有时候也会直接给出这个,“变脸”项目中,是UE的同学做的。大家仍然是讨论确定,UE这时候会在设计的过程中融入很多自己的想法,PD要做到的就是防止走偏,保证大家对商业目标理解的一致。

比如在下图中,大家讨论后确定页面为“左侧大右侧小”的双列结构,并且左侧的内容主攻访客,右侧的内容主攻付费用户。

线框图Demo
线框图Demo

接着,UE出页面效果图,会安排销售、服务等相关方来做一次评审,告诉他们这就是将来看到的页面,征求意见,他们一定会有各种疑问,这时候PDUE需要确保每一个细节设计都是有理有据,包括每块区域的位置、长宽;每行文字的字体、字号;每个小图的颜色等等,都不只是为了好看,而一定是与商业目标符合的。

比如下图中,“立即购买”的区域用了页面上最跳的橙色,在充满商业气息的蓝色氛围下很醒目;且位置在“e网打进”访客的电脑最常见的分辨率,即1024×768的首屏右下角,这归功于数据分析;又有个亲切的美女在向你招手,进一步吸引眼球。以上三点设计非常强势的突出了目的,至于是否太过,需要后续的效果分析来验证。

视觉效果图
视觉效果图

200912月在线上的这个页面,整体和上图看起来还是很像的。今后一定会有变化,不知道你在看的时候是什么样子。

新首页上线以后,事情还没有完,持续的监控和改进是必须的,所以在上线后的半个月、一个月、三个月这几个时间点,我们都做了一些数据分析,从结果看,有一定的效果,比如访客粘度、网站停留时间均有提升,填写表单留下联系方式的潜在用户明显增多,具体就不仔细讲述了。

------------------------------------------------------------如果你想第一时间看到最新内容, 就猛击此处订阅吧!

《产品设计体会(6031)产品新首页诞生记》有38个想法

  1. 页面虽小,分析很详细透彻。以事实为依据,以数据做依托。

  2. 流程顺序是走了,感觉不够商务。 真的,特别是登录哪块。

    iamsujie Reply:

    @iouhuan, 有什么好建议?呵呵

  3. 呵呵学习了,只是产品介绍和全能版这两个栏目有什么不同呢?不是特别理解为什么把他们分开呈现,呵呵

    iamsujie Reply:

    @矢车菊, 你看得好细,全能版是个特别的版本,可以理解成是短期内重点推广的东西吧。另外,你在哪里看到全能版的啊。。。我怎么没找到。。。

  4. 在1024×768、FF下,那个亲切的美女没有出现在首屏右下角,失望。
    不过,能让最终页面与UI效果图这么接近,还真是挺难的。

    iamsujie Reply:

    @行云流水泵, 我这里1280×800能看到半个,呵呵

  5. 学些了,由于刚看完《用户体验要素》这本书,看到你这篇文章,刚好是理论增加了案列的补充。从中学到不少东西!谢谢苏杰!

  6. 我的1280×800 几个浏览器都正好把现在购买挤到首页以外了

    iamsujie Reply:

    @菠菜, 嗯,有点变了,后来没跟这个东西

  7. 很好~重点突出,层次清晰 呵呵~~
    ps:有个小bug,首页tab没加链接,点到其他页面就回不来啦~

    iamsujie Reply:

    @xianling, 奇怪,我可以的呀~

  8. 遨游2.5.11 的不行 其他浏览器貌似没问题

  9. 麻花配个好包装,是不会变蛋糕地~
    拿个UE、PD标榜下了吧,捣鼓半天,可怜地是,仍旧不过2000年的水平,唉~~~~~~

    iamsujie Reply:

    @silencer, 呵呵,是啊,能不能给点建议呢,或者给些好的案例看看~~~ 一是要我们的水平能做得出来,而是要我们的用户能看得懂,还是有点纠结的。。。

  10. 矢车菊 :
    呵呵学习了,只是产品介绍和全能版这两个栏目有什么不同呢?不是特别理解为什么把他们分开呈现,呵呵
    iamsujie Reply:十二月 20th, 2009 at 22:35@矢车菊, 你看得好细,全能版是个特别的版本,可以理解成是短期内重点推广的东西吧。另外,你在哪里看到全能版的啊。。。我怎么没找到。。。

    在产品介绍里面,下面的二级导航里面有

  11. 流程很清晰。
    还有,那个绘制线框图的工具可以推荐下吗?谢谢

    iamsujie Reply:

    @sunfish, axure RP,搜一下,很有名的

  12. 其实改版最难的一步

    “我们和销售、服务一起讨论,确认了目的,总结出portal需要哪些页面”

    是这个

    还有就是改版前后的效果对比,毕竟这个才是最终结果

  13. 改版其实挺难的,要应付公司内部领导各种各样的需求,搞不好设计评审阶段来来回回好几次。最终效果还不一定能满足用户的需要,比如前段时间有用户短消息问我“你们为什么要改版,以前不是很好的吗?给我的工作带来了不少麻烦!”。

    简单浏览了一下,不错,只是貌似你们的浏览器兼容还做的不够好,我用chrome访问有些页面有瑕疵,比如“产品更新”。

    iamsujie Reply:

    @Ben, 嗯,我们确实是只支持ie,原因看这里 http://iamsujie.com/9000/9037/

  14. Ben :
    改版其实挺难的,要应付公司内部领导各种各样的需求,搞不好设计评审阶段来来回回好几次。最终效果还不一定能满足用户的需要,比如前段时间有用户短消息问我“你们为什么要改版,以前不是很好的吗?给我的工作带来了不少麻烦!”。
    简单浏览了一下,不错,只是貌似你们的浏览器兼容还做的不够好,我用chrome访问有些页面有瑕疵,比如“产品更新”。
    iamsujie Reply:十二月 24th, 2009 at 11:13@Ben, 嗯,我们确实是只支持ie,原因看这里 http://iamsujie.com/9000/9037/

    做企业类产品,是可以不考虑firefox的。记得我前一家软件公司也是这样的定位“若你要用我们的产品,你得用IE访问”

    但可恶的是微软自己的IE也有好几个版本,而且各个版本之间的差异相当大。从未来发展趋势来看,IE6、7还能挺几年。而IE8已经很接近于标准了。

    iamsujie Reply:

    @Ben, 这事儿一说到中国特色,就有得分析了~

  15. 唉,摆脱不了e的影响了,新规划的首页差不多是个精简版的ePortal

  16. 这个页面chrome下跑跑了http://e.alisoft.com/portal/sme/story.html

    iamsujie Reply:

    @悟空, 意愿有限,没支持chrome

  17. 整体是不错的,淡雅的风格。下面是若干意见:

    · 大广告位作用不突出,更像只是点缀。既然要宣传活动,文字内容可以突出些,再加个引导的点击按钮。

    · 顶部的“退出销售渠道商”的公告有些负面,只是面向登陆用户,可以在登陆后公告。

    · 栏目设置方面。成功故事,为什么不展示下明星企业(藏在合作专区了),眼见为实。小e课堂是特色,对于陌生客户,觉得用客户培训作标题更直接些。

    · 注册与购买。恐怕,改版后大部分的信息提交是点击注册进来的,而不是购买。钱掌柜有在线体验,e网打进没有?网络重在营造市场,要挖掘潜在客户,还需要通过一步步的筛选,例如关注程度、注册、试用等。

    · 右上角链接客服中心。还是改回“帮助中心”的好,不错的知识帮助,最好能结合到e网打进产品中。另外,很多在线客服软件都有智能机器人,自动接待服务也是必要的。

    · 内容方面。标题很小功夫,如“在线聊天更尊贵”,但标题本身是种关键信息,如果都变成语句,会有种理解障碍,每看一个,都要理解下,反而不好。优点可以在进一步的内容介绍中体现,标题还是简洁些好。

    · 总结。产品网站核心功能就两点:用户服务(登陆、帮助、信息),产品营销(宣传展示、了解咨询、客户发掘)。形式大同小异,细节才是决定效果。

    iamsujie Reply:

    @intergrid, 谢谢,感动~,我转给现在负责这个页面的人看去~~~

  18. 为什么图片都加载不出来?

    iamsujie Reply:

    @elya, 应该是你的问题,或者你看看右上角的公告~

  19. 一开始感觉大Banner上的字:新改版 全新起航 错过SaaS 你将错过互联网的最后一桶金 没有提及e网打进的核心竞争力,感觉浪费黄金位置了; 后来看一下你们策划,大banner区还预留来做活动专题,吸引眼球。又学到点东西了

    不要如果想到突出核心竞争力,一针见血表明用户能得到的benefits, 这句躲在logo后面的话比较有效:网络营销效果提升3-5倍

  20. 图片全挂了,是因为商业机密,所以不恢复吗?

    iamsujie Reply:

    因为picasa被墙了。。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注