本期譯文，是一篇 App 改版干貨，有具體步驟，方法，分析，最后還有結(jié)論，值得學(xué)習(xí)。

我熱愛旅行，就和千千萬萬踏上旅行的人一樣。多一份獨(dú)處異鄉(xiāng)的體驗(yàn)，試一次全新的生活場景，旅行所帶來的這種感覺無可替代。

作為一個(gè)設(shè)計(jì)師，上個(gè)月我給自己分配了一個(gè)任務(wù)：復(fù)盤 Passpod App 的重設(shè)計(jì)。為旅客提供更靈活、高效的預(yù)定服務(wù)。

Passpod 是一個(gè)在線旅游 APP，2017 年在印度尼西亞上線，它可以實(shí)時(shí)查看世界各地景點(diǎn)門票價(jià)格，并支持在線預(yù)訂。

重設(shè)計(jì)旅行APP

在 Passpod 公司，我爭取到了重設(shè)計(jì)的機(jī)會(huì)，并且是連同開發(fā)、設(shè)計(jì)師小伙伴一起進(jìn)行。

• 我的角色：產(chǎn)品&設(shè)計(jì)的負(fù)責(zé)人
• 任務(wù)：研究，設(shè)計(jì)和改進(jìn)目前的 app
• 時(shí)間：2018.07-2018.08

我在 LEMERS 平臺(tái)做了 Passpod 和競品 Klook 的用戶體驗(yàn)調(diào)研，嘗試對(duì)比兩者之間的差異。邀請(qǐng)了3位測試者做了這項(xiàng)調(diào)研。 

△ 使用LEMERS評(píng)估可用性

從分析中看出，Passpod 需要改進(jìn)的方面有很多。

理解問題所在

問題：用戶在操作中感到困惑，不知該如何進(jìn)行下一步從而受到挫折。

用戶一般在 Passpod 上租借 Mi-Fi(譯者注：Mi-Fi 是能夠提供 wifi 的設(shè)備，即隨身wifi)和預(yù)訂節(jié)日活動(dòng)的門票。APP 的功能模塊組織性很好，這一點(diǎn)是在用戶瀏覽時(shí)發(fā)現(xiàn)的。

盡管如此，仍有 60% 的用戶在租借 Mi-Fi 和活動(dòng)預(yù)訂的確認(rèn)頁面中，選擇了退出。

原設(shè)計(jì)：Mi-Fi租借(左)和活動(dòng)預(yù)訂(右)

用戶一直在吐槽，租借Mi-Fi的表單步驟太多，效率很低;

在活動(dòng)預(yù)訂頁面，由于內(nèi)容的樣式設(shè)計(jì)沒有做好優(yōu)先級(jí)，用戶很難發(fā)現(xiàn)關(guān)鍵信息。

理解我們的用戶

如果想要深入問題，那么不妨聽聽用戶說了什么?

我們團(tuán)隊(duì)內(nèi)部回顧了租借和預(yù)訂的流程，同時(shí)收集了用戶反饋的信息，對(duì)其進(jìn)行了迭代。

1. 總結(jié)發(fā)現(xiàn)

搜索框和主頁的 banner 圖讓人困惑，搜索框看起來像一個(gè)按鈕，banner 圖又仿佛是靜態(tài)的圖片。

圖標(biāo)的指示性不強(qiáng)，不容易理解其含義，比如導(dǎo)航欄和活動(dòng)頁面。

Mi-Fi 租借是一個(gè)高頻行為，然而表單填寫步驟過于繁瑣。

用戶想要一次提交多個(gè)預(yù)訂訂單，但是目前并不支持。

2. 注意用戶的評(píng)論

界面設(shè)計(jì)看起來過時(shí)了，特別是主頁，一點(diǎn)都不好用。

活動(dòng)預(yù)訂頁面信息量太大了，我根本看不懂。

洞察和分析：用戶想要一種體驗(yàn)，一種訂票很簡單的體驗(yàn)。

高效的活動(dòng)預(yù)訂和 Mi-Fi 租借;

更直觀的圖標(biāo)，可以清晰地表達(dá)出其代表的功能;

具有現(xiàn)代感且更令人舒服的設(shè)計(jì)。

3. 解決方案

Passpod 在功能設(shè)計(jì)方面，是一個(gè)足夠好的產(chǎn)品，但是在功能的具體展現(xiàn)上出了問題。

復(fù)雜的租借和預(yù)訂流程，使得用戶不能高效地借助 app 滿足自己的需求，同時(shí)圖標(biāo)直觀性不足也削弱了 app 的易用性。

4. 解決用戶的問題

確保預(yù)訂流程高效，清晰和容易記憶;

改進(jìn)用戶界面，確保用戶可以聚焦和獲取關(guān)鍵信息;

最后，使用新的交互方式，可以讓用戶輕松地就完成租借和預(yù)訂。

