交互学堂
专注分享专业知识

UX案例学习:HubSpot如何重新设计他们的主页

原文标题:UX Case Study: How Hubspot Redesigned Their Homepage

原文作者:Jerry Cao

译文作者:shu℃

HubSpot的主页每月被超过400万的用户访问 ,同时为超过90个国家,18000+的企业提供服务。

他们的首页是公司整个在线生态的关键。所以,当他们的公司规模变大,增加了许多新的产品,逐渐全球化,主页的重设计就变得势在必行。

这个需要快速的完成,在产品的重大改版,INBOUND,HubSpot的年度发布会之前,只有1.5个月来完成项目。

UX设计师,Austin Knight主导了这个项目,一个三位成员组成的团队(视觉设计师,开发者,市场经理)。在团队之外,Knight也和六名其他的产品定位,版文案,技术研发成员共事。

这个故事就是一个设计师如何集中研究,协作,坚持以用户为核心为底线,安排一份紧凑的时间规划。

1472013721-3967-mAO7fcQe27Hwru9WvSadAic7yBfQ

图片来源:HubSpot重设计后的主页

下面会是一段来自“企业产品设计项目指南”的节选,这些免费的指南通常都是取自于实际的项目实践:

第一步:深入学习并且不断测试

HubSpot的项目开展的不错,Knight引入了更多的迭代,并且将用户体验方法lean UX 带入了他的团队。由Jeff Gothelf创造,Lean UX 将商业策略和轻量设计过程统一,通过不断的“学习循环”(建立-测量-学习)。

在这种情景下,首先要做的工作就是去深入分析,研究用户快速验证假设。

分析与热图

不同于一些其他由市场分析提供给设计团队网站数据的过程,Knight亲自深入到数据当中,有海量的有效数据在HubSpot,Google分析以及Mixpanel中。最大的挑战就是如何去整理数据,并从中获得有效的信息。

1472013715-9146-maCyMDHkicGA422Hoftx1a5SicVA

Knight发现了相当数量的用户表现出了以下的行为:

从主页直接进入到定价页面(用户直接忽略了他们从产品中得到的好处)

从主页直接进入到FAQ(这意味着他们没能找到自己问题的答案)

从主页直接进入到占站内搜索(通常是寻找产品查询,这表明他们没能很快的找到他们需要的信息)

很显然,尽管网站内容很多,但是主页缺乏较少跳转的关键信息。

Knight也研究了热图,通过25000名用户的滚动操作,提供了467308独特的数据点。从几年前到现在,Knight试图去探索发生了什么变化,发现只有25%的用户会在首页滚动。

1472013714-2103-p6TXlYCEaSWI7rFNLdWScVreaTcg

会议记录

最后,用户会议录音作为定量和定性研究的参考。

因为录音是真实的,隐匿未被发现,所以提供的结果相对可靠,这是用户在自然环境下真实的行为记录。

会议录音在整个设计过程中都提供了足够的支持,提供了一系列的数据来验证用户访谈和可用性测试。

1472013715-3852-QQpEq4jBxyyZhQI7pouwQnHFwmrQ

定性研究

定量研究可以帮助你发现“是什么”,但是并没有揭示“为什么”,深入行为背后的动机以及用户在体验上的需求,设计师需要去采访用户和利益相关人员。

1、用户访谈

HubSpot的主页,有10%的流量是用户进行登录或寻找资源,重新设计的时候不能忽略这样一个有价值的用户人群。

Knight采访用户的时候,不仅是为了验证他的数据来源,同时还在构思新主页的基础,如何给特定的群体提供动态的内容。

通过制定严谨的用户访谈流程,归纳问题结果,他得到了一份很有价值的反馈。

2、利益相关者的访谈

因为这个项目将会让HubSpot焕然一新,所以Knight也采访了相关的leader,产品,销售,推广,客户服务团队。

然后他相互参考用户访谈的结果与反馈,电话记录,尝试性的重设计,tweets,邮件,甚至是他在自己演讲中发表过的言论。

1472013714-7812-RW6Hm4XicHdHicicUo6tK5jxvUWQ

“数据驱动,人本设计-这就是我们所做的。”Knight说道。“设计师需要去解读数据,尽可能客观地证明他们的设计决策,我们现在工作的行业中,设计师们被许可去接触到更多的定量或定性数据,因此我们一般做决定不会基于个人的喜好,或者是别人口中的’喜欢’。当今设计师的能力是如何去解读显性和隐性的数据,深思熟虑,然后将这些信息转换为设计的解决方案。”

多元测试调整

最后,基于之前做的所有研究,Knight很快的就设计出了一些变化元素进行多元测试验证。

