UX/UI 設計

Mobile

Web APP

2024 年 3 月 - 2024 年 6 月

銀色大門|老人送餐 APP

不僅只是送餐:打造貼近長者數位習慣的訂餐體驗

專案期間

12週

擔任角色

UX/UI 設計實習生

負責項目

使用者研究
功能流程規劃
設計初稿與迭代
工程交付

專案性質

非營利組織委託設計

專案簡介

為什麼消費者需要Ubereats和Foodpanda以外的餐飲外送平台?

請試著想像…

請試著想像…

家中有位80歲的長者不良於行,患有糖尿病同時需要洗腎,卻獨居在沒有電梯的公寓四樓。身為上班族的我們試著為長輩訂餐時,打開外送軟體,一時之間卻難以找到提供合適餐點的餐廳,於是選擇訂購健康便當,並在備註欄填上接近字數上限的注意事項。餐點送達長者住家樓下時,外送員卻不願上樓,只好趕緊拜託鄰里幫忙將餐點拿上樓掛在住家門口。

家中有位80歲的長者不良於行,患有糖尿病同時需要洗腎,卻獨居在沒有電梯的公寓四樓。身為上班族的我們試著為長輩訂餐時,打開外送軟體,一時之間卻難以找到提供合適餐點的餐廳,於是選擇訂購健康便當,並在備註欄填上接近字數上限的注意事項。餐點送達長者住家樓下時,外送員卻不願上樓,只好趕緊拜託鄰里幫忙將餐點拿上樓掛在住家門口。

我們或許有幸不曾遭遇上述困境,這卻是許多台灣家庭面對的真實情境。隨著台灣少子化和即將邁入超高齡社會,不論都市或偏鄉,有愈來愈多的家庭將會面臨類似問題。

銀色大門從偏鄉送餐的經驗中發現,為長者送餐的服務尚未實現數位轉型,主要仰賴傳統的社福機構送餐或政府共餐服務,而這些體系多透過人力補足效率不彰的缺口。

主流外送平台則受限於商業模式和市場規模,只能在現有產品架構下,以線下教學盡量推廣使用,但在流程與介面的設計上,仍以年輕族群的需求作為目標,無法針對長者們的痛點進行迭代。

在少子化和高齡化的雙重衝擊下,若無法提供令人安心的送餐服務,長者與其子女就難以擁有良好的生活品質,因此銀色大門期望推出專為長者送餐的餐飲外送平台,主打將健康的餐點安心的外送至長者的大門口。

團隊目標

適度導入設計輔助訂餐與送餐流程,建構貼心的餐飲外送平台

作為銀色大門將餐點送至長者大門口的第一哩路,我們目標打造貼心的外送平台,透過解決訂餐者在傳統送餐服務中遇到的痛點,建構符合長者數位習慣的訂餐與送餐流程,以節省訂餐者的時間,同時提供豐富營養的餐點選擇。

考量使用者(包括長者及其子女)多為50歲以上的數位移民,設計符合目標族群習慣的流程和介面,而非一味貼近主流產品,是我們在設計過程中最大的挑戰。

擔任角色

激發團隊討論並代入不同利害關係人的觀點,正向影響設計結果

我負責執行使用者訪談,規劃使用者初次使用的流程,產出Landing Page和訂單相關頁面的線框稿、互動原型以及設計元件,並協助兩位設計師建立部份的設計系統。

同時我習慣代入不同利害關係人的觀點提出問題,從開發者、營運者和使用者的角度出發,持續向團隊提出各項議題激發討論,成果包含導入Landing Page,優化非既有用戶的使用體驗。

定義問題

定義問題前先拆解細節,符合成本效益的執行設計研究

因應這次設計專案是由外部團隊委託,為符合專案時程,我們期望以較低的時間成本,快速建構訂餐者的實際使用情境。因此我們選擇認知走查和質性訪談作為研究方法,同時參考既有產品的使用者評論以定義問題。

除了團隊研究外,我個人也執行了次級研究,透過媒體報導等管道,初步了解長者使用數位產品時,因年齡增長所帶來的生理和心理障礙。自主研究幫助我代入長者的視角,模擬訂餐時長者可能遭遇的困難與阻礙。

現有問題

提供無效資訊:先註冊後訂餐,延遲告知服務範圍引發的憤怒

