交互设计师成长录

【结】云信官网改版总结


      从12月初至1月上旬,云信官网改版告一段落。从产品提出改版到设计到正式提交开发,经历了近1个半月的时间。

      可能有人会问:官网改版为什么会花费如此大的精力?值得吗?

      首先要明确的是,云信是一款2B(toB)的产品,面对的是小型开发团队和企业级客户。官网的作用不仅仅是品牌传达,还需要承载许多内容。新用户通过搜索引擎或其他途径进入官网,直到注册成功或者拨打电话联系销售,这个转化过程都要在官网进行;老用户访问官网获取下载资料或者进行常用的管理操作,也需要官网提供便捷的入口。在产品初期,新用户转化尤为重要,官网作为与新用户的第一个接触点,重要性可想而知。 

      而在产品创立已近一年,业务拓展已初见成果之后,官网的许多问题也暴露了出来。

      

      问题

      产品团队汇总了销售人员和客户的反馈,大致可以总结为如下几点:

      内容缺失:很多用户反馈都是官网提供的信息不足,当意愿用户与销售取得联系时,仍抱着很大的疑问,需要销售人员一一解答。而没有主动联系销售的用户,很有可能在获得不到想要的信息之后就离开网站,产品就流失了一个潜在的用户。

“我想要试用下你们提供的功能,但是不知道怎么做”

“这个功能怎么计费?”

“有没有接了云信的客户?他们做成什么样了?”

      重要信息被隐藏,用户难以找到:其实优势页面和功能详情页面都是有的,但是入口隐藏得很深,用户很难找到。于是销售人员就必须每次花费大量时间回答这些基础问题,消耗了人力成本。

“你们的提供的功能相较于竞品,优势是什么?”

“这个功能具体是什么样的?有没有我需要的那块?”

      现有页面交互问题

      1. 信息架构混乱:以价格页面为例,用户认知可能是云信只有IM功能,而专项功能都是附属在IM功能中的。然而实际销售中,这些专项功能与IM功能是一样的,都可单独购买,这就误导了用户。

      2. 信息重复冗余:处处可见的云信优势,开发手册和视频教程,忽略了在每个页面上,用户真正需要关注的信息和最终行为落点。

      整体视觉风格:老版官网的整个视觉感受并不是很好,比较粗糙。而且也需要跟网易产品的风格相呼应,当然也需要更多的网易品牌露出。

