案例研究|一款為你帶來(lái)難忘體驗(yàn)的美食 APP
導(dǎo)語(yǔ):民以食為天,美食是人類永恒的追求。在信息爆炸的時(shí)代,人們可以迅速收集到海量美食信息,卻總會(huì)因?yàn)榭谖兜牟町悺⑿畔⒌目煽啃?、評(píng)論者的可信度等因素,得不到滿意的美食推薦。針對(duì)這些問(wèn)題,作者設(shè)計(jì)出一款能夠?yàn)槟銕?lái)難忘體驗(yàn)的美食 APP —— Elok。從問(wèn)題闡述、解決方案、設(shè)計(jì)過(guò)程和結(jié)論四方面,作者詳細(xì)描述了 Elok 誕生的全過(guò)程,包括共情、定義、概念、原型、可用性測(cè)試五大設(shè)計(jì)過(guò)程。一起來(lái)學(xué)習(xí)這一完整的產(chǎn)品流程吧~
問(wèn)題闡述:
美食愛(ài)好者們總是很難找到他們認(rèn)為美味的食物,尤其是當(dāng)他們想在家鄉(xiāng)嘗到新菜或典型的地方菜時(shí)。面對(duì)每個(gè)人的不同口味以及美食的不同味道,“美食愛(ài)好者” 在選擇推薦菜時(shí)可能會(huì)感到沮喪。
如果你想與家人或朋友聚餐,但不想花時(shí)間從網(wǎng)絡(luò)評(píng)論中的過(guò)時(shí)信息里尋找美食,那沮喪的心情就更不用說(shuō)了。即使你找到了美食,也很難將你的經(jīng)歷分享給那些與你有著相似口味的朋友,讓他們了解到這家餐館是多么的方便。同樣的,想得到他們的推薦也并非易事。
解決方案:
要提出良好的解決方案,首先需要明確的一點(diǎn)是,美食愛(ài)好者們正在尋找一些可供選擇的地方。
在了解了他們之間的獨(dú)特行為后,我設(shè)計(jì)了一個(gè) APP,這個(gè) APP 不僅能夠解決以上問(wèn)題,而且還是一個(gè)可供美食愛(ài)好者們進(jìn)行交流的社交平臺(tái)。
Elok,這個(gè)單詞結(jié)合了英語(yǔ)中的 “Eat” 和印度尼西亞語(yǔ)中的 “LOKal”(本地);該 APP 可供用戶與朋友們探討各地美食,分享經(jīng)驗(yàn),交換建議,甚至為美食計(jì)劃設(shè)定預(yù)算。
設(shè)計(jì)過(guò)程:
為確保移動(dòng) APP 能夠滿足目標(biāo)用戶的需求,我決定創(chuàng)建一個(gè)好的用戶體驗(yàn)策略,并在今后的案例研究中使用它。
一、共情
1. 用戶訪談
我決定對(duì)用戶進(jìn)行訪談,并分析他們的不同觀點(diǎn),根據(jù)諾曼·尼爾森集團(tuán)的定義,我選擇了 5 個(gè)人。
在這一階段,我需要更多地了解用戶喜歡什么地方,以及他們?cè)谶x擇用餐地點(diǎn)時(shí)如何面對(duì)問(wèn)題;我采用了 “5why 分析法”,通過(guò)不斷問(wèn) “為什么”,收集到的信息讓我不斷接近問(wèn)題的根源。
我問(wèn)的問(wèn)題包括:
- 你現(xiàn)在是怎么吃到這道菜的?
- 你一般花多少時(shí)間來(lái)選擇品嘗何種美食?
- 你還嘗試過(guò)哪些在線點(diǎn)評(píng)平臺(tái)?
- 關(guān)于上述在線點(diǎn)評(píng)平臺(tái),哪些方面是你喜歡或不喜歡的?
- 你認(rèn)為以上平臺(tái)缺失了什么?
用戶語(yǔ)錄:
- 我不會(huì)閱讀陌生點(diǎn)評(píng)者的在線推薦,也不相信他們的品味。
- 我想花盡可能少的時(shí)間尋找美食。搜索推薦需花費(fèi)大量時(shí)間,而且信息總是過(guò)時(shí)的。
- 我還沒(méi)有找到一個(gè)我感興趣的在線推薦資源。
- 在周末,我會(huì)通過(guò)品嘗美食來(lái)緩解壓力。我想知道我的朋友在哪里吃過(guò)美味的食物。我也想去嘗試一下,并分享我的經(jīng)歷。
- 好友的點(diǎn)評(píng)比在線平臺(tái)的推薦更可信,因?yàn)槲覀冇邢嗨频钠肺丁?/li>
- 我會(huì)根據(jù)認(rèn)識(shí)的人的推薦來(lái)選擇美食,明智地花費(fèi)金錢(qián)和時(shí)間。
我在采訪中發(fā)現(xiàn):
- 人們沒(méi)有過(guò)多時(shí)間去尋找美食。
- 信息應(yīng)該被及時(shí)更新,并且是可信的。
- 人們喜歡在朋友和家人之間分享他們的經(jīng)歷,因?yàn)樗麄冇邢嗨频钠肺丁?/li>
二、定義
1. 親和圖
為了從不同的角度看問(wèn)題,我分析了訪談結(jié)果,總結(jié)出一個(gè)美食愛(ài)好者需要什么,然后將它們分組,尋找相同模式。
用戶研究的親和圖
2. 競(jìng)品分析
我體驗(yàn)了一些現(xiàn)有的美食 APP,并閱讀了每個(gè)用戶的觀點(diǎn)。這是獲取真實(shí)用戶評(píng)論的最簡(jiǎn)單的方式;此外,競(jìng)品分析有助于明確并改進(jìn) Elok 的功能特性,從而獲得競(jìng)爭(zhēng)優(yōu)勢(shì)。
競(jìng)品分析
3. 用戶畫(huà)像
我根據(jù)用戶研究結(jié)果創(chuàng)建了兩個(gè)用戶角色,收集了他們共同的動(dòng)機(jī)、目標(biāo)和挫折。
照片來(lái)自Unsplash
4. 商業(yè)目標(biāo)
- 將有著相似口味的人聯(lián)系起來(lái),讓用戶信任應(yīng)用上的評(píng)論。
- 為用戶提供預(yù)算功能,讓他們可以設(shè)置美食價(jià)格范圍。
5. 產(chǎn)品目標(biāo)
- 易于在用戶之間提供和接收建議。
- 提供類似價(jià)格、付款方式、營(yíng)業(yè)時(shí)間、菜單以及預(yù)訂方式等信息。
- 可視化呈現(xiàn)附近哪些餐廳有非常棒的美食。
6. 工作故事
我創(chuàng)建了兩個(gè)工作故事,并以此來(lái)設(shè)計(jì)產(chǎn)品特性。
- 當(dāng)我來(lái)到印度尼西亞,渴望吃到那里最好的美食,或去到那里最好的餐館時(shí),我希望能找到一份值得信賴的美食推薦,這樣我就能節(jié)省更多的時(shí)間和金錢(qián)。
- 當(dāng)我知道有重要事件即將到來(lái)的時(shí)候,我希望可以了解到一個(gè)地理位置好,并且大家都會(huì)感興趣的地方,這樣我就可以讓每個(gè)人都開(kāi)心。
三、概念
1. 用戶流
用戶流[1]可以幫助我可視化用戶與 APP 界面的交互方式。下圖是用戶在平臺(tái)上征集美食推薦的流程。
([1]用戶流(user flow)是用戶為實(shí)現(xiàn)有意義的目標(biāo)而采取的一系列步驟。)
我將該 APP 分為三個(gè)部分:
主頁(yè)——APP 主頁(yè)包含了用戶附近的餐廳卡片,這些卡片中有著各餐廳的最佳菜單
當(dāng)用戶首次打開(kāi)該 APP 時(shí),無(wú)需登錄即可直接轉(zhuǎn)到該頁(yè)面。用戶在被索要個(gè)人信息之前,便可以大致了解到該 APP 的功能,這是至關(guān)重要的一點(diǎn)。
社區(qū)——這是尋找推薦的快速方法
當(dāng)用戶想嘗試一些有趣的事情時(shí),可以打開(kāi)此 Tab 選項(xiàng)卡,詢問(wèn)他們的朋友,或?yàn)g覽其它用戶發(fā)布的評(píng)論。如果用戶喜歡該評(píng)論,可以為它點(diǎn)贊。
個(gè)人中心——管理設(shè)置、通知、好友以及注銷
在此 Tab 選項(xiàng)卡中,用戶可以添加好友或查看好友主頁(yè),查看新通知以及編輯用戶個(gè)人資料;之所以在“個(gè)人中心”頁(yè)面中放置通知提醒,是因?yàn)樵?APP 并非通訊類 APP,便于用戶自行設(shè)置,接收他們想要的信息,并屏蔽他們不需要的信息。
四、原型
1. 草圖
完成用戶流之后,下一步是 繪制解決方案。我有一個(gè)很好的主意,即從 APP 概述開(kāi)始,包括內(nèi)容層次結(jié)構(gòu),然后選擇我認(rèn)為最有效的方案;由于時(shí)間不允許,我決定做紙上原型,與用戶一起測(cè)試想法和用戶流,然后在高保真上改進(jìn)原型。
為 Elok 繪制的原型草圖
2. 線框圖
當(dāng)我開(kāi)始畫(huà)線框圖時(shí),基于來(lái)自用戶的信息會(huì)更加真實(shí),我可以將所有元素放在圖中,而不用擔(dān)心它的外觀;我在 Figma 中設(shè)計(jì)了線框圖,我喜歡看到它們排列在各自的模塊中,以便于更清晰地查看整個(gè)流程;這幫助我明確了遺漏的步驟以及需要改進(jìn)的行為,并確定了無(wú)用的步驟。
以下是線框圖:
線框圖:登錄 / 注冊(cè) / 忘記密碼
線框圖:首頁(yè) / 社區(qū)
線框圖:個(gè)人中心
3. 情緒板
Elok 的情緒版
基準(zhǔn):
- Grab(東南亞打車租車服務(wù))
- Airbnb(愛(ài)彼迎,全球民宿短租公寓預(yù)定平臺(tái))
- Zenly(法國(guó)實(shí)時(shí)定位應(yīng)用)
引導(dǎo):
受 Zenly 的啟發(fā),用藍(lán)色來(lái)做背景色,給人以舒適的視覺(jué)感受,并向用戶介紹該應(yīng)用的信息。
圖標(biāo):
Grab 通過(guò)圖標(biāo)來(lái)傳達(dá)其具備的功能。該圖標(biāo)簡(jiǎn)單易懂,其背景色與 Grab 的主色——綠色相似。
卡片及個(gè)人中心:
Airbnb 的卡片利用空白空間、干凈的元素和標(biāo)價(jià),幫助用戶快速獲取所需信息,并體現(xiàn)出選擇過(guò)程的簡(jiǎn)單性,以此鼓勵(lì)用戶向客人出租房子或空余房間;關(guān)于個(gè)人中心部分,它非常易于理解。
社區(qū):
Airbnb 的收件箱非常簡(jiǎn)單,它是一個(gè) Tab 選項(xiàng)卡,很實(shí)用,并且不需要設(shè)計(jì)其他的底部選項(xiàng)卡來(lái)發(fā)送消息和通知;尤其是在我的案例中,Tab 選項(xiàng)卡將幫助我做出更簡(jiǎn)潔的設(shè)計(jì)。
4. 調(diào)色板
因?yàn)槊朗衬転槿藗儙?lái)幸福、快樂(lè)和樂(lè)趣,所以我 選擇了柔和的橙色作為我的主題色。我希望用戶在使用該 APP 時(shí)感到興奮。
我通過(guò)下圖來(lái)說(shuō)明用戶可以體驗(yàn)到的情緒:
5. 字體
我決定使用 Poppins 字體,因?yàn)樗?strong> 有多種字重,而且易于閱讀;此外,Poppins 是一種圓形字體,調(diào)整字體大小后將更有趣,而且有助于保持外觀的整潔。
6. 高保真
引導(dǎo)頁(yè):
引導(dǎo)頁(yè)通常指用戶首次與 APP 交互時(shí)呈現(xiàn)的一組界面,它為新用戶提供了關(guān)于該產(chǎn)品的信息;引導(dǎo)頁(yè)可以幫助新用戶快速洞察該 APP 解決了什么問(wèn)題,它是如何幫助用戶的,以及它提供了什么好處。
登錄頁(yè):
除了傳統(tǒng)的電子郵件注冊(cè)及登錄方式,我還添加了社交賬號(hào)登錄方式。為了提高效率,我在此不展示注冊(cè)過(guò)程;其注冊(cè)過(guò)程類似于登錄過(guò)程,但我會(huì)要求用戶輸入用戶名。
首頁(yè):
為了避免冗余,這里不顯示權(quán)限請(qǐng)求的過(guò)程。在主頁(yè)界面中,我請(qǐng)求訪問(wèn)用戶位置及聯(lián)系人,并請(qǐng)求通知推送權(quán)限。
我會(huì)在主頁(yè)頂部顯示用戶所在的位置,讓用戶感覺(jué)美食好像就在周圍。
研究期間,我考慮到人們通常會(huì)搜索正宗的食物,或點(diǎn)擊該區(qū)域內(nèi)的食物,以及 24 小時(shí)隨時(shí)可獲取到的食物,特別是對(duì)于那些在午夜或清晨尋找食物的人。
排序功能,能夠幫助用戶按評(píng)分、價(jià)格、送餐速度對(duì)食物進(jìn)行排序。
主頁(yè)功能:
在點(diǎn)擊 “菜系”、“預(yù)算”、“聚會(huì)類型” 時(shí),用戶將進(jìn)入一個(gè)頁(yè)面,上面有不同菜系的列表,可以為某種食物設(shè)定最低或最高的價(jià)格,并選擇享用美食的地方。這將有助于用戶做出決策。
詳情頁(yè):
- 后退按鈕:返回上一頁(yè),即主頁(yè)。
- 分享及心愿單:通過(guò)社交媒體分享用戶喜歡的食物,并記錄下用戶想要嘗試的美食。
- 食物大圖:讓用戶對(duì)他們選擇的食物有所期待。這是一種讓人們感受食物的方式,而關(guān)于食物的文字描述是無(wú)法做到這一點(diǎn)的,用戶更喜歡提供多圖的商家。
- 4信息:為用戶提供他們需要了解的食物關(guān)鍵信息。
- 致電:致電餐廳預(yù)訂或獲取更多信息。
- 菜單:為用戶提供食品和飲料清單及其價(jià)格。
- 付款:飯店支持的付款方式。
- 位置:打開(kāi)地圖,告知用戶前往餐廳的方式。
- 設(shè)施:餐廳提供的設(shè)施清單。
- 評(píng)分和評(píng)論:可評(píng)估食物的質(zhì)量。
- CTA 按鈕([2]:”顯示所有 500 條評(píng)論” 這一按鈕必須明顯地顯示在頁(yè)面上。如果用戶想繼續(xù)閱讀評(píng)論,他可以自行選擇。)
- 添加評(píng)論:用戶寫(xiě)下對(duì)食物的意見(jiàn)。([2]CTA(Call to Action,用戶行為召喚):CTA 按鈕明確地告訴用戶下一步該做什么,引導(dǎo)用戶進(jìn)行下一步操作。)
分享推薦:
用戶實(shí)際上可以看到關(guān)于印度尼西亞附近美食的所有討論,但他們只能根據(jù)所在地給出建議。
過(guò)濾器允許用戶選擇特定城市進(jìn)行討論。
查看所有討論,然后通過(guò)三個(gè)選項(xiàng)卡推薦食物或餐廳。第一步是點(diǎn)擊 “討論卡”,第二步是點(diǎn)擊 “寫(xiě)推薦”,第三步是點(diǎn)擊 “發(fā)布” 按鈕發(fā)布您的推薦;這個(gè)簡(jiǎn)單的步驟非常好,用戶只需三次點(diǎn)擊即可對(duì)食物或餐廳進(jìn)行評(píng)論。
點(diǎn)擊卡片,用戶可以了解更多關(guān)于推薦人的信息。
發(fā)布需求:
如果您是新用戶,并且從不寫(xiě)推薦,那么 “我的帖子” 頁(yè)面為空白狀態(tài)。
當(dāng)用戶在印度尼西亞,該 APP 允許用戶在任何時(shí)候發(fā)布需求,獲取所需的推薦;用戶可以輸入想去的地點(diǎn),或使用當(dāng)前位置,然后輸入所需的食物或餐廳類型,點(diǎn)擊 “發(fā)布” 按鈕發(fā)布問(wèn)題。
個(gè)人中心:
最后一個(gè)頁(yè)面是 “個(gè)人中心”,但出于項(xiàng)目范圍的考慮,我暫時(shí)不重點(diǎn)關(guān)注該頁(yè)面。在此頁(yè)面中,用戶可以通過(guò)綁定其它賬戶來(lái)搜索或查看列表中的好友。
五、可用性測(cè)試
在完成高保真設(shè)計(jì)后,我制作了項(xiàng)目原型,并邀請(qǐng)受訪者完成一些測(cè)試任務(wù),我選擇了涵蓋該 APP 主要功能的測(cè)試方案;之后,我進(jìn)行了用戶測(cè)試并獲取了整體反饋。
六、結(jié)論
這是我第一次嘗試從頭開(kāi)始設(shè)計(jì) APP,這是一個(gè)極具挑戰(zhàn)性的全新體驗(yàn)。
我意識(shí)到研究階段非常重要,用戶可以告訴你產(chǎn)品應(yīng)該往哪個(gè)方向走,以及你的不足之處是什么;我想確保這個(gè) APP 是被用戶所需要的,且擁有良好的市場(chǎng)。
事實(shí)證明,很多人都想要這樣的服務(wù);長(zhǎng)遠(yuǎn)地看,比起在產(chǎn)品準(zhǔn)備好后才獲得反饋,來(lái)自導(dǎo)師及朋友的每個(gè)階段反饋都非常有價(jià)值。
通過(guò)這個(gè)項(xiàng)目,我更深刻地理解到設(shè)計(jì)系統(tǒng)的重要性,因?yàn)樗谏a(chǎn)力和效率方面對(duì)我有很大的幫助。
原文:https://bootcamp.uxdesign.cc/elok-eat-lokal-ui-ux-case-study-69242cede79a
作者:Rina La
譯者:劉倩茹;審核:李澤慧、張聿彤;編輯:徐小淇
本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自?Unsplash,基于 CC0 協(xié)議
受教了