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

[自译]UX案例学习- 世界的第一个做出响应式布局的航空公司网站

原文链接:UX Case Study: The World’s First Responsive Airline Website

原文作者:Jerry Cao

响应式设计是当前网页设计的行业标准。但它并不是一直如此。

现在,让我们快速的穿越时间,回溯到2014年,我们将深入了解世界上第一个响应式航空网页的设计和推出。你将会看到,在过去的两年中最具有影响力的网站项目的每个细节和决策。

Virgin America选择了和Work&Co作为合作伙伴,当时还是一家不足十余人的初创团队,合作的结果怎么样呢?

网站被选中并得到了丰厚的奖励,而且Work&Co迎来了爆炸性的增长,现在发展成为了超过100人的团队,与Virgin America仍有合作。

1469588973-9896-JlBrxTPKmJTO6b6R28WEBB2Dibfw

By: Work&Co

我们采访了Felipe Memoria,Work&Co的联合创始人,聊了会儿他们最受欢迎的项目之一。这个故事是关于如何通过协同设计,帮助推动Virgin America成功上市。

1469588971-1676-jb67viaIJUKtG16TVL1VblRMRDdg

持续:为极端场景而设计

在项目的全过程中,一个清晰的目标指导任何事情:卖出更多的票。

“在这个设计过程中,最棒的应该就是我们可以专注于最重要的一件事-不仅是从商业角度来看,还站在用户的角度来思考。”Felipe Memoria说,这个团队的联合创始人。

不是从边界场景和相关联的任务流程开始设计,Work&Co团队和Virgin  America一起工作,专注于一个核心的用例:旅客购买往返票。团队认为如果他们能够把握这个使用场景,那么就会打下不错的基础。

1469588970-3296-BrQ0UAFTMtLSb8wXWBEHKwn1MaKg

By: Virgin America

除此之外,与当时“移动优先”的设计运动相比,整个Virgin America项目决定采用“极端化优先”的方法。不是从最小的窗口,逐渐扩大到桌面上。整个团队从极端开始,同时设计移动端和桌面端,再逐渐向中间尺寸的界面去收敛。

Step 1:设置一个明确的目标

这个项目的目标是,让Virgin America从一个网站转化到一个数字平台,可以满足现代旅游的需求,并对这些行为做出回馈。基于对他们网站和收入的分析,Work&Co建议优先考虑优化预订体验,来提高转化率,留存率以及移动业务拓展。

“说实话,当你想到它的时候,机票预订流程就只是一个表单,”Memoria说。“所有我们开始创造一些不一样的东西-不仅是更好的表单,更是使用愉快的方式。从这个整体的角度来思考我们的项目,让我们很快就能够开始设计。”

Step 2:协作的概念

在整个过程中,项目被一个协作,多学科的方法界定。

Work&Co围绕这个概念来建立团队,每个人都有自己擅长的工作,但是也可以在团队中称为不同的角色。例如,有人可能是一位分析师,但是他也能称为一个很棒的项目经理。事实上,Work&Co没有客户经理,每个人都有多面的能力来适应项目以及客户的期望。

1469588974-6547-1euhqcR0jWdBByNgNFNxx9qBcM5A

By: Work&Co

整个的Virgin America项目中,共有三位产品策划,三位设计师,和四位开发者直接与Virgin America的C级成员合作。除了与直接客户接触外,团队还带来了其他重要的组成人员,例如法务和运营,加入到设计过程中来。这有助于确保想法可以被实现,并能获得成功。

概念设计阶段,完全投入在了解决一个核心场景:旅行往返预定。在两周的时间里,三位不同背景的设计师共同解决这一个问题。与典型项目的分工形成了对比。一位设计师,举个例子,如果是典型的UI设计师,会从网格和色彩方面来思考。而另一类则是新一代的混合设计师/开发者,能够构建原型。

“得到了更多的关于概念性思考,对我们的项目产生了巨大的影响,”Memoria说。“它给了我们一个更大的机会去设计的更好。没有理由去思考荒诞的用户场景-通过在主要体验上的测试和迭代,我们可以让想法更加纯粹。”

团队一天只会正式检查一次,有时会暂停设计来帮助解决障碍。整个团队实际上在Virgin America的一间会议室工作,Memoria把他的家从纽约搬到了旧金山的湾区,切身沉浸在用户的角色当中。

因为他们都是游客和Virgin America的顾客,他们能够很快速的从现有的用户研究中抽取出重要信息。他们在集体研究中注意到,预订航班是每个人都想要做的,所有他们能够确认团队正在解决正确的问题。

经过了两周的集中工作和合作设计,团队准备展示他们的设计策略。

Step 3:设计体系

在第一次的设计评审中,整个团队提出了两个粗糙的线框,一个是静态模型,一个是详细的原型。

在这一天的最后,Work&Co的设计师,开发者和客户一起围绕着设计,想着创建出最简单,最强大的体验。

顺畅的体验