在原產品的設計中,使用者需要先完成註冊才能開始訂餐。因此使用者只能在完成註冊後,才能輸入地址確認自身是否位於服務範圍內;當系統顯示使用者不在服務範圍時,使用者通常是錯愕又憤怒,無法理解產品強制要求不在服務範圍內的使用者註冊使用,因而產生不少負面評價。

使用者在App Store上抱怨舊版設計,填寫個資後才得知所在地區無提供服務。

現有問題

重複N次的迴圈:訂N天餐點需重複N次的下單操作

許多子女習慣在每月初為長者一次性訂購當月的餐點,市面上的訂餐模式卻以單次訂餐為主。舉例來說,阿猜嬤的子女預計為阿猜嬤訂購未來30天的午餐,月初就必須在系統中重複執行30次的下單操作。多數子女為了避免麻煩,還是選擇回歸傳統的送餐體系,直接預定一個月份的餐點。

現有問題

下一步嚇一跳:功能與流程不符合長者過往的使用經驗

「想要的功能不在我預期的位置」、「點下一步後突然跳出彈窗」這是在我們研究過程中,受訪長者們最常抱怨的問題。

為追求介面簡潔,許多產品採用較複雜的資訊架構,將功能設計在選單深處,造成長者們在尋找功能時,容易迷失在各個頁面和選單之中。

「想要的功能不在我預期的位置」、「點下一步後突然跳出彈窗」這是在我們研究過程中,受訪長者們最常抱怨的問題。

為追求介面簡潔,許多產品採用較複雜的資訊架構,將功能設計在選單深處,造成長者們在尋找功能時,容易迷失在各個頁面和選單之中。

在原先的設計中,所有操作選項都收納在左上選單中,沒有叫出選單就無法執行下一步的操作。

在流程上,受訪長者們因為缺乏大量的數位產品使用經驗,無法預期和快速熟悉新產品的操作流程。因此每次操作不熟悉的APP時,內容簡短又模糊的按鈕搭配不停跳轉的頁面,總是讓長者們如履薄冰,擔心自己操作錯誤。

在原先的設計中,點擊付款方式後,會立即跳轉至第三方支付頁面,無法重新選擇。

現有問題

不受關注的需求:便當菜色選擇少,外送平台營養資訊標示不足

長者常因慢性病導致在飲食上多有禁忌,無法簡單取得所需的餐點常造成長者在家自行隨意烹調或購買過度加工的即食調理包,營養不均衡又導致病況進一步惡化。

傳統送餐或共餐服務受限於人力與經費,難以提供客製化的餐點符合特定長者需求,可能因長者挑食或必須避開某些餐點造成營養不均衡,甚至是不肯用餐的問題。

長者常因慢性病導致在飲食上多有禁忌,無法簡單取得所需的餐點常造成長者在家自行隨意烹調或購買過度加工的即食調理包,營養不均衡又導致病況進一步惡化。

傳統送餐或共餐服務受限於人力與經費,難以提供客製化的餐點符合特定長者需求,可能因長者挑食或必須避開某些餐點造成營養不均衡,甚至是不肯用餐的問題。

傳統共餐服務雖然提供營養餐點,然而菜色固定無法依照長者的口味和健康狀況調整內容。

現有外送平台雖提供足夠的多樣化選擇,但為了吸引使用者下單,在內容上主打精緻的食物圖片,未著重在標示營養成分,因此難以確認餐點是否符合長者的營養需求。

其他競品為提升下單量,內容以精緻的食物圖片為主,但我們的使用者更在意餐點的適口性和營養成分。

發現與洞察

操作應該直覺無須教學,先瞭解使用者的日常經驗再設計

在執行設計前,為了瞭解何謂長者「好理解」的流程與介面,我執行了使用者訪談,同步搜集統計資料,目的是從使用者的日常經驗中,發掘具體的衡量標準。

首先,在使用數位產品時,長者多半是採用「線性」方式記憶操作方式。因此我們盡量將資訊架構控制在兩層以內,且不在單一流程中將使用者導引到其他功能。

此外,缺乏上下文的按鈕,例如「上/下一步」、「確定」和「取消」,也是令長者害怕的設計。因為缺乏數位經驗,長者們較難預期點擊按鈕後接續發生的事件,因此我們在按鈕中必須盡可能明確的敘述,幫助使用者了解點擊後將會產生的變化。

最後,長者習慣將單一頁面視為整體,當頁面上存在過多無法理解的資訊,將提升決策的困難度。看不懂的內容並不會被略過,反而促使長者懷疑原先直覺的操作,擔心那些看不懂的內容中包含重要資訊。

