产品设计体会(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月在线上的这个页面,整体和上图看起来还是很像的。今后一定会有变化,不知道你在看的时候是什么样子。

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

产品设计体会(8012)做产品经理就像找小姐?!(转)

翻出来一份同事写的培训记录,应该是去年的需求管理方面的,该人长相彪悍,被大家一致认为家里是开夜总会的,他倒也欣然接受,于是有了同样文风彪悍的短文一篇,当作介绍产品经理(PD)日常工作的文章看吧,正式开始:

  • HI ALL:听了董老师的课,看了苏老师的笔记,收获良多,收益非浅,对自己的工作有极大的指导意义。
  • 鄙人一直以来都认为PD的工作就是和找小姐的过程一样,都是要解决两个问题:一个是X谁的问题,另一个怎么X的问题
  • X谁的问题,在公司一般不由PD费心选择,上面的老板自然早就运筹帷幄且成竹在胸,就象是老板把哥几个带到了一个夜总会说到:“哥几个今天晚上就在这里消费,大家好好干,整高兴!”那我们也绝对不会跑出去换个其他的夜总会玩,你说是不是?这个步骤我们的专业术语叫做“立项”;
  • 接下来,我们会叫来几十个MM 来看看,看看哪些个MM长得好看,笑得甜美,声音好听,性格温柔,再叫她们做几个仰卧起坐给哥几个看看,这个步骤我们的专业术语叫做“调研”;
  • 调研的结果是,我们把符合我们标准的MM留下来了,赶走了那些长得不好看的MM,叫她们回去反省、学习、进步,等进步好了再出来接客。我们要‘有所为,有所不为’,自己的体力有限,也不能全部都留下来,这个过程,我们就叫做“规划”;
  • 规划结束,老板给每个兄弟都分一个MM,让哥几个练习演讲口才和忽悠技术,分配的原则就要看各位擅长应付哪种类型的MM了,这个过程我们的专业术语叫做“模块划分”;这个过程结束,好戏就要开场了;
  • 好戏开场,哥几个一人抱一个MM,海阔天空,天马行空,前世今生。。。一边胡吹乱砍,一边拉MM的手,一边还碰MM的长发,各人心怀鬼胎,想着后面的好事,这个过程,我们的专业叫做“设计”;海阔天空,胡吹乱砍,我们叫“头脑风暴”,为在MM面前博得好感,哥几个相互吹捧,我们叫做“团队协作”;
  • 要想换地方娱乐的,需要和MM达成一致,在离开大厅跳双人舞之前,出于礼貌和安全,哥们还是应该给我们大家打个招呼是不是?这个过程我们就叫做“评审”;如果其中有个兄弟说:“小心点哦!最近扫黄,风声紧。。。 ,”那明显就是“评审”没通过哈;
  • 如果评审通过,当然就是该干什么干什么了,XXXXXXXXX.(此处省去108字),这个过程我们叫“开发”;
  • 有鉴于哥们的体力有限,这次开发,你一般不太可能展现完72招108势,您的大部分技术还没展示出来,不过你不要着急,也不用感觉委屈,你有本事就有的是机会给你,对于本次展示剩下的部分,我们会安排您过一段时间再进行展示,这个过程我们就叫做“迭代”;
  • 开发结束出来,老板问大家:“哥几个今天玩得HAPPY不?”你肯定要说“HAPPY!HAPPY!”但是如果有MM说:“XXX那个家伙让我感觉不爽!有X、Y、Z这个几个地方不到位”那你就惨了,测试给你报了BUG。再如果老板对你说:“你娃不适合玩这个”你就更惨了,这个我们就叫“考核”;
  • 本次培训,老师对以上整个过程的实际操作方法给我们做了理论性指导,我们的苏老师也做了总结和归纳,结合自己平时工作中的实际操作,感觉很好,很 HAPPY!以后工作也好,泡MM也好,大家有了理论知识做基础,完全有理由相信自己可以做到游刃有余,百发百中。

最后,我们再对比着看一篇比较悲观的文章——《PD就是出来卖的》,希望同学们能对PD的工作有更深刻的认识……