「譯」???????我們是如何設計 Oscar 2.0的

八月底，國外互聯網健康醫療產品 Oscar 進行了2.0改版升級。他們設計團隊的產品設計師 Regy Perlera 對這次改版工作進行了一個記錄。下面我們跟隨他的文筆，來看看他和他的團隊在進行改版工作時遇到了哪些事。

??閱讀信息：

• 閱讀時間：約10分鐘
• 作者信息：Regy Perlera
• 原文地址：Medium
• 其他譯文：Swarm 改版 | Do & Don』t | YouTube 換 logo | Uber 商務 | iPhone X HIG

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 的組件。這使我們可以快速迭代，減少開發時間，並保證設計的一致性。

看，風正一帆懸。

??文章總結：

校對了好幾遍，還是有一些不通順，總感覺寫文章的哥們不是 native，表達怪怪的。大家將就看吧，有建議跟我說。

??擴展閱讀：

• Sketch 插件：CRAFT | Sketch Material | WeSketch | Runner
• Sketch 教程：Library | 換色文字 symbol | Symbol 嵌套 | 字體樣式庫
• Graffle 教程：繪製流程圖 | 搭建文檔 | 繪製表格

??素材分享：

放一組收集的 iPhone X mockup 給大家，請勿商用。

??感謝閱讀：

我是 Teambition 的交互設計師徐小馬（微信：heiheilaugh），歡迎交流。