設計策略

「連阿嬤都會」的訂餐體驗:可以用一句話解釋的功能

為了打造連八十歲的阿嬤也可以理解訂餐的方法,我們以「可以用一句話解釋」作為標準,來衡量流程和介面的易懂性。當我們的設計無法用一句話解釋時,代表複雜性過高,必須換個方式呈現或捨棄。

為了打造連八十歲的阿嬤也可以理解訂餐的方法,我們以「可以用一句話解釋」作為標準,來衡量流程和介面的易懂性。當我們的設計無法用一句話解釋時,代表複雜性過高,必須換個方式呈現或捨棄。

功能上優先協助子女用戶完成訂餐,流程介面朝長者友善的方向設計

在產品功能方面,我們的核心價值是減輕代訂餐者的日常訂餐負擔,因此專注於設計能夠幫助子女更輕鬆的為長者訂餐的新功能。我們也從研究中發現,現有平台提供的訂餐功能已滿足自行訂餐者的需求,更多的新功能不僅無法確定其帶來的價值,更增加長者用戶自行訂餐的學習成本。

在流程介面方面,我們依循訪談的結果朝長者友善的方向設計。因為我們得知長者用戶在使用其他競品時,最普遍的問題便是難以理解或記憶訂餐流程和介面,長者們更加偏好線性的使用流程。因此在流程上我們盡量以容易理解的文字進行引導,介面上則盡量將重要功能呈現於同一頁面中,而非一味追求畫面的精簡。

在產品功能方面,我們的核心價值是減輕代訂餐者的日常訂餐負擔,因此專注於設計能夠幫助子女更輕鬆的為長者訂餐的新功能。我們也從研究中發現,現有平台提供的訂餐功能已滿足自行訂餐者的需求,更多的新功能不僅無法確定其帶來的價值,更增加長者用戶自行訂餐的學習成本。

在流程介面方面,我們依循訪談的結果朝長者友善的方向設計。因為我們得知長者用戶在使用其他競品時,最普遍的問題便是難以理解或記憶訂餐流程和介面,長者們更加偏好線性的使用流程。因此在流程上我們盡量以容易理解的文字進行引導,介面上則盡量將重要功能呈現於同一頁面中,而非一味追求畫面的精簡。

以終為始,擬定小目標作為設計指引

總結上述發現,我以三個核心問句拆解「連阿嬤都會」的設計目標,構成設計指引:

總結上述發現,我以三個核心問句拆解「連阿嬤都會」的設計目標,構成設計指引:

如何幫助訂餐者了解現在的狀況?

如何幫助訂餐者了解現在的狀況?

如何引導訂餐者進行下一步動作?

如何引導訂餐者進行下一步動作?

現在提供的資訊是否適量?

現在提供的資訊是否適量?

設計成果

從無到有:Landing Page分流使用者,提供有效的資訊給對應族群

為了解決在原版設計中,使用者註冊完成後才發現不在服務範圍內,引發騙取個資的疑慮。我們決定在使用流程的開端就依「提供服務與否」分流使用者,將其引導至對應頁面提供有效的資訊,並轉化為願意下單的訂餐用戶。

為此我們新增設計了Landing Page,考量到餐飲外送受限於線下可提供服務的範圍與量能,又因銀色大門在許多地區尚未開始提供服務,我們以輸入的地址初步區分為「已開發地區」和「待開發地區」的使用者。除了幫助使用者取得有效的對應資訊,銀色大門也可以藉使用者輸入的地址從後台了解各地區的送餐需求,並主動開發需求度高的地區。

為了解決在原版設計中,使用者註冊完成後才發現不在服務範圍內,引發騙取個資的疑慮。我們決定在使用流程的開端就依「提供服務與否」分流使用者,將其引導至對應頁面提供有效的資訊,並轉化為願意下單的訂餐用戶。

為此我們新增設計了Landing Page,考量到餐飲外送受限於線下可提供服務的範圍與量能,又因銀色大門在許多地區尚未開始提供服務,我們以輸入的地址初步區分為「已開發地區」和「待開發地區」的使用者。除了幫助使用者取得有效的對應資訊,銀色大門也可以藉使用者輸入的地址從後台了解各地區的送餐需求,並主動開發需求度高的地區。

Landing Page 明確的邀請使用者輸入地址,藉此區分使用者並給予對應的有效資訊。

「已開發地區」的使用者在輸入地址後,可以直接進入訂餐首頁,直到要將餐點加入購物車時,才需要註冊或登入,以求在最低限度的干擾下,提供使用者了解產品的機會。

