路易莎 Redesign Cover
路易莎 Redesign Cover
路易莎 Redesign Cover

路易莎點餐系統 Redesign

當數位點餐比人工還慢,就是設計師該出手的時候了。這是一個我針對路易莎線上點餐系統的 Redesign 專案,成功將平均點餐時間從 3分40秒 縮短至 1分30秒,讓點餐體驗回歸它應有的直覺與效率。

類型

類型

Redesign

擔任角色

擔任角色

UI/UX Designer

時間

時間

2025/07/20~2025/08/08

59%

效率提升

3

位受訪者表示,更願意使用
界限 UI 故事頁 Hero 平板尺寸
界限 UI 故事頁 Hero 平板尺寸
界限 UI 故事頁 Hero 平板尺寸
界限 UI 故事頁 Hero 手機尺寸
界限 UI 故事頁 Hero 手機尺寸
界限 UI 故事頁 Hero 手機尺寸
界限 UI 首頁 Hero 電腦尺寸
界限 UI 首頁 Hero 電腦尺寸
界限 UI 首頁 Hero 電腦尺寸
專案背景

線上點餐,怎麼可以比直接點餐還慢?

身為路易莎的忠實顧客,某天在台北的分店買咖啡時,店員說現在只能用線上點餐,這是我第一次好好用他們的系統。

結果用起來發現有些流程可以改善,光是在尋找我想點的餐點,就花了一些時間。

當下的直接感受是:「咦,我用線上點餐,怎麼好像比我直接去櫃台還慢?」

這個體驗讓我覺得很可惜,也很好奇是不是只有我覺得難用。

所以,我的第一步很簡單:直接去 Facebook、Threads、Dcard ,看看大家都是怎麼抱怨的,想從裡面找出最多人遇到的問題到底是什麼。

性別比例圓餅圖
性別比例圓餅圖
性別比例圓餅圖
能否舉出性騷擾例子圓餅圖
能否舉出性騷擾例子圓餅圖
能否舉出性騷擾例子圓餅圖
探索與洞察

抱怨這麼多,到底哪個才是真的問題?

社群上的抱怨五花八門,但把它們收斂成三個主要方向:「找不到東西」、「介面難用」、和「不知道餐點好了沒」

除了手機線上點餐以外,不少人提及店內平板點餐觸控不良,撇除硬體因素我也在想會不會是 UI 因素所導致?

於是我就前往有平板點餐的店家進行體驗,發現整體流程與手機差異不大,UI 也是等比例放大,沒有特別做調整,有可能是因為這樣,才會被大眾認為難用。

除此之外我還發現另外一個問題,就是數位點餐的情境有 5 個路線。

也因為平板、手機的點餐 UI 、流程基本上一致,所以我決定以解決最複雜的第四條路線為優先,解決這個更根本、影響更廣的「手機會員體驗斷裂」的問題。

在長久下來,才能夠達到有效分流人工點餐、平板點餐的人潮,提升整體點餐效率。

如果能像麥當勞點餐一樣順暢的話,我會更想要用。

為了驗證我對路易莎點餐系統的初步假設,找了 3 位使用者進行訪談與實際操作測試。

從訪問平常來路易莎做什麼、偏好的點餐方式、有沒有點餐遇到的困擾,再到實際操作點餐系統,我發現了幾點洞察。

心目中的數位點餐

3 名受訪者皆表示,他們習慣去櫃台點餐,因為可以快速直覺的點完餐。

同時他們也覺得數位點餐可以慢慢思考,不會有壓力,只是如果一定要用數位點餐的話會希望可以像是麥當勞點餐機一樣流暢、快速。

UI 讓人迷路

實際操作過後他們的平均點餐時間落在 3 分 40 秒,其中有 40 秒的時間都在思考要點擊「立即點餐」還是「會員點餐」或是點錯重回頁面操作。

進入後發現大片的 Banner 大幅縮小點餐可操作空間、分類操作不直覺、客製化餐點按鈕過小等等。

這讓意識到這個系統沒有尊重使用者的專注力。它只想推銷,卻忘了使用者真正想要的是快速的點完餐點。

用語的不確定性

而在送出餐點後卻先顯示「等待接單」讓 3 位訪談者第一時間的反應都是:他寫等待接單欸?這樣是好了嗎?

過了一陣子才顯示餐點製作中,而另一個問題是餐點通知沒有聲音或震動通知,不知道餐點好了沒,反而要到櫃台親自詢問,才拿到餐點。

目標: 重新設計整體 UI 及流程,將使用者從「開啟點餐介面」到「成功下訂並清楚知道訂單狀態」的平均完成時間縮短 20%


定義使用者,找出關鍵痛點

捏出了一位最關鍵的人物 Persona,並畫出他的顧客旅程地圖,讓我們能身歷其境地感受他到底在哪個環節最痛苦。

規劃與發想

產品間的差異

在開始設計之前,我先進行競品分析,除了可以清楚比較路易莎與其他競品之間的差異,讓我更清楚哪幾種呈現方式對於使用者來說是最好的,以及最為他們著想。

打造產品的骨架

在開始設計前,我先將所有需要的功能攤開來,確保不會在設計的路上迷失或遺漏重要功能。

接著,我才開始動手畫 Wireframe,把這些功能合理地安排在畫面上,規劃出最順暢的操作流程。

設計與驗證

設計系統

為了確保整體頁面擁有一致性,以及顏色的協調性,我從路易莎的主視覺提取顏色,並且將其他配色都讓他帶點橘色調,保持眼睛的舒適程度,也建立了各種不同的元件,以適應不同的情形。

設計解法 & Redesign

我的設計策略是:在保留路易莎原有的基礎上,針對前面發現的三大痛點,進行優化。

解決讓人迷路的 UI

問題:畫面好亂、按鈕好小,我只是想點餐,眼睛不知道要看哪裡。

刪除不確定性字眼

問題:一開始跳出的等待接單,會讓顧客不知道自己是否有成功點餐,造成恐慌。

回饋的重要性

我原本好意加大了按鈕,沒想到反而變成了新的痛點。有位受訪者後測過後提到:按鈕有點太大了,讓我反而要上下確認自己客製化了哪些。

這句話點醒了:在這個情境下,一目了然比點擊目標大更重要,於是縮小了按鈕,確保使用者的體驗正常。而改良後,受訪者也提及比原本好。

Prototype 展示

成果與反思

成果

在這個 Redesign 專案中,透過一系列的設計優化,達成了以下 2 個成果:

點餐效率提升

在實際操作測試中,原系統完成一份複雜訂單平均耗時 3 分 40 秒,而我重新設計的流程,從原本的 3 分 40 秒縮短至 1 分 30 秒,提升了 59% 的效率。

提升使用意願

所有受訪者都明確表示:「如果實際系統變得像設計的這樣,我會更願意使用它。」

學習與反思

這個專案不只是一個 Redesign,更帶給我不少學習。

最大的學習

這次專案最令印象深刻的,就是那個按鈕迭代經驗。這件事教會,設計師的任何假設,都必須經過真實使用者的驗證,我以為的好,對他們來說,可能只是另一個「新麻煩」。

專案的侷限

這次的 Redesign 主要聚焦在「掃碼手機會員」的點餐流程。但知道,對於平板點餐機或 Line 會員的體驗,還有很多可以深入的地方。

kuti36.work@gmail.com

Copyright © Kuti Chen

kuti36.work@gmail.com

Copyright © Kuti Chen

kuti36.work@gmail.com

Copyright © Kuti Chen