原文标题:UX Case Study: How Hubspot Redesigned Their Homepage
原文作者:Jerry Cao
译文作者:shu℃
HubSpot的主页每月被超过400万的用户访问 ,同时为超过90个国家,18000+的企业提供服务。
他们的首页是公司整个在线生态的关键。所以,当他们的公司规模变大,增加了许多新的产品,逐渐全球化,主页的重设计就变得势在必行。
这个需要快速的完成,在产品的重大改版,INBOUND,HubSpot的年度发布会之前,只有1.5个月来完成项目。
UX设计师,Austin Knight主导了这个项目,一个三位成员组成的团队(视觉设计师,开发者,市场经理)。在团队之外,Knight也和六名其他的产品定位,版文案,技术研发成员共事。
这个故事就是一个设计师如何集中研究,协作,坚持以用户为核心为底线,安排一份紧凑的时间规划。
图片来源:HubSpot重设计后的主页
下面会是一段来自“企业产品设计项目指南”的节选,这些免费的指南通常都是取自于实际的项目实践:
第一步:深入学习并且不断测试
HubSpot的项目开展的不错,Knight引入了更多的迭代,并且将用户体验方法lean UX 带入了他的团队。由Jeff Gothelf创造,Lean UX 将商业策略和轻量设计过程统一,通过不断的“学习循环”(建立-测量-学习)。
在这种情景下,首先要做的工作就是去深入分析,研究用户快速验证假设。
分析与热图
不同于一些其他由市场分析提供给设计团队网站数据的过程,Knight亲自深入到数据当中,有海量的有效数据在HubSpot,Google分析以及Mixpanel中。最大的挑战就是如何去整理数据,并从中获得有效的信息。
Knight发现了相当数量的用户表现出了以下的行为:
从主页直接进入到定价页面(用户直接忽略了他们从产品中得到的好处)
从主页直接进入到FAQ(这意味着他们没能找到自己问题的答案)
从主页直接进入到占站内搜索(通常是寻找产品查询,这表明他们没能很快的找到他们需要的信息)
很显然,尽管网站内容很多,但是主页缺乏较少跳转的关键信息。
Knight也研究了热图,通过25000名用户的滚动操作,提供了467308独特的数据点。从几年前到现在,Knight试图去探索发生了什么变化,发现只有25%的用户会在首页滚动。
会议记录
最后,用户会议录音作为定量和定性研究的参考。
因为录音是真实的,隐匿未被发现,所以提供的结果相对可靠,这是用户在自然环境下真实的行为记录。
会议录音在整个设计过程中都提供了足够的支持,提供了一系列的数据来验证用户访谈和可用性测试。
定性研究
定量研究可以帮助你发现“是什么”,但是并没有揭示“为什么”,深入行为背后的动机以及用户在体验上的需求,设计师需要去采访用户和利益相关人员。
1、用户访谈
HubSpot的主页,有10%的流量是用户进行登录或寻找资源,重新设计的时候不能忽略这样一个有价值的用户人群。
Knight采访用户的时候,不仅是为了验证他的数据来源,同时还在构思新主页的基础,如何给特定的群体提供动态的内容。
通过制定严谨的用户访谈流程,归纳问题结果,他得到了一份很有价值的反馈。
2、利益相关者的访谈
因为这个项目将会让HubSpot焕然一新,所以Knight也采访了相关的leader,产品,销售,推广,客户服务团队。
然后他相互参考用户访谈的结果与反馈,电话记录,尝试性的重设计,tweets,邮件,甚至是他在自己演讲中发表过的言论。
“数据驱动,人本设计-这就是我们所做的。”Knight说道。“设计师需要去解读数据,尽可能客观地证明他们的设计决策,我们现在工作的行业中,设计师们被许可去接触到更多的定量或定性数据,因此我们一般做决定不会基于个人的喜好,或者是别人口中的’喜欢’。当今设计师的能力是如何去解读显性和隐性的数据,深思熟虑,然后将这些信息转换为设计的解决方案。”
多元测试调整
最后,基于之前做的所有研究,Knight很快的就设计出了一些变化元素进行多元测试验证。
测试帮助确立或者删除特定的设计元素,当它们迁移到完整的主页设计中去时,这将会影响整个团队的战略决策。
第二步:建立一个真实的设计
按照“企业产品设计项目指南”中所说的,Knight遵循结构化的流程进行设计“开始发散,测试,学习,迭代,逐步缩小至最优解”。
低保真原型
当团队决定了三个主要的变化后,他们建立低保真原型,如果受众需要会逐步增加保真度。当选择了一个主要的方向时,Knight在完成视觉设计之前,仍然会用粗糙的低保真原型进行多次迭代。
实际上,低保真原型与最终的产品有着惊人的相似,因为来自用户的反馈以及方向的确定都会集中在这个阶段。
“我们至始至终都在与用户测试,从纸上原型,线框图,到视觉设计。”Knight说。“用户的声音在整个过程中都一直存在。作为一名设计师,这个耳边额外的声音是恨重要的,他不会帮你做出所有的决定,但是它可以帮助你找到你自己的方向。”
模型
在视觉设计阶段,Knight和视觉设计师密切合作。
同样需要注意的是,Knight也会和开发人员讨论设计中的每一步,虽然在高保真原型之前他们不会开始真正的编写代码,但是他们也参与进交互当中,确保整个团队是在同一进度上。
团队运用了现代感十足并且大胆的颜色。高清的图像以及非典型的网格结构。这种网格结构的灵感,来源于新主页需要代表的”设计生活”。基于网格,模块化的结构能够支持跨设备,内容可以很容易的更改或移动内容更新,而这部分的灵感来自于用户的建议。
另一个有趣的元素是,非典型的网格结构照片框架。
团队采用了一套非常独特的照片完美的融入到框架中去,允许off-hover状态展示一片区域,将扩大到合适的网格元素,on-hover,揭示了完整的照片和其他信息。
这张照片的处理成为了一种独特的设计元素和交互方式,极大的提高了用户的参与度,团队也开发了个性化的动态内容给用户,这是早期用户访谈中抓住的主要设计机会。
最后,因为16%的HubSpot用户通过手机访问网站,超过19%的美国人有特殊的访问需求,兼容性和可访问性元素的设计的每一步都很关键,包括代码层面。
与项目的其他方面一样,移动端与桌面版本的迭代同时进行。
第三步:编写代码以及测试
下一步,是构建干净的代码,使用公司自己的CMS。
Knight,他的视觉设计师和开发人员携手合作,确保代码在所有设备上兼容,QA会定期的测试原型。
团队测试网站,通过不同的设备以及在多个版本的Chrome,Safar,Firefox,Internet Explorer,Opera和Yandex。团队使用BrowerStack模仿网站在实际设备上的运行情况,因为他们知道自己在每个平台上的用户比例,他们可以根据用户的数量以及临界情况来优先修复。
第四步:不断测试和迭代
新网站按照原计划的,在INBOUND的舞台上发布了,作为新产品以及新功能被创始人宣布。这次发布取得了巨大的成功。
作为精益的UX从业人员,核心团队不能停留在他们的荣誉上,小组轮流在生活网站上去查看google分析与HubSpot相关的指标:
转化率
提交率
下降率
目标完成率
导航流程(来源以及目的地)
特定的搜索结果
团队检测出一些无效的指标,页面跳出率停留时间,来为下一阶段确认任务。
继续优化设计,团队进行了更多的热图测试(超过25000的用户参与)以及更多的可用性测试。
结语:基于数据的成功体验
这是第一个项目,Knight和团队充分的使用了Lean UX过程,结合了数据与形式快速产出商业结果。因此网站同样协作灵活,迭代可以很轻易的进行,并且保持设计上的新颖,响应用户需求和业务目标都能实现。
虽然我们不能给深入到所有的数字中去,但我们可以根据上线后业务结果来评判:
增加了用户的参与度
增加了用户对导航元素的使用
增加了注册率
产品团队收到了更少的吐槽反馈
HubSpot现在相信Lean UX是一个很棒的方法。“我们的团队可以高效的合作。”Knight说,“用户参与整个过程,因此我们的设计是有效的,我们为此而骄傲。”