目標

近年在健康市場越來越競爭的情況下,Subway 發現到數位轉型上的劣勢與不足,經營團隊想要改善這個問題,在AI自動化的趨勢下,執行團隊希望可以用無人餐廳的服務模式,提供顧客安全及快速的點餐服務來提升整體銷售量。

我的貢獻

我參與了前期的用戶研究,從資料中鎖定我們的目標客群,並且挖掘出顧客的痛點後,開始規劃流程、原型設計和易用性測試,逐步完成整體的點餐體驗設計。

專案時間

2022/2 - 2022/5

我的角色

UI/UX Designer

設計流程

design_progress

研究與洞察

目標與方法

希望透過這次的研究,「暸解顧客在實體點餐中碰到的痛點,如何透過線上點餐的方式達到改善,近一步增加整體的銷售量」。因為疫情的關係選擇了「線上問卷」和「線上訪談」的方式,來暸解消費者在購買 Subway 時的點餐行為。透過問卷調查的結果,找了三位受訪者進行訪談,挖掘消費者在點餐行為背後的原因。

數據洞察

48% 的消費者,在選擇餐點上遇到困難,常常花時間思考如何客製化餐點,而影響到整體的點餐時間。
70% 的消費者,因為時間的因素選擇外帶,但在一般情況會選擇內用,擔心外帶或外送會影響餐點的新鮮度。
口味 70% 是主要購買的原因,對於能客製化自己喜歡的口味是吸引他們去購買的原因。
健康 52% 是次要購買的原因,餐點的熱量和營養數是好計算的,對有在健身的人是非常棒的選擇。
intimacy map

定義人物誌

透過量化與質化資料的交叉比對後,我繪製出了一位人物誌 Caroline,希望能透過飲食控制,來達到維持體態的目標。

persona

挖掘用戶痛點

Caroline 在線上點餐的過程中,我發現以下兩個痛點:

在評估餐點的階段中,可以看到 Caroline 對於計算餐點的熱量感到煩躁,擔心餐點熱量是否過高。
在實體取餐的階段中,Caroline 希望能快速取餐並且開始享用餐點,擔心時間會影響餐點的新鮮度。
CJM01

定義 POV

在顧客旅程圖中,我發現到 Caroline 需要一個容易控制飲食熱量的點餐體驗,來幫助她快速選擇需要的餐點內容。而在用戶訪談的過程中,暸解到消費者健身的原因,是因為能滿足自己對於體態上的要求,從而定義出以下的 POV。

平常注重外觀與愛健身的 Caroline,需要一個容易控制飲食熱量的點餐體驗,來幫助自己維持身材與飲食管理,因為能滿足對於體態上的要求外,也能提升在職場上與同儕之間的自信心。

設計發想

運用 HMW 的架構,我將定義出來的 POV  進行發散思考,產出不同面向的價值提供。而在這之中,我選擇了 「HMW 蒐集消費者的體態數據,來推薦她如何控制餐點熱量?」我認為可以透過不同消費者的體態,來提供他們專屬的餐點內容。

HMW

如何提供價值?

那麼該如何蒐集體態資訊?、 如何推薦用戶餐點?用這兩個問題為中心進行功能發想,並且結合 Crazy 8 的方式來刺激設計發想,透過素描的方式描繪出腦中所呈現的功能說明。

crazy8

如何收斂想法?

我運用功能比較圖將八個發想,分配到四個象限中,進而決定透過「體態模組」的方式,來設計點餐的體驗。

feature_map

規劃流程架構

資訊架構

在繪製 wireframes 前,我試著將想到的功能頁面以及頁面的內容,運用資訊架構的方式呈現出來,方便我進行整體 App 的瀏覽。

IA

用戶流程

在繪製出所有的 wireframes 後,透過用戶流程的方式來確認頁面之間的操作是符合邏輯的,而在資訊架構與用戶流程的過程中,是我會一直反覆進行修改的階段,直到整體的操作是流暢沒問題的。

