案例研究|一款為你帶來難忘體驗的美食 APP

2 評論 9502 瀏覽 26 收藏 21 分鐘

編輯導語:如何做好一款美食App?進行用戶調研、制作用戶畫像、依據用戶體驗與市場調研進行方案搭建是必然路徑。那么,具體到設計方案過程中,我們應當從哪些方面著手呢?本文作者詳細介紹了她設計一款美食App的過程,一起來看一下。

一、問題闡述?The problem

美食愛好者們總是很難找到他們認為美味的食物,尤其是當他們想在家鄉嘗到新菜或典型的地方菜時。

面對每個人的不同口味以及美食的不同味道,“美食愛好者” 在選擇推薦菜時可能會感到沮喪。如果你想與家人或朋友聚餐,但不想花時間從網絡評論中的過時信息里尋找美食,那沮喪的心情就更不用說了。

即使你找到了美食,也很難將你的經歷分享給那些與你有著相似口味的朋友,讓他們了解到這家餐館是多么的方便。同樣的,想得到他們的推薦也并非易事。

二、解決方案?The solution

要提出良好的解決方案,首先需要明確的一點是,美食愛好者們正在尋找一些可供選擇的地方

在了解了他們之間的獨特行為后,我設計了一個 APP。這個 APP 不僅能夠解決以上問題,而且還是一個可供美食愛好者們進行交流的社交平臺。Elok,這個單詞結合了英語中的 “Eat” 和印度尼西亞語中的 “LOKal”(本地)。該 APP 可供用戶與朋友們探討各地美食,分享經驗,交換建議,甚至為美食計劃設定預算。

三、設計過程?Design Process

為確保移動 APP 能夠滿足目標用戶的需求,我決定創建一個好的用戶體驗策略,并在今后的案例研究中使用它。

案例研究|一款為你帶來難忘體驗的美食 APP

1. 共情 Empathise

用戶訪談

我決定對用戶進行訪談,并分析他們的不同觀點。根據諾曼·尼爾森集團的定義,我選擇了 5 個人。在這一階段,我需要更多地了解用戶喜歡什么地方,以及他們在選擇用餐地點時如何面對問題。

我采用了 “5why 分析法“。通過不斷問 “為什么”,收集到的信息讓我不斷接近問題的根源。在問問題之前,我先做了簡單介紹。我問的問題包括:

  1. 你現在是怎么吃到這道菜的?
  2. 你一般花多少時間來選擇品嘗何種美食?
  3. 你還嘗試過哪些在線點評平臺?
  4. 關于上述在線點評平臺,哪些方面是你喜歡或不喜歡的?
  5. 你認為以上平臺缺失了什么?

用戶語錄:

  • 我不會閱讀陌生點評者的在線推薦,也不相信他們的品味。
  • 我想花盡可能少的時間尋找美食。搜索推薦需花費大量時間,而且信息總是過時的。
  • 我還沒有找到一個我感興趣的在線推薦資源。
  • 在周末,我會通過品嘗美食來緩解壓力。我想知道我的朋友在哪里吃過美味的食物。我也想去嘗試一下,并分享我的經歷。
  • 好友的點評比在線平臺的推薦更可信,因為我們有相似的品味。
  • 我會根據認識的人的推薦來選擇美食,明智地花費金錢和時間。

我在采訪中發現:

  1. 人們沒有過多時間去尋找美食。
  2. 信息應該被及時更新,并且是可信的。
  3. 人們喜歡在朋友和家人之間分享他們的經歷,因為他們有相似的品味。

2. 定義?Define

1)親和圖

為了從不同的角度看問題,我分析了訪談結果,總結出一個美食愛好者需要什么,然后將它們分組,尋找相同模式。

案例研究|一款為你帶來難忘體驗的美食 APP

用戶研究的親和圖

2)競品分析

我體驗了一些現有的美食 APP,并閱讀了每個用戶的觀點。這是獲取真實用戶評論的最簡單的方式。此外,競品分析有助于明確并改進 Elok 的功能特性,從而獲得競爭優勢。

