「案例」👩🏻‍⚕️我们是如何设计 Oscar 2.0的

「案例」👩🏻‍⚕️我们是如何设计 Oscar 2.0的

八月底,国外互联网健康医疗产品 Oscar 进行了2.0改版升级。他们设计团队的产品设计师 Regy Perlera 对这次改版工作进行了一个记录。下面我们跟随他的文笔,来看看他和他的团队在进行改版工作时遇到了哪些事。

whose.design - 发现更多设计工具​www.whose.design

阅读信息:


2016秋,我结束了自己的第一次创业后加入了 Oscar,Oscar 公司的使命是将医疗保险与互联网连接,使之与时俱进。我的职责是从头开始,采用 React Native 技术框架,对移动端进行重新设计。

整个重构过程经历了大量的探索,原型制作,测试和开发。 最后,我们想出了一个可以让医疗保健更易理解,更易获取和更便捷的方案。

下面就讲讲我们是怎么想到这个方案的。


了解现况:

我一来到 Oscar,就在产品团队内部安排了一对一的沟通,以便更好地了解团队的成员和已上线的应用。

原来上个版本已经超过两年没有更新了。之前版本留了很多技术上和设计上的坑。我们的 iOS 应用是由1/3 Obj-C,1/3 Swift 和1/3 React Native 拼凑在一起的。

你可以在最右边看到我实际负责第一个项目——优化时间线。不幸的是,我们最后只是把它放在了老版的“医疗档案”里

在和所有人沟通完后,我开始在 Sketch 里整理 iOS 和 Android 应用的信息架构。我拼起来大概五十到六十张截屏。目的是为了更好的了解产品并发现矛盾。既然我们在用 React Native 重构两个平台的应用,盘点一下我们所有的 UI 组件并看看哪里存在尺寸差异还是很有帮助的。

我发现的第一件事就是 Oscar 的品牌已经更新了,而移动端看着和我们的网站、宣传物料风格不一致。我们希望重新设计后的移动端看上去和品牌风格一致。

幸运的是,我可以与品牌部门的同事一起合作。大赞 Maxwell,Emili 和整个输出团队。你所看到的那些让人赞叹的的,贯穿应用的品牌元素,都是我和这些同事合作的产物,这些元素给新应用带来了生命力。


设定目标:

既然规划了远景,我们开始罗列用户路径并为这次重构设定了目标的范围。我们希望用户可以更容易的找到医保方案,更容易的和医生交流,能够在一个场景里找到所有医疗相关的资料。

我们也想让例如顾问沟通、预约等没被充分使用的功能得到用户光顾。于是我们采用更大的字号和更高对比度的深色文本提高可读性,从而提高易用性。

优化后的移动端信息架构

还有一个任务,我们需要重新考虑应用的信息结构以添加新的功能。我们有一些超棒的功能会来年上线,它们需要更多的空间来容纳。


相信过程:

在设定好用户路径并列出了目标以后, Adam Karnas 和我开始安排一些内部访谈。我们和 Oscar 产品团队的每个人沟通,以了解现在版本中对于会员来说,痛点在哪。我们也采用了在线问卷和售后反馈卡来收集会员的反馈。

整理了这些反馈后,Adam 和我撰写了一份列出了项目目标,资方意见,用户故事和关键数据的设计简报。我们和开发团队一起检查了它并确保我们列出的所有目标都在范围内,并能在 V1 实现。

过程,过程,过程。

我们设计了三个不同的方案用于测试。方案 A 中的界面基于地点和可用的服务会做动态改变,方案 B 中可以在首页看到所有的核心功能,方案 C 中则由我们引导用户按照我们的期望行动。

我们最先用来做用户测试的原型(从左到右依次为方案 A,B 和 C)

接下来,我们从 Oscar 会员中选了一些人做首轮用户测试。我们展示了三种原型,并在一个小时的测试中收集反馈。所有访问都被记录并形成文档,我们可以回看他们的行为和反应。

右下方穿着 Pablo 兜帽衫的人就是我。

参与的会员中有一些人并不是百分百相信我们给他们看的设计。还有一些给了我们有价值的反馈并为我们加油。也有些会员对应用非常熟悉,还有一部分人则基本上没有用过我们的应用。

处理了第一轮测试中收集到的反馈后,我们很快意识到方案 B 是最棒的。然后我们开始从头设计方案 B,精细化一些交互上的细节,导航模式,以及原型的视觉设计,确保所有的东西在 iOS 和 Android 上运行起来一样一致。


欢迎回家:

我们希望在主页强调的三件事:找到保险,和医生交谈,和顾问交谈。背景建筑插画会根据你所在的城市改变。


「保险」就在你的指尖:

这次重新设计的一大主题就是可用性。我们希望会员了解我们的服务并能从我们免费提供的服务中获益。


提升远程诊断体验:

和医生或顾问交流是我们的两大功能。我们希望创造一种更加私人的体验并使得和医生交流没那么可怕。


定点存放医疗信息:

健康保险是极其复杂的,,于是我们为会员提取最重要的医疗信息,呈现在界面上。你的医疗保险计划,测验结果,医药处方以及看病记录一览无余。


提升登陆体验:

用户教育是我们产品中很重要的一块。我们希望教会会员如何享用我们的新服务和包含其中的好处。


愉悦的体验:

上传计步数是我们产品中最常用的功能之一。所以我们决定在会员达到当日目标后给予奖励。


会员附件上传:

这是我们在重构中从头搭建的另一个功能。这个功能使会员可以在和他们的顾问交流时上传相关的图像或文件作为佐证。这让我们更好的理解您的诉求。


战果:

我们上周上线了新版本的应用并且仔细追踪了会员的行为。这里有之前7到10天的用户数据。很高兴能提取数据并基于这些数据做一些设计决策。


项目心得:

作为一个团队,我们在这次重设计过程中学到了很多,也在设计到开发落地的过程中得到了很好的练习。我分享几个项目心得:

  • 要防止认知过载。会员们更乐意在参与整个流程时的每一步都不用面对太多的选项。不要动不动用一大堆选项吓跑你的用户。
  • 文案很重要。例如「健康调研」这样的标准行业术语对用户来讲并不好理解。可以的话,最好用说明性的相关语言代替。
  • 把相关信息打包。在一个标签里放置与其相关的医疗保险计划可以让会员更容易,更清楚地访问。
  • 定制化很重要。会员对用真实照片做头像的顾问和地理定位相关的背景插画反馈很好。
  • React Native 再棒不过了。虽然稍稍多花了一些时间用 React Native 重构整个应用,但开发者得到了更多的时间来开发新功能,而不是填之前代码拼凑版本的老坑。


未来的计划:

在接下来的日子里,我们团队将继续投入到升级更新的战斗中。开发让会员在一个地方存下喜欢的医生,诊所以及医疗顾问的功能。我们所做的一切都是为了让会员能够基于更多的信息来决定什么时候看医生,看哪个医生。

我们也开始用 React Native 系统化 UI 的组件。这使我们可以快速迭代,减少开发时间,并保证设计的一致性。

看,风正一帆悬。



whose.design - 发现更多设计工具​www.whose.design

文章总结

校对了好几遍,还是有一些不通顺,总感觉写文章的哥们不是 native,表达怪怪的。大家将就看吧,有建议跟我说。

其他文章

感谢阅读

编辑于 2019-02-18

文章被以下专栏收录