“感觉云信的官网看起来不像网易的产品啊?” 


      确定目标

      设计起始于定义目标:产品目标和用户目标。

      在前面提到的改版背景下,可以一句话总结产品目标:官网是云信的第一销售人员。也就是说大部分用户与产品的第一个接触点是官网,在官网上能解答他们一部分最基础的疑惑,并且能够促使他们注册成为潜在客户,或者引导至真实的销售人员。这样实际上就完成了一次简单的销售行为。

      而访问官网的用户主要分为两类,新用户和老用户。

      新用户通过各种渠道来到官网,主要有搜索引擎搜索IM即时通讯相关而导入,或者通过运营线下宣传导入。主动搜索和运营宣传的人群可以说是比较精准的,可以说他们成为潜在客户的可能性很高。这样的用户群体,他们访问官网的目标相对明确,即获得信息以确定是否选择云信

      用研和用户反馈得出了用户最希望了解的信息:

  • 网易云信是什么?网易云信有哪些功能?(基础品牌宣传,功能详细)

  • 能满足哪些需求?我的需求能满足吗?(功能适用场景,客户案例,行业案例)

  • 和环信(竞品)比有哪些优势?(优势对比)

  • 多少钱?怎么收费?(价格详细)

  • 如何接入?(步骤,接入教程)

      那么官网就应针对这些疑问给予足够信息,同时,结合产品目标要促成他们的决策,通过引导至线上销售人员,或是通过运营活动吸引注册。

      老用户的目标则是更快的帮助自己的应用接入云信。老用户在接入云信过程中会从官网的咨询入口寻求技术支持的帮助,或者访问开发手册。接入后又会通过官网登录管理中心,查看App数据。他们需要的就是方便快捷的访问相关入口。 


      针对问题提出解决方案

      根据之前的需求分析得出的各个问题,逐一击破。

      问题1内容缺失

      解决方案:确定需要增加哪些内容,并推进产品产出

      通过分析用户目标我们可以得出官网需要承载的内容有以下这些:

  • 对产品的介绍,优势价格,详细信息的落地

  • 购买行为和提供服务支持的载体

  • 一些资料的承载

  • 运营信息的落地页面

      在与产品同学的合作中,也需要掌握一定的技巧方法。产品产出的内容不仅仅是介绍文字和总结号召式的文案,还有内容的阐述方式,逻辑的体现,用户关注的重点等等需要考虑的。同时文案的展示也需要配合交互和视觉,做到详略得当,重点突出,用户易读。所以内容产出时,坐到产品边上去。不能让产品一人单干,需要交互配合,互相交换思路和意见。内容产出时,交互稿也基本有个初稿了,不仅提升了工作效率,也保证了沟通过程中信息传达到位。

      以行业案例中的教育行业为例:产品最初产出的文档比较简单。

      拿到这样的内容,设计师是很难下手的。于是推回给产品,一起来理清这一堆内容中的重点,以及产品同学到底想要传达哪些信息。 

      整理后得到的信息点如下

  • 行业痛点:

            痛点1:云信针对痛点1的解决方案

            痛点2:云信针对痛点2的解决方案

            痛点3:云信针对痛点3的解决方案

  • 行业常用的云信功能点

  • 行业客户案例 

      这样的信息结构已经清晰了。

      但是经过再次推敲,结合用户与销售对话的情境剧本来看,用户会围绕自己关注的行业痛点进行发散。于是会提出许多问题:

  •      对于某个痛点,云信能提供哪些解决方案?

  •      哪些客户是针对这个痛点的?

  •      都用了什么功能?怎么实现的?

      所以之前的方案将这三个割离开来并不符合用户实际的目标。于是最终与产品达成一致,交互稿做了按痛点为模块的划分,同时产品的内容也以此思路进行输出。
 

      问题2信息架构复杂混乱

      解决方案:规划用户体验路径,优化信息架构

      信息架构混乱也就导致了上面提到的重要信息被隐藏,现有页面信息冗余等问题。针对信息架构的设计方法很多,这次在官网改版中,则采用情景剧本,梳理用户来到官网后的行为,并重新规划用户体验路径。

      在需求分析阶段,通过用研同学对现有客户的访谈,我们整理了用户期望接收信息的流程,也就重新整理了用户在官网上的体验路径。       导航信息整理:

      原来的导航并没有什么太大的问题,但是加入了新内容后,就要考虑如何将这些内容加入到原导航中。

      使用卡片分类法可以得出大致的导航项,并根据体验路径,调整导航顺序。

      但仍有问题,导航中有一列比较特殊,为什么选择云信。在典型的官网类网站中,这类问题一般会以非常弱的形式放在页面底部,让用户可以找到即可。但是对于云信产品而言,这几个问题却是新用户最需得到解答的问题,因此放在底部是不合适的。

      根据我们希望用户接触的体验路径,这类问题应该在功能之后,案例之前。但是单独作为一个主导航项则显得过重,而且导航项也略多。于是使用了现在流行的多模块导航,采用了这样一个设计方案。同时去掉了首页的概念,转而使用产品这个词来概括功能和优势。同样的,解决方案由于包括两个部分,行业案例和客户案例,所以也使用了多模块导航。 

      页面信息整理:

      以首页和价格页面为例。

      原来的首页信息如下图所示,信息混乱。


      根据之前的体验路径和规划,并结合用研同学对现有潜在客户的调研,得出能真正打动他们的信息点,并进行重新规划和整理。      同样的,对于价格页面,原本的页面主推IM服务的三种销售模式,直接弱化了其他功能的价格。误导用户我们的IM服务已经包含了许多独立收费的功能,导致销售总在徒劳解释各个功能价格之间的关系。

      改版后,用统一的排版形式强调了各个功能间的平等关系。价格信息和功能信息也更加清晰了。

      其他页面也同样遇到各种信息架构上的问题,以同样的思路进行了重新设计,不一一列举了。

      问题3各方诉求的平衡 

      云信官网不仅仅是满足用户的诉求,还承载着运营活动和注册KPI。

      运营活动的落地页,需要在官网有所体现。但由于运营活动不可控,可能在广告位和宣传Banner上与官网的设计产生冲突。且对新用户来说,还未了解云信是什么的情况下就推运营信息,恐怕是不合适的。因此选择了一个各方都能接受的折衷方案,在官网首页功能介绍之后,露出了运营的活动推广banner(见上面的首页图),保证用户在进入页面时第一眼能够瞥见运营内容,同时也不影响最重要的功能介绍。

      同样的,注册转换率也是重要的KPI指标。之前为提高注册转化率,产品和运营团队希望在首页banner处加入直接注册填表的模块。这直接打断了用户获取信息的流程,况且表单很长,在首页的各种信息中让用户填写,用户也无法专心,体验上很不好。但有时体验只能让步于KPI指标,对这个方案只能暂时妥协。但同时也预留了埋点,看看注册数据是否真的有提升。最后的数据显示,放在banner上的注册,其实并不能提升注册量。因此在新版官网中去掉了整个表单填写,而仅保留一个简单的填写邮箱入口。有的时候设计师难以以体验来说服团队成员时,可以用数据说话,设计方案也更容易被人接受。 

      

      改版后的效果

      上线后一个月,注册转化率提升为原来的2倍。注册转化率的提升,则说明官网的信息传达给用户,成功地说服了用户主动成为了我们的客户。得到这样的数据在意料之中。但是咨询量也有所提升,这与我们之前的预期并不相符,我们原本设想用户抱持的疑惑在官网上得到了解答,对人工咨询的需求会减少。但经过收集销售人员的反馈,来咨询的客户实际上不再询问那些基础的信息了,更多的是洽谈具体的接入事宜。

      如此看来,在最开始提出的官网目标:官网是云信的第一销售人员,已经达到。 


      结语

      这次官网主页面改版前后持续了一月有余。后续还有二期三期的迭代优化,需要逐渐完善。

      设计工作主要分为四个阶段,即:明确改版目标,找出现有问题,针对问题提出解决方案,积极与上下游合作并推进各方产出。每个部分,都穿插着交互设计师与团队各个角色之间的合作。设计师的工作不仅仅是给出设计方案就结束了,在设计方案给出前的调研,理清需求阶段需要与产品团队密切配合,设计方案转化为视觉稿和最终上线,又需要跟进视觉,开发和测试同学的工作。在这个过程中,需要不断推动各方工作,并且要平衡各方的压力,保证设计方案的完整呈现。 



评论(1)
热度(11)
  1. Lofter by GearkeyDaisyWithCat 转载了此文字  到 贴纸船
    DaisyWithCat
  2. 大饼DaisyWithCat 转载了此文字
    年轻优秀的设计师!!!熠枫,你给163个赞!

© DaisyWithCat | Powered by LOFTER