使用情境:
平常愛健身又愛打扮的 Caroline 下班要去健身前,透過點餐 App 完成餐點後,並且到現場完成領取餐點。
操作任務:
透過體態模組選擇一份餐點,並且完成餐點的領取。
user flow

易用性測試

在設計交付前,我找了 5位受測者完成一次易用性測試,進行價值的驗證與版本的迭代,在受測後也請受測者完成 SUS 量表與受測後訪談,實際了解他們在使用 App 時所碰到的問題與想法。

受測條件:

• 男女不拘

• 年齡 20 - 30 歲

• 曾經消費過 Subway

• 平常有健身的習慣

• iOS 設備用戶

受測任務:

• 註冊 Subway 會員

• 完成體態設定

• 購買 Subway 餐點

• 完成取餐設定

• 前往領取餐點

受測結果:

痛點:

• 註冊流程太長,不知道要填多少的資訊。

• 中間圖片太大,第一時間沒有注意到下方的餐點資訊。

• 選擇門市時,沒有注意到下方有門市的資訊。

優點:

• 對於預定座位功能覺得很新穎、特別。

• 認為餐點模組很方便、讓人印象深刻。

• 覺得介面很可愛、乾淨、有 Subway 的風格。

整體而言:

• SUS 滿意度平均分數 82.5

• 在推薦的餐點上,會願意嘗試或保留參考的意願。

建議:

• 對於推薦的餐點模組,期望能看到更多的推薦選擇。

• 主標題可以用口味來表示,在選擇餐點上會更直覺。

根據回饋進行版本的迭代

註冊帳號

在原先註冊帳號的流程中,我增加了 Progress Bar 的元件,讓消費者可以清楚暸解還有多少步驟來完成帳號註冊。

版本一

redesign01

版本二

redesign02

體態模組

由於原先的圖片太大造成使用者會想點擊,無法注意到下方的餐點資訊,所以我將圖片縮小為列表顯示。也因受測者表示想看到更多的餐點推薦,所以修正了原先的版型,讓畫面能呈現更多推薦的餐點內容。

版本一

redesign03

版本二

homepage_02

選擇門市

在選擇門市時,第一時間無法注意到下方的門市資訊,所以我加深了門市區塊的陰影外,也在 google map 上一層 hover,來強調門市資訊的對比度。

版本一

select_shop_v01

版本二

select_shop_v02

建立設計系統

在設計原型前,我創建了一份設計文件,定義出符合 Subway 的主要色、次要色及其他色票。因為目標客群為 iOS 的消費者,所以規劃了中英文的字型、字體、文字顏色、陰影和圓角,接著依據這份文件進行原型的設計。

design_system

設計成果

最終我完善了整體的點餐流程與畫面,以下為成果展示。

signup_gif

01. 註冊帳號

Onboard 的過程中,運用插圖描述了 Subway 的價值理念,也簡單直覺的引導使用者,快速完成帳號的註冊。

onboarding_gif

02. 設定體態

註冊成功後,會進行體態的設定,方便系統計算出所需攝取的卡路里,幫用消費者打造屬於自己的餐點內容。

order_gif

03. 購買餐點

透過卡路里的資訊找到需要的餐點,可以點擊餐點看到詳細的餐點資訊,依據需求選擇客製化或直接加入購物車。也透過運動的分類,來引起消費者在選擇餐點上的共鳴

pickup_gif

04. 領取餐點

完成取餐設定,也幫助想立即享用的消費者,提供預訂座位的功能。在送出訂單後,前往無人餐廳並透過掃描 QR code 的方式,來完成領取餐點的動作。

我的學習

學到了什麼?

這是我第一次從前期的用戶研究、規劃流程、原型設計、易用性測試到最後版本的迭代,接觸到了產品從 0 - 1 的設計過程。

由於這次的經驗,讓我對產品設計有更深入的暸解,在未來也能夠根據狀況活用不同的 UX 工具,來解決問題與創造價值。

在受測後訪談的過程中,暸解到用戶行為的背後都是有原因,而設計出的體驗是否符合他們所預期的,就會顯得相當重要。