設(shè)計(jì)師如何做改版練習(xí)才是有效的？來看這個(gè)案例！

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

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

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

一、項(xiàng)目介紹

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

△ Foursquare APP 改變了用戶旅行的體驗(yàn)

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

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

二、問題與假設(shè)

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

△?Foursquare的桌面端

我研究了指導(dǎo) Foursquare 的設(shè)計(jì)理念，他們建議用戶列出最喜歡的景點(diǎn)，計(jì)劃一次旅行并保存想去的地方。我相信他們的目標(biāo)和我的假設(shè)是一致的。

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

三、用戶畫像

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

四、故事板

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

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

△?場(chǎng)景

五、小范圍可用性測(cè)試

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

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

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

在我讓他們做任務(wù)之前，我讓他們想象他們正計(jì)劃前往一個(gè)新的目的地（城市或國家）。

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

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

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

△?關(guān)聯(lián)映射

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

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

我測(cè)試的每個(gè)人都無法在他們當(dāng)前位置之外找到一個(gè)旅游目的地。搜索是最重要的，因?yàn)槿绻掠脩舨荒艿玫剿麄兿胍慕Y(jié)果，他們可能就不再用了。

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

照片也是一個(gè)痛點(diǎn)，用戶說他們?cè)跊Q定旅行前希望看到一些關(guān)于目的地的高質(zhì)量照片。這說明在照片功能上有改進(jìn)的機(jī)會(huì)。

七、任務(wù)流程

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

八、設(shè)計(jì)決策

1. UI 草圖

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

2. 原型設(shè)計(jì)并驗(yàn)證

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

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

主頁

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

△?主頁

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

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

搜索流程

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

△?搜索區(qū)域

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

△?建議查詢位置

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

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

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

△?搜索結(jié)果

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

詳情頁面

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

△?詳情頁面

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

九、改善用戶旅程

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

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

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

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

歡迎關(guān)注譯者的微信公眾號(hào)：「?彩云譯設(shè)計(jì)」

「改版設(shè)計(jì)方法及實(shí)戰(zhàn)案例」

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

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

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

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