测试帮助确立或者删除特定的设计元素,当它们迁移到完整的主页设计中去时,这将会影响整个团队的战略决策。

1472013719-2461-c3jAPic2WPETlUxa97kw8neScOBg

第二步:建立一个真实的设计

按照“企业产品设计项目指南”中所说的,Knight遵循结构化的流程进行设计“开始发散,测试,学习,迭代,逐步缩小至最优解”。

低保真原型

当团队决定了三个主要的变化后,他们建立低保真原型,如果受众需要会逐步增加保真度。当选择了一个主要的方向时,Knight在完成视觉设计之前,仍然会用粗糙的低保真原型进行多次迭代。

实际上,低保真原型与最终的产品有着惊人的相似,因为来自用户的反馈以及方向的确定都会集中在这个阶段。

1472013724-7883-BDP3c4fUV3DO4oJzpiaiaib4Ko9w

“我们至始至终都在与用户测试,从纸上原型,线框图,到视觉设计。”Knight说。“用户的声音在整个过程中都一直存在。作为一名设计师,这个耳边额外的声音是恨重要的,他不会帮你做出所有的决定,但是它可以帮助你找到你自己的方向。”

模型

在视觉设计阶段,Knight和视觉设计师密切合作。

同样需要注意的是,Knight也会和开发人员讨论设计中的每一步,虽然在高保真原型之前他们不会开始真正的编写代码,但是他们也参与进交互当中,确保整个团队是在同一进度上。

团队运用了现代感十足并且大胆的颜色。高清的图像以及非典型的网格结构。这种网格结构的灵感,来源于新主页需要代表的”设计生活”。基于网格,模块化的结构能够支持跨设备,内容可以很容易的更改或移动内容更新,而这部分的灵感来自于用户的建议。

1472013727-8174-aUhm1Mr0CcuYMEmwcZHHA8RSqiaA

另一个有趣的元素是,非典型的网格结构照片框架。

团队采用了一套非常独特的照片完美的融入到框架中去,允许off-hover状态展示一片区域,将扩大到合适的网格元素,on-hover,揭示了完整的照片和其他信息。

这张照片的处理成为了一种独特的设计元素和交互方式,极大的提高了用户的参与度,团队也开发了个性化的动态内容给用户,这是早期用户访谈中抓住的主要设计机会。

最后,因为16%的HubSpot用户通过手机访问网站,超过19%的美国人有特殊的访问需求,兼容性和可访问性元素的设计的每一步都很关键,包括代码层面。

与项目的其他方面一样,移动端与桌面版本的迭代同时进行。

第三步:编写代码以及测试

下一步,是构建干净的代码,使用公司自己的CMS。

Knight,他的视觉设计师和开发人员携手合作,确保代码在所有设备上兼容,QA会定期的测试原型。

1472013728-1149-sHy7icnvibgNyR1QibIKMysNsbcA

团队测试网站,通过不同的设备以及在多个版本的Chrome,Safar,Firefox,Internet Explorer,Opera和Yandex。团队使用BrowerStack模仿网站在实际设备上的运行情况,因为他们知道自己在每个平台上的用户比例,他们可以根据用户的数量以及临界情况来优先修复。

第四步:不断测试和迭代

新网站按照原计划的,在INBOUND的舞台上发布了,作为新产品以及新功能被创始人宣布。这次发布取得了巨大的成功。

作为精益的UX从业人员,核心团队不能停留在他们的荣誉上,小组轮流在生活网站上去查看google分析与HubSpot相关的指标:

转化率

提交率

下降率

目标完成率

导航流程(来源以及目的地)

特定的搜索结果

团队检测出一些无效的指标,页面跳出率停留时间,来为下一阶段确认任务。

继续优化设计,团队进行了更多的热图测试(超过25000的用户参与)以及更多的可用性测试。

1472013729-3208-rkuM11qSMlOW3jBxE4xuNQGOicRg

结语:基于数据的成功体验

这是第一个项目,Knight和团队充分的使用了Lean UX过程,结合了数据与形式快速产出商业结果。因此网站同样协作灵活,迭代可以很轻易的进行,并且保持设计上的新颖,响应用户需求和业务目标都能实现。

虽然我们不能给深入到所有的数字中去,但我们可以根据上线后业务结果来评判:

增加了用户的参与度

增加了用户对导航元素的使用

增加了注册率

产品团队收到了更少的吐槽反馈

HubSpot现在相信Lean UX是一个很棒的方法。“我们的团队可以高效的合作。”Knight说,“用户参与整个过程,因此我们的设计是有效的,我们为此而骄傲。”

 

未经允许不得转载:IAMUE » UX案例学习:HubSpot如何重新设计他们的主页

评论 抢沙发

评论前必须登录!