让团队成员惊喜的是,他们的低保证原型抓住了他们工作的核心:单一平滑的整体流程,将购买和结算线性的整合起来。尽管线框图缺乏精度,但是它展示了流动的本质,围绕网站进行的流程本质。

Memoria补充道:“我们可以把我们的想法结合在一起,然后从一个大的观点推出我们从中发现的。“

情景的选择

通过专注于一个主要的任务流程,他们找到了可以让Virgin America成为独一无二的网站的方法。因为航班飞往的城市,没有巨大的,让人困惑的下拉菜单。相反,该网站还能使用地理定位提供适当的情境路线推荐(添加了一个选项来浏览所有城市)。

1469588975-5210-SmCTuU8At7GqicSB5DlNcpcichRQ

By: Work&Co

“一条黄金体验原则是,你公开的越多,用户更可能看到并点击。”Memoria说。“通过开放旅游选项在Virgin America上,我们可以迎来一个全新的响应式导航。我们能够改变一个漏斗流的样式,使它容易滚动,没有没完没了的按钮和刷新。”

一致,愉悦的色调

从视觉的角度来看,团队使用插画,而不是城市风光的照片,这个决定与Virgin的娱乐定位相符合。

例如:目的地代表了地图上的图标,而不是点。

1469588977-4906-H5vv9G2n2dKYia8M1qBKuo4FtcVA

By: Build

为了与轻松的视觉基调相匹配,团队精心打造的休闲提示文本会给用户反馈。

例如:当选择出发和到达日期,以下信息会覆盖在屏幕的顶部。

在选择出发日期之后

1469588975-6135-9adQjtGqYzOdfqYa78tiaNgn3Rgw

在选择返回日期之后

1469588977-9575-BrcGC9aKDA8lv8Wvsiawvmmtrf5A

跨越线下鸿沟

确保一致的用户体验,即使是在使用网站之后,这个团队还考虑了打印登机牌的体验。毕竟一个容易丢失或无法打印的登机牌,会摧毁了预期的网站体验。

基于对用户的研究(和自己的经历),团队精心设计了四象限登机牌,更适合放在口袋里,这个设计又创造出了一个新的打印登机牌标准。

1469588978-4857-QZtk5cz4XYAdch7NoniavYMF54UQ

By: Work&Co

易于理解的表单元素

提高整体的用户理解,团队遵循用户体验最佳实践组块的内容。

例如,为了提高界面的吸引力和易用性,团队设计了一个日历作为视图,减少了用户之后需要的输入流程。

1469588978-1093-RfYEWcAFKhrGcGTGgG8Jv6av8r2g

By: Work&Co

“我们从简单高效的ppt展示中获得灵感,”Memoria说。“每张幻灯片只展现出一个重点,使它更容易被理解,独立的每个部分使它更清晰,更容易被接受。”

最后,团队花了六周的迭代去完善预订流程,迭代到达一个有凝聚力的无需更多操作的体系。在这段时间里,在四个用户测试组共100人中,他们继续合作,编码测试原型。

Step 4:研发

可能团队面临的最大挑战就是背后的技术解决方案。考虑到这是第一个完全响应的航空网站在2014年,需要严谨和协作,才能让设计落地。

“如果没有研发人员在漫漫长路上的每一步,我们不可能创造出这个网站,”Memoria说。“因为从一开始,我们的技术团队久参与了进来,他们明白哪些需要去做并且实现。我们需要保证我们的产品可以适应每一个场景,而不是仅仅是主要的场景。努力是好的,一起工作,我们创造出了一个原始高效的响应式网站。”

就像在Forrester案例中阐述的,团队在每一个阶段进行了仔细的测试:

1.自己和一小部分公司外的朋友测试。

2.与一小部分忠实的用户进行测试。

3.与更多的用户,媒体,和有影响力的人物进行测试。

分阶段的测试计划,不仅有助于提供设计新动力,它还帮助团队适应边界场景和功能上的差异。

迭代后的新设计会根据测试版的内容进行调整,重塑后的Virgin America.com发布了。两个季度之后,Virgin America宣布IPO。

重新设计后的网站得到了以下的提升:

提高了10%以上的转化率。

减少了超过20%的与web相关的客服电话。

在两秒内,它仍然是加载最快的航空公司网站。

持续的黄金准则

网站最终成为了Virgin America项目的灵感来源,无论是线上还是线下,从时代广场的广告牌,到机场的外观和感觉。

这些年来,网站本身赢得了许多赞誉,UX设计类奖项,更重要的是,为团队带来了基础的ROI。

Work&Co项目实践了很多很棒的方法:

extremes-first方法,设计最大和最小的移动端和桌面端界面,让中间态可以流动。

一个团队密切关注合作,设计师,开发者,和真正的用户。

聚焦设计一个高价值的用户场景(单人座,往返票)。

本文译文作者:shu℃,IAMUE内容编辑

首发平台微信订阅号:IxDSchool

赞(0) 打赏
未经允许不得转载:IAMUE » [自译]UX案例学习- 世界的第一个做出响应式布局的航空公司网站

评论 抢沙发

评论前必须登录!

 

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