經(jīng)常聽到有人說，自己剛做設計，又身在小公司，不懂得正確的設計流程，也接觸不到大公司設計的迭代過程，總覺得自己設計流程不規(guī)范。偶爾有幸與大神聊設計，得到的答案多半也是多看多想多做之類的話，雖然是這個理，但是我覺得還不如來一次實戰(zhàn)案例展示更為有效。

為此，我找了這篇文章，文章是出自日本的一位美女設計大神之手（日本產(chǎn)品設計師，擅長 UI 和品牌設計，個人鏈接：https://medium.com/@haiji505），詳細的介紹了她是如何對一款應用進行改版的。相信讀完此文，會對設計改版有一個全新的認識。

本文主要講了對一款旅行應用 Foursquare 的改版迭代過程，流程非常完整，最大的感觸就是作者全程都是在與用戶進行溝通交流，結(jié)合自己的思路進行設計驗證，這一點非常值得學習。

一、項目介紹

在旅行前探索你的目的地城市。

△ Foursquare APP 改變了用戶旅行的體驗

我喜歡用 Foursquare 這款應用，自從我住在東京后就開始使用它了。搬到舊金山后，我對自己可以繼續(xù)無縫地使用它印象深刻。它幫助我發(fā)現(xiàn)世界上任何一個新的地方。去年夏天，我還計劃使用 Foursquare 幫助我去波特蘭旅行，但是我在使用 APP 時發(fā)現(xiàn)了一個問題。

因此，我著手探索可幫助用戶規(guī)劃出行并吸引新用戶的功能增強和改進。

二、問題與假設

去年，我嘗試使用 Foursquare 的桌面端和移動端一起計劃一次旅行。我注意到，在桌面端搜索周邊旅游景點很容易，但是在使用移動端時，找更遠的旅游目的地時要困難的多。我真的很喜歡使用 Foursquare，所以我想找到一種讓移動端更容易使用的方法。要做到這一點，其中一個方法是為用戶創(chuàng)建一種方式來為潛在的旅游目的地添加書簽，這樣他們在使用移動端時就更容易導航了。

△?Foursquare的桌面端

我研究了指導 Foursquare 的設計理念，他們建議用戶列出最喜歡的景點，計劃一次旅行并保存想去的地方。我相信他們的目標和我的假設是一致的。

△?在 App Store?中Foursquare 的應用截圖—?iTunes (2017年11月)

三、用戶畫像

首先，我創(chuàng)建了一個基于在線研究中的潛在用戶和身邊在使用這款應用的朋友們的用戶畫像。既然 Foursquare 是關于發(fā)現(xiàn)新地方的，我認為目標用戶應該是一個好奇和愛冒險的人。

四、故事板

我使用 Jobs To Be Done（譯者注：待完成之工作, 更多詳細介紹請參考：https://jtbd.info/2-what-is-jobs-to-be-done-jtbd-796b82081cca，這里就不擴展討論了）框架和場景創(chuàng)建了以下故事內(nèi)容。

△ 故事內(nèi)容（圖片譯文：當我想到下一個假期去旅游時，如果我能夠知道在某個城市或國家哪里可以找到一個美麗的地方，那么我就可以決定我的旅游目的地了。）

△?場景

五、小范圍可用性測試

△?在舊金山 Yerba Buena 花園里做用戶測試

根據(jù)我的故事內(nèi)容和場景，我進行了小范圍可用性測試來驗證我的假設。

我在公園里找到了7個人，在開始測試之前，我詢問了一些基本的問題。

在我讓他們做任務之前，我讓他們想象他們正計劃前往一個新的目的地（城市或國家）。

這七位用戶被要求在 iPhone 上完成以下任務：

• 如果你想找一個你想去旅游的地方，你會怎么做？
• 假設你找到了一個你喜歡的地方，你怎么去看看那個地方？
• 你對那個地方很感興趣，你決定去那里旅游，接下來你會做什么？

六、發(fā)現(xiàn)痛點并確定優(yōu)先級

△?關聯(lián)映射

△?2 x 2優(yōu)先級矩陣

我回顧了用戶訪談，并將每位用戶的痛點寫在了便簽上。 然后我用關聯(lián)映射對痛點進行分類，并用2x2 優(yōu)先級矩陣對它們進行優(yōu)先級排序。

我測試的每個人都無法在他們當前位置之外找到一個旅游目的地。搜索是最重要的，因為如果新用戶不能得到他們想要的結(jié)果，他們可能就不再用了。

搜索功能是很多痛點的根源，所以我決定把重點放在搜索功能上。