案例研究|一款為你帶來難忘體驗的美食 APP

競品分析

3)用戶畫像

我根據用戶研究結果創建了兩個用戶角色,收集了他們共同的動機、目標和挫折。

案例研究|一款為你帶來難忘體驗的美食 APP

照片來自Unsplash

4)商業目標

  1. 將有著相似口味的人聯系起來,讓用戶信任應用上的評論。
  2. 為用戶提供預算功能,讓他們可以設置美食價格范圍。

5)產品目標

  1. 易于在用戶之間提供和接收建議。
  2. 提供類似價格、付款方式、營業時間、菜單以及預訂方式等信息。
  3. 可視化呈現附近哪些餐廳有非常棒的美食。

6)工作故事

我創建了兩個工作故事,并以此來設計產品特性。

  1. 當我來到印度尼西亞,渴望吃到那里最好的美食,或去到那里最好的餐館時,我希望能找到一份值得信賴的美食推薦,這樣我就能節省更多的時間和金錢。
  2. 當我知道有重要事件即將到來的時候,我希望可以了解到一個地理位置好,并且大家都會感興趣的地方,這樣我就可以讓每個人都開心。

3. 概念?Ideate

用戶流

用戶流[1]可以幫助我可視化用戶與 APP 界面的交互方式。下圖是用戶在平臺上征集美食推薦的流程。

([1]用戶流(user flow)是用戶為實現有意義的目標而采取的一系列步驟。)

案例研究|一款為你帶來難忘體驗的美食 APP

我將該 APP 分為三個部分。

1)主頁

APP 主頁包含了 用戶附近的餐廳卡片這些卡片中有著各餐廳的最佳菜單。當用戶首次打開該 APP 時,無需登錄即可直接轉到該頁面。用戶在被索要個人信息之前,便可以大致了解到該 APP 的功能,這是至關重要的一點。

2)社區

這是尋找推薦的快速方法。當用戶想嘗試一些有趣的事情時,可以打開此 Tab 選項卡,詢問他們的朋友,或瀏覽其它用戶發布的評論。如果用戶喜歡該評論,可以為它點贊。

3)個人中心

管理設置、通知、好友以及注銷。在此 Tab 選項卡中,用戶可以添加好友或查看好友主頁,查看新通知以及編輯用戶個人資料。之所以在“個人中心”頁面中放置通知提醒,是因為該 APP 并非通訊類 APP,便于用戶自行設置,接收他們想要的信息,并屏蔽他們不需要的信息。

4. 原型 Prototype

1)草圖

完成用戶流之后,下一步是繪制解決方案。我有一個很好的主意,即從 APP 概述開始,包括內容層次結構,然后選擇我認為最有效的方案。由于時間不允許,我決定做紙上原型。與用戶一起測試想法和用戶流,然后在高保真上改進原型。

案例研究|一款為你帶來難忘體驗的美食 APP

為 Elok 繪制的原型草圖

2)線框圖

當我開始畫線框圖時,基于來自用戶的信息會更加真實,我可以將所有元素放在圖中,而不用擔心它的外觀。

我在 Figma 中設計了線框圖,我喜歡看到它們排列在各自的模塊中,以便于更清晰地查看整個流程。這幫助我明確了遺漏的步驟以及需要改進的行為,并確定了無用的步驟。以下是線框圖:

案例研究|一款為你帶來難忘體驗的美食 APP

線框圖:登錄 / 注冊 / 忘記密碼

案例研究|一款為你帶來難忘體驗的美食 APP

線框圖:首頁 / 社區

案例研究|一款為你帶來難忘體驗的美食 APP

線框圖:個人中心

3)情緒板

案例研究|一款為你帶來難忘體驗的美食 APP

Elok 的情緒版基準:

  1. Grab(東南亞打車租車服務)
  2. Airbnb(愛彼迎,全球民宿短租公寓預定平臺)
  3. Zenly(法國實時定位應用)

引導

