原文标题：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说，“用户参与整个过程，因此我们的设计是有效的，我们为此而骄傲。”
原创文章，作者：ioued，如若转载，请注明出处：https://www.iamue.com/16906/
![[自译]Medium的Title,Subtitles&Headings的改进介绍](https://www.iamue.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