照片也是一個痛點，用戶說他們在決定旅行前希望看到一些關于目的地的高質(zhì)量照片。這說明在照片功能上有改進的機會。

七、任務流程

用戶評論頁面對于 Foursquare 來說很重要，但大多數(shù)受訪者在尋找目的地之外的旅游目的地時，并沒有到達評論頁面。

八、設計決策

1. UI 草圖

在設計我的初步解決方案并創(chuàng)建高保真原型之前，我畫了一些草圖來探索最佳的解決方法。

2. 原型設計并驗證

我使用 Sketch 和 Marvel 來創(chuàng)建高保真原型，并召集了5名新用戶參與測試。

以下是我在用戶測試中使用的原型和測試結(jié)果。

主頁

Foursquare 確實有助于在當前位置附近找到推薦地點，但在旅行之前找到旅行目的地并不容易。參與者想通過 Foursquare 了解一個推薦的目的地。 我修改了主頁，以解決尋找旅游目的地的問題。

△?主頁

• 根據(jù)用戶的當前位置，我將主頁首圖更改為城市照片。
• 由于用戶想要找到迷人的目的地，我添加了特色城市功能。
• Foursquare 在「列表」菜單中提供了專題列表，但新用戶沒有注意到「列表」菜單。 所以我將現(xiàn)場列表移到了主頁，以便讓更多用戶使用該功能。
• 我把標簽名「搜索」改為「探索」。「探索」在字面上的意思是指發(fā)現(xiàn)一個新的地方，在首頁上它會比「搜索」更讓人興奮。（譯者注：功能文案，這個細節(jié)很多人經(jīng)常會遺漏）

結(jié)果：5個人中有4人瀏覽了主頁并點擊了特色目的地。

搜索流程

在旅行之前尋找目的地是研究參與者的主要痛點。 我回顧了搜索流程和修改后的 UI 設計， 參與者的主要問題是在一座城市中找到目的地。 當參與者在搜索欄中輸入城市名稱時，他們會顯示一個包含你輸入的城市名稱的當?shù)厣倘ΑＮ业慕鉀Q方案是，當用戶輸入一個城市名稱，推薦結(jié)果出現(xiàn)一個只有該城市名稱的位置（譯者注：城市總覽入口）。

△?搜索區(qū)域

結(jié)果：每個人都注意到位置輸入?yún)^(qū)。

△?建議查詢位置

結(jié)果：5個人中有2人選擇了建議的城市。

△?建議使用城市名稱的位置搜索

結(jié)果：5人中有3人將城市名稱輸入主文本字段，然后點擊「東京」按鈕。

△?搜索結(jié)果

結(jié)果：5人中有3人對類別按鈕感興趣。

詳情頁面

習慣了 iPhone 的人無法找到共享和書簽按鈕，iPhone 用戶不熟悉 Android 上使用的浮動操作按鈕，他們沒有想到在浮動操作按鈕中會有「添加到列表」功能。我將分享按鈕和「添加到列表」功能移動到標題欄顯示。

△?詳情頁面

結(jié)果：每個人都感覺點擊「添加到列表」按鈕變得更容易了。

九、改善用戶旅程

總的來說，參與者都喜歡在應用中探索新的目的地，而不是在他們家城市周邊探索。

目前的 Foursquare APP 很有幫助，但缺乏用戶需要和期望從 Foursquare 獲得的某些功能。 同時，他們也面臨著與越來越多的本地搜索平臺（如 Facebook Local，Yelp 和其他具有更全面功能的平臺）競爭。 Foursquare 的用戶希望發(fā)現(xiàn)新的地方， 然而，當?shù)厮阉魇袌龈偁幖ち摇?Foursquare 可以通過成為人們發(fā)現(xiàn)新地點的應用來擴大用戶群，增加現(xiàn)有用戶的滿意指數(shù)，無論要搜索的是在哪個地點。

作為 Foursquare 的忠實粉絲，我不論何時何地都想用到它，我相信后續(xù)它也能給我推薦一些很棒的地方！

原文鏈接：https://medium.com/haiiro-io/foursquare-a-ux-case-study-f606d4757d9b Namika Hamasaki (Haiji)

歡迎關注譯者的微信公眾號：「?彩云譯設計」

「改版設計方法及實戰(zhàn)案例」

• 《如何找到改版的切入點？我用「品牌探索」這個方法！》
• 《想做APP 改版練習，這兒有高手的15個經(jīng)驗總結(jié)》
• 《上億人使用的唱吧APP V8.6 改版設計過程揭秘》
• 《上億人使用的百度貼吧，是這么做設計改版的！》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內(nèi)人氣最高的設計網(wǎng)址導航，設計師必備： http://hao.uisdc.com