受 Zenly 的啟發,用藍色來做背景色,給人以舒適的視覺感受,并向用戶介紹該應用的信息。

圖標

Grab 通過圖標來傳達其具備的功能。該圖標簡單易懂,其背景色與 Grab 的主色——綠色相似。

卡片及個人中心

Airbnb 的卡片利用空白空間、干凈的元素和標價,幫助用戶快速獲取所需信息,并體現出選擇過程的簡單性,以此鼓勵用戶向客人出租房子或空余房間。關于個人中心部分,它非常易于理解。

社區

Airbnb 的收件箱非常簡單,它是一個 Tab 選項卡,很實用,并且不需要設計其他的底部選項卡來發送消息和通知。尤其是在我的案例中,Tab 選項卡將幫助我做出更簡潔的設計。

4)調色板

因為美食能為人們帶來幸福、快樂和樂趣,所以我 選擇了柔和的橙色作為我的主題色。我希望用戶在使用該 APP 時感到興奮。我通過下圖來說明用戶可以體驗到的情緒。

案例研究|一款為你帶來難忘體驗的美食 APP

5)字體

我決定使用 Poppins 字體,因為它 有多種字重,而且易于閱讀。此外,Poppins 是一種圓形字體,調整字體大小后將更有趣,而且有助于保持外觀的整潔。

案例研究|一款為你帶來難忘體驗的美食 APP

6)高保真

① 引導頁

案例研究|一款為你帶來難忘體驗的美食 APP

引導頁通常指用戶首次與 APP 交互時呈現的一組界面,它為新用戶提供了關于該產品的信息。引導頁可以幫助新用戶快速洞察該 APP 解決了什么問題,它是如何幫助用戶的,以及它提供了什么好處。

② 登錄頁

案例研究|一款為你帶來難忘體驗的美食 APP

除了傳統的電子郵件注冊及登錄方式,我還添加了社交賬號登錄方式。為了提高效率,我在此不展示注冊過程。其注冊過程類似于登錄過程,但我會要求用戶輸入用戶名。

③ 首頁

案例研究|一款為你帶來難忘體驗的美食 APP

為了避免冗余,這里不顯示權限請求的過程。在主頁界面中,我請求訪問用戶位置及聯系人,并請求通知推送權限。

  • 我會在主頁頂部顯示用戶所在的位置,讓用戶感覺美食好像就在周圍。
  • 研究期間,我考慮到人們通常會搜索正宗的食物,或點擊該區域內的食物,以及 24 小時隨時可獲取到的食物,特別是對于那些在午夜或清晨尋找食物的人。
  • 排序功能,能夠幫助用戶按評分、價格、送餐速度對食物進行排序。

④ 主頁功能

案例研究|一款為你帶來難忘體驗的美食 APP

在點擊 “菜系”、“預算”、“聚會類型” 時,用戶將進入一個頁面,上面有不同菜系的列表,可以為某種食物設定最低或最高的價格,并選擇享用美食的地方。這將有助于用戶做出決策。

⑤ 詳情頁

案例研究|一款為你帶來難忘體驗的美食 APP

  1. 后退按鈕:返回上一頁,即主頁。
  2. 分享及心愿單:通過社交媒體分享用戶喜歡的食物,并記錄下用戶想要嘗試的美食。
  3. 食物大圖:讓用戶對他們選擇的食物有所期待。這是一種讓人們感受食物的方式,而關于食物的文字描述是無法做到這一點的,用戶更喜歡提供多圖的商家。
  4. 信息:為用戶提供他們需要了解的食物關鍵信息。
  5. 致電:致電餐廳預訂或獲取更多信息。
  6. 菜單:為用戶提供食品和飲料清單及其價格。
  7. 付款:飯店支持的付款方式。
  8. 位置:打開地圖,告知用戶前往餐廳的方式。
  9. 設施:餐廳提供的設施清單。
  10. 評分和評論:可評估食物的質量。
  11. CTA 按鈕[2]:”顯示所有 500 條評論” 這一按鈕必須明顯地顯示在頁面上。如果用戶想繼續閱讀評論,他可以自行選擇。
  12. 添加評論:用戶寫下對食物的意見。