繪制用戶體驗(yàn)地圖

1. 用戶的任務(wù)流程 

2. 線框圖

根據(jù)解決方案和用戶地圖，在設(shè)計(jì)高保真原型前，先在紙上繪制低保真的線框圖做驗(yàn)證。 

3. 可用性測試

我們?cè)诤献鞯挠《饶嵛鱽喌拇髮W(xué)校園進(jìn)行了可用性測試，測試的好處：確保我們聚焦于設(shè)計(jì)一個(gè)用戶喜愛的產(chǎn)品，并且給了團(tuán)隊(duì)信心去進(jìn)行技術(shù)迭代。 

[[271564]]

對(duì)于這次的用戶測試，我準(zhǔn)備了測試文檔，詳細(xì)說明了測試目標(biāo)，測試原則和測試用例，可以指導(dǎo)團(tuán)隊(duì)完成整場測試。

最終成果

打造一個(gè)全新的用戶體驗(yàn)。

經(jīng)過幾周的用戶研究和迭代，目標(biāo)是解決發(fā)現(xiàn)的問題，我們最終產(chǎn)出了一個(gè)優(yōu)化設(shè)計(jì)方案。接下來講講我們基于可用性測試做的優(yōu)化，我非常樂意向大家分享這一部分。

1. 主頁重設(shè)計(jì)

• 首頁的搜索框和推廣海報(bào)變得更明顯，也對(duì)用戶更有意義;
• 導(dǎo)航欄的圖標(biāo)使用用戶熟悉的圖標(biāo)替代，也就是 app 內(nèi)的高頻操作的圖標(biāo)──這里首要考慮易用性;
• 主頁新增 Mi-Fi 租借，活動(dòng)預(yù)訂和旅行計(jì)劃(新功能)。

2. Mi-Fi租借重設(shè)計(jì)

• Mi-Fi 租借頁面刪除了一半的無效信息，確認(rèn)操作變得簡單，用戶可以在確認(rèn)前快速檢查;
• 支付頁面設(shè)計(jì)和平臺(tái)保持一致，保證交互的記憶性。

3. 活動(dòng)預(yù)訂重設(shè)計(jì)

• 活動(dòng)信息簡潔清晰，使得用戶易于瀏覽，圖標(biāo)變得容易讓用戶理解。
• 頁面底部有價(jià)格，評(píng)論，加入購物車和預(yù)訂。價(jià)格和評(píng)論是用戶決策的重大影響因素──及時(shí)預(yù)訂的動(dòng)機(jī)。
• 增加評(píng)論功能，用戶可以查看和編輯評(píng)論，建立景點(diǎn)活動(dòng)的信用體系。
• 增加加入購物車功能，用戶可以一次提交多個(gè)預(yù)訂訂單。

最終成果&注意事項(xiàng)

一個(gè)成功重設(shè)計(jì)的收獲：

1. 訪問量提升 98.6%;
2. 跳出率減少 17%;
3. 無障礙使用(易用性)提升了 97.5%;
4. 交互度增加 4698.6%(譯者注：交互度的原文為「engagement」，參考http://www.chinawebanalytics.cn/key-metrics-8-engagement/);
5. app 下載率提升 59.6%;
6. 交易額增加 49.9%;
7. 一個(gè)簡單，令人愉悅的體驗(yàn)。

這是我們?cè)跍y試時(shí)統(tǒng)計(jì)到的數(shù)據(jù)?？偠灾?，用戶喜歡體驗(yàn)重設(shè)計(jì)后的 Passpod。

看看用戶說了什么：

• 界面非常簡單，看起來很容易能租到 Mi-Fi。明確顯示支付金額，而且可以選擇支付方式。──UMY 的 18 歲大學(xué)生

我的學(xué)習(xí)點(diǎn)

1. 重設(shè)計(jì)過程，需要平衡商業(yè)利益和用戶體驗(yàn)。為了說服利益相關(guān)者，我進(jìn)行了 A/B 測試，使用數(shù)據(jù)來做決策，UX 平衡亦然;
2. 我從開發(fā)小伙伴身上學(xué)會(huì)了高效的溝通方式：確定工作的重要性和優(yōu)先級(jí);
3. 最后，管理一群有才華的人，意味著需要和大家共享你的思路并善于討論，這樣可以確保每個(gè)成員的目標(biāo)一致，并能積極地為團(tuán)隊(duì)做貢獻(xiàn)。

要理解你的用戶，而不是單純做好技術(shù)。

在這個(gè)過程中，我不斷嘗試去復(fù)盤自己的思路和追問更深層次的問題，那就是關(guān)于理解用戶和理解技術(shù)。這次重設(shè)計(jì)經(jīng)歷讓我獲益良多，很開心和榮幸的擔(dān)任產(chǎn)品負(fù)責(zé)人和設(shè)計(jì)師。