「已開發地區」的使用者在輸入地址後,可以直接進入訂餐首頁,直到要將餐點加入購物車時,才需要註冊或登入,以求在最低限度的干擾下,提供使用者了解產品的機會。

在將餐點加入購物車前,系統才會要求使用者登入,提供非既有使用者隨意瀏覽的機會。

「待開發地區」的使用者在輸入地址後,則會被引導至暫時無法提供送餐的頁面。在該頁面中,我們不僅只告知無法提供服務,我們更鼓勵使用者填寫表單幫助銀色大門開發其所在地區,積極尋求擴大服務範圍的任何機會。

「待開發地區」的使用者在輸入地址後,則會被引導至暫時無法提供送餐的頁面。在該頁面中,我們不僅只告知無法提供服務,我們更鼓勵使用者填寫表單幫助銀色大門開發其所在地區,積極尋求擴大服務範圍的任何機會。

儘管無法提供服務,我們仍設計按鈕方便使用者快速申請送餐,把握每個拓展送餐地區的機會。

▼ 點擊查看設計思路

▼ 點擊查看設計思路

▼ 點擊查看設計思路

設計成果

從N到1:一次下單訂購多天餐點,幫助使用者省時的簡化設計

我們注意到子女習慣在每月初與長者討論並訂購未來一個月的餐點,因此設計了「多天訂餐」的功能,允許使用者在購物車內添加多天的餐點,添加完成後可以一併結帳。

舉例來說,若使用者過往習慣在主流外送平台使用預訂點餐為長者訂餐,同樣訂購未來30餐,我們的設計可以省下29次重複的結帳流程。

另外考量到合併結帳不易確認送餐的日期,我們在結帳頁面中設計了「送餐日曆」。以日曆方式呈現當次結帳的訂餐日期,幫助使用者在付款前再次確認送餐日期的正確性。

我們注意到子女習慣在每月初與長者討論並訂購未來一個月的餐點,因此設計了「多天訂餐」的功能,允許使用者在購物車內添加多天的餐點,添加完成後可以一併結帳。

舉例來說,若使用者過往習慣在主流外送平台使用預訂點餐為長者訂餐,同樣訂購未來30餐,我們的設計可以省下29次重複的結帳流程。

另外考量到合併結帳不易確認送餐的日期,我們在結帳頁面中設計了「送餐日曆」。以日曆方式呈現當次結帳的訂餐日期,幫助使用者在付款前再次確認送餐日期的正確性。

在結帳頁面一次訂購多餐,點擊右上角的查看送餐日曆,可以查看當次結帳的送餐日期。

同時我們也設計了自動配餐的功能,依照使用者設定的食材和營養素偏好推薦餐點,並分配至選定的日期區間。使用者只須檢視推薦餐點是否符合需求,再調整不符所需的餐點即可完成訂餐,大大降低子女為長者訂餐的時間成本。

同時我們也設計了自動配餐的功能,依照使用者設定的食材和營養素偏好推薦餐點,並分配至選定的日期區間。使用者只須檢視推薦餐點是否符合需求,再調整不符所需的餐點即可完成訂餐,大大降低子女為長者訂餐的時間成本。

選擇自動配餐後,系統會依照設定條件將合適的餐點加入購物車中,同時保有自行選餐的自由。

▼ 點擊查看設計思路

▼ 點擊查看設計思路

▼ 點擊查看設計思路

設計成果

創造既視感:參考長者常用App,降低學習門檻同時增加使用者信心

在整體版面上,為了創造長者所熟悉的操作體驗,我們依據網路統計資料及訪談結果,研究長者們最常用的App,包含Line與Youtube,最終決定以底部導覽列(Navigation bar)為基礎進行設計。

在整體版面上,為了創造長者所熟悉的操作體驗,我們依據網路統計資料及訪談結果,研究長者們最常用的App,包含Line與Youtube,最終決定以底部導覽列(Navigation bar)為基礎進行設計。

主要功能皆集中在底部導覽列,符合長者們在常用App養成的使用習慣。

在流程上,我們主要改善整體網站的用詞以及當前狀態的提示,以更簡單易懂的方式將每個操作會產生的變化和後果預先傳達給訂餐者。舉例來說,我們在多步驟設定的流程中加上階段指示(Steppers),幫助訂餐者了解正在進行的操作,同時預告待完成的操作。