([2]CTA(Call to Action,用戶行為召喚):CTA 按鈕明確地告訴用戶下一步該做什么,引導用戶進行下一步操作。)

⑥ 分享推薦

案例研究|一款為你帶來難忘體驗的美食 APP

用戶實際上可以看到關于印度尼西亞附近美食的所有討論,但他們只能根據所在地給出建議。

  • 過濾器允許用戶選擇特定城市進行討論。
  • 查看所有討論,然后通過三個選項卡推薦食物或餐廳。第一步是點擊 “討論卡”,第二步是點擊 “寫推薦”,第三步是點擊 “發布” 按鈕發布您的推薦。這個簡單的步驟非常好,用戶只需三次點擊即可對食物或餐廳進行評論。
  • 點擊卡片,用戶可以了解更多關于推薦人的信息。

⑦ 發布需求

案例研究|一款為你帶來難忘體驗的美食 APP

如果您是新用戶,并且從不寫推薦,那么 “我的帖子” 頁面為空白狀態。當用戶在印度尼西亞,該 APP 允許用戶在任何時候發布需求,獲取所需的推薦。用戶可以輸入想去的地點,或使用當前位置,然后輸入所需的食物或餐廳類型,點擊 “發布” 按鈕發布問題。

⑧ 個人中心

案例研究|一款為你帶來難忘體驗的美食 APP

最后一個頁面是 “個人中心”,但出于項目范圍的考慮,我暫時不重點關注該頁面。在此頁面中,用戶可以通過綁定其它賬戶來搜索或查看列表中的好友。

5. 可用性測試?Usability Testing

在完成高保真設計后,我制作了項目原型,并邀請受訪者完成一些測試任務。我選擇了涵蓋該 APP 主要功能的測試方案。之后,我進行了用戶測試并獲取了整體反饋。

案例研究|一款為你帶來難忘體驗的美食 APP

四、結論?Conclusion

這是我第一次嘗試從頭開始設計 APP,這是一個極具挑戰性的全新體驗。

我意識到研究階段非常重要。用戶可以告訴你產品應該往哪個方向走,以及你的不足之處是什么。

我想確保這個 APP 是被用戶所需要的,且擁有良好的市場。事實證明,很多人都想要這樣的服務。

長遠地看,比起在產品準備好后才獲得反饋,來自導師及朋友的每個階段反饋都非常有價值。

通過這個項目,我更深刻地理解到設計系統的重要性,因為它在生產力和效率方面對我有很大的幫助。

我花了五周時間達到現在的目標,這是我接下來的計劃:

  1. 使用分析功能為新用戶推薦具有相似品味的用戶。
  2. 通過 APP 預訂餐廳。
  3. 開發一個功能,允許用戶尋求反饋,從而了解到自己的推薦是否符合其它用戶的期望。
  4. 若某用戶推薦符合大多數用戶的期望,為其提供推薦徽章。
  5. 制定產品擴展計劃(網絡版本)。
  6. 還有更多,敬請期待!

本文翻譯已獲得作者的正式授權(授權截圖如下)

案例研究|一款為你帶來難忘體驗的美食 APP

 

作者:Rina La,譯者:劉倩茹,編輯:王婭,審核:李澤慧、張聿彤;公眾號:TCC翻譯情報局

原文鏈接:https://bootcamp.uxdesign.cc/elok-eat-lokal-ui-ux-case-study-69242cede79a

本文由@TCC翻譯情報局 翻譯發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 感覺和美團,餓了么沒啥區別,要選競品也該是選目前最流行的app(美團)啊,作者選的那些都沒聽說過。以我之見,這種美食平臺前期是要獲得商家,在獲得顧客才行,得到了大量商家,再進行篩選,才會是一個擁有優質美食的平臺。我們中期的時候才去通過運行機制,讓顧客消費。(個人看法)

    來自四川 回復
  2. 這是什么軟件?

    回復