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说,“用户参与整个过程,因此我们的设计是有效的,我们为此而骄傲。”

 

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/16906/

(0)
iouedioued
上一篇 2016-08-23 10:49
下一篇 2016-08-24 12:59

相关推荐

  • [转]设计智能推送通知的要点|译文

    当你安装一款新的应用时,有多大比例是允许收到推送通知的呢?我已经被无数的推送通知搞烦了!我甚至有在凌晨被推送通知吵醒的经历!这怎能让我爱上那款应用呢!推送通知的逻辑应该更加智能化才是!本文就阐述了设…

    2016-07-15
  • 创新历史上的今天:黑白电视首次面世 1926.01.26

    今天看到谷歌Doodle的名称是: 黑白电视首次面世 1926 ,我们来说一说这个产品从0到1的创造历史,从交互设计角度看你有什么启示呢? Doodle的名称: 第一台电视亮相 90 周年 表明此doodle时间是: 26.01.2016 这个产品…

    2016-01-26
  • 交互设计案例视频展示

    一款APP的交互原型演示,有能力的话自己动手做个视频吧! [hana-flv-player video=" http://jhxt.org/wp-content/uploads/2015/07/ixdshow.flv" width="640" height="auto" description="Ta APP 交互简介" player="…

    2015-07-01
  • 分享两个交互设计作品

    今天跟大家分享的是二两童靴的两个交互设计作品,第一个是平安保险产品配置后台交互设计,第二个是台州银行客户经理移动办公App交互设计,希望大家多多交流。如果你也有好的作品想在我是UE网上展示,可以加学习群15…

    2015-07-02
  • 对话界面的现在与未来

    计算机与人类并不使用同一种语言。所以为了之间的交互成为可能,我们依赖于图形化的用户界面(GUIs)。但是GUIs同样有着天然的屏障:人们必须去学习如何使用他们。他们不得不去学习一个汉堡icon隐藏着一个菜单,这是一个button触发一个操作。但是随着技术的发展,语言识别和处理效率的提高改善,我们当前的交互方式正在变得更直观,简单而又高效-通过对话界面

    2016-07-20
  • APPLE WATCH案例学习!

    编者按:这篇实战的对象是Wallaby,一款个人财务APP,文章总结了四点经验:导航、通知、复杂任务以及动效。每个方面都有需要注意的问题和对应的解决方法,进入译文 >>> Wallaby是一款个人财务app,可以在…

    2015-05-21
  • 超级干货:75条界面版式设计准则

    一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求。 有一个设计咨询公司根据自己的客户案例,总结了 75 个经过实践证明的原则: 1. 使用单栏布局代替多栏布局 …

    2016-07-14
  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • [自译]企业UX案例研究:在紧张期限内提高可用性

    在四个月的时间里,LiquidPlanner塑造了一个新的dashboard模板功能,这让用户印象深刻,并且有很高的使用率和很好的商业效益。

    2016-08-24
  • 交互设计与用户体验分析实例——外卖产品

    题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。

    2016-10-26