原文链接：UX Case Study: The World’s First Responsive Airline Website
原文作者：Jerry Cao
响应式设计是当前网页设计的行业标准。但它并不是一直如此。
现在，让我们快速的穿越时间，回溯到2014年，我们将深入了解世界上第一个响应式航空网页的设计和推出。你将会看到，在过去的两年中最具有影响力的网站项目的每个细节和决策。
Virgin America选择了和Work&Co作为合作伙伴，当时还是一家不足十余人的初创团队，合作的结果怎么样呢？
网站被选中并得到了丰厚的奖励，而且Work&Co迎来了爆炸性的增长，现在发展成为了超过100人的团队，与Virgin America仍有合作。
By: Work&Co
我们采访了Felipe Memoria，Work&Co的联合创始人，聊了会儿他们最受欢迎的项目之一。这个故事是关于如何通过协同设计，帮助推动Virgin America成功上市。
持续：为极端场景而设计
在项目的全过程中，一个清晰的目标指导任何事情：卖出更多的票。
“在这个设计过程中，最棒的应该就是我们可以专注于最重要的一件事－不仅是从商业角度来看，还站在用户的角度来思考。”Felipe Memoria说，这个团队的联合创始人。
不是从边界场景和相关联的任务流程开始设计，Work&Co团队和Virgin America一起工作，专注于一个核心的用例：旅客购买往返票。团队认为如果他们能够把握这个使用场景，那么就会打下不错的基础。
By: Virgin America
除此之外，与当时“移动优先”的设计运动相比，整个Virgin America项目决定采用“极端化优先”的方法。不是从最小的窗口，逐渐扩大到桌面上。整个团队从极端开始，同时设计移动端和桌面端，再逐渐向中间尺寸的界面去收敛。
Step 1:设置一个明确的目标
这个项目的目标是，让Virgin America从一个网站转化到一个数字平台，可以满足现代旅游的需求，并对这些行为做出回馈。基于对他们网站和收入的分析，Work&Co建议优先考虑优化预订体验，来提高转化率，留存率以及移动业务拓展。
“说实话，当你想到它的时候，机票预订流程就只是一个表单，”Memoria说。“所有我们开始创造一些不一样的东西－不仅是更好的表单，更是使用愉快的方式。从这个整体的角度来思考我们的项目，让我们很快就能够开始设计。”
Step 2:协作的概念
在整个过程中，项目被一个协作，多学科的方法界定。
Work&Co围绕这个概念来建立团队，每个人都有自己擅长的工作，但是也可以在团队中称为不同的角色。例如，有人可能是一位分析师，但是他也能称为一个很棒的项目经理。事实上，Work&Co没有客户经理，每个人都有多面的能力来适应项目以及客户的期望。
By: Work&Co
整个的Virgin America项目中，共有三位产品策划，三位设计师，和四位开发者直接与Virgin America的C级成员合作。除了与直接客户接触外，团队还带来了其他重要的组成人员，例如法务和运营，加入到设计过程中来。这有助于确保想法可以被实现，并能获得成功。
概念设计阶段，完全投入在了解决一个核心场景：旅行往返预定。在两周的时间里，三位不同背景的设计师共同解决这一个问题。与典型项目的分工形成了对比。一位设计师，举个例子，如果是典型的UI设计师，会从网格和色彩方面来思考。而另一类则是新一代的混合设计师／开发者，能够构建原型。
“得到了更多的关于概念性思考，对我们的项目产生了巨大的影响，”Memoria说。“它给了我们一个更大的机会去设计的更好。没有理由去思考荒诞的用户场景－通过在主要体验上的测试和迭代，我们可以让想法更加纯粹。”
团队一天只会正式检查一次，有时会暂停设计来帮助解决障碍。整个团队实际上在Virgin America的一间会议室工作，Memoria把他的家从纽约搬到了旧金山的湾区，切身沉浸在用户的角色当中。
因为他们都是游客和Virgin America的顾客，他们能够很快速的从现有的用户研究中抽取出重要信息。他们在集体研究中注意到，预订航班是每个人都想要做的，所有他们能够确认团队正在解决正确的问题。
经过了两周的集中工作和合作设计，团队准备展示他们的设计策略。
Step 3:设计体系
在第一次的设计评审中，整个团队提出了两个粗糙的线框，一个是静态模型，一个是详细的原型。
在这一天的最后，Work&Co的设计师，开发者和客户一起围绕着设计，想着创建出最简单，最强大的体验。
顺畅的体验
让团队成员惊喜的是，他们的低保证原型抓住了他们工作的核心：单一平滑的整体流程，将购买和结算线性的整合起来。尽管线框图缺乏精度，但是它展示了流动的本质，围绕网站进行的流程本质。
Memoria补充道：“我们可以把我们的想法结合在一起，然后从一个大的观点推出我们从中发现的。“
情景的选择
通过专注于一个主要的任务流程，他们找到了可以让Virgin America成为独一无二的网站的方法。因为航班飞往的城市，没有巨大的，让人困惑的下拉菜单。相反，该网站还能使用地理定位提供适当的情境路线推荐（添加了一个选项来浏览所有城市）。
By: Work&Co
“一条黄金体验原则是，你公开的越多，用户更可能看到并点击。”Memoria说。“通过开放旅游选项在Virgin America上，我们可以迎来一个全新的响应式导航。我们能够改变一个漏斗流的样式，使它容易滚动，没有没完没了的按钮和刷新。”
一致，愉悦的色调
从视觉的角度来看，团队使用插画，而不是城市风光的照片，这个决定与Virgin的娱乐定位相符合。
例如：目的地代表了地图上的图标，而不是点。
By: Build
为了与轻松的视觉基调相匹配，团队精心打造的休闲提示文本会给用户反馈。
例如：当选择出发和到达日期，以下信息会覆盖在屏幕的顶部。
在选择出发日期之后
在选择返回日期之后
跨越线下鸿沟
确保一致的用户体验，即使是在使用网站之后，这个团队还考虑了打印登机牌的体验。毕竟一个容易丢失或无法打印的登机牌，会摧毁了预期的网站体验。
基于对用户的研究（和自己的经历），团队精心设计了四象限登机牌，更适合放在口袋里，这个设计又创造出了一个新的打印登机牌标准。
By: Work&Co
易于理解的表单元素
提高整体的用户理解，团队遵循用户体验最佳实践组块的内容。
例如，为了提高界面的吸引力和易用性，团队设计了一个日历作为视图，减少了用户之后需要的输入流程。
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
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/16618/