頁面上方的階段指示(Steppers)可以避免長者迷失在一連串的操作中。

▼ 點擊查看設計思路

▼ 點擊查看設計思路

▼ 點擊查看設計思路

設計成果

所見即所得:以食材和營養素分類餐點,幫助使用者快速選擇餐點

在訂餐首頁我們以「餐點」為主軸,不同於主流平台以「餐廳」為主的呈現方式。主要是考量長者選擇餐點以食材(例如雞肉或白肉魚)和營養素(例如高鈣食物或植物蛋白)為決策起點,直接呈現餐點可以一次呈現多樣化的菜色與清楚的營養標示,幫助使用者快速決定每日餐食。

訂餐頁面直接呈現餐點和營養標籤,節省訂餐者點進不同餐廳菜單尋找餐點的時間。

▼ 點擊查看設計思路

▼ 點擊查看設計思路

▼ 點擊查看設計思路

最終設計

主要頁面與設計亮點

專案總結

如期交付設計稿,專案結束是總結與反省設計的開始

在向銀色大門團隊交付設計稿後,我們的設計工作告一段落,後續交由銀色大門的開發團隊完成程式開發與上架,因此短期內我們暫時無法得知設計對產品的影響。

然而我們並未因此停下腳步,在設計完成後進行了內部檢討會議,檢視設計過程當中的卓越與不足之處,為下一次的合作與迭代設計做準備。

反思與學習

以溝通取代來回修改,與利害關係人同步資訊降低外部溝通成本

在設計期間,我與銀色大門團隊保持密切聯繫,每天都會以書面方式整理當天設計遇到的問題,向銀色大門提問和討論潛在的解決方案,包含後台訂單系統的處理邏輯,以及餐費與送餐服務費的帳務處理等議題。

這些討論讓我們在設計時,可以更全面衡量流程與介面是否符合系統邏輯,同時清楚呈現重要資訊給訂餐者。

保持資訊同步也幫助我們減少與利害關係人間對產品期望的落差,會議時因為雙方了解設計的整體脈絡,更能聚焦在迭代的優化方向,減少討論設計存廢的次數,節省迭代所需的時間與人力成本。

反思與學習

各階段投入的時間成本不均,為配合設計時程所增加的迭代成本

儘管我們與銀色大門團隊間保持良好的外部溝通,卻未以同等程度進行內部溝通。

為配合排定的設計時程,在繪製線框稿時,我們未投入足夠的時間融合不同的設計。雖然每個頁面我都會同時繪製三至四個版本,但會議中通常僅選定一版執行,缺乏各版本間截長補短的討論。

因此進入精稿階段後,儘管變動部分多是曾發想過的流程或功能,但因為需要同時考量排版與色彩,仍增加更新頁面的人力成本。

我從這項經驗學到的是,適時調整設計時程,可以減少後期因應變動重新繪製精稿的工作量。以此次經驗為例,如果我們靈活的調整在各階段投入的時間成本,在設計初期就投入較多時間探索不同的可能性,後期就可以投入更多心力在完善設計文件之中,提升成員每單位時間可以發揮的效益。

反思與學習

利用合適的載體傳達設計思路,暫時不被理解也不放棄的嘗試表達

為了同步團隊成員的認知,找尋適當的表達方式相當重要。在爭取新增設計Landing Page作為產品首頁的過程中,我曾重複嘗試三次不同形式的提案,才獲得團隊理解並支持這項設計。

這三次提案並非一帆風順,我曾嘗試以口頭和文字報告傳達我的設計思路,卻都無法讓主設計師理解,直到加上線框稿以及其他產品的參考圖例作為輔助說明後,才成功讓主設計師認同我的思路。

在爭取的過程中,我了解到因為每個人的背景和經驗差異,對於同一名詞可能產生不同的想像。同樣是Landing Page,主設計師的認知是展示靜態資訊的頁面;但在我的認知中,它是可以引導使用者輸入地址、驗證服務範圍的重要頁面。

當無法有效的傳達想法給他人時,有彈性的快速調整表達方式,並且持續嘗試溝通直到互相理解,我相信都能獲得他人尊重與認同。

若有任何參與設計的機會,歡迎隨時與我聯繫 💬

© Shanyu Huang 2025 Copyright.

若有任何參與設計的機會,歡迎隨時與我聯繫 💬

© Shanyu Huang 2025 Copyright.

若有任何參與設計的機會,歡迎隨時與我聯繫 💬

© Shanyu Huang 2025 Copyright.