Eat Now外送點餐平臺介面設計
時間|2023.Jul.
UI設計線上實戰營 作業練習
為了想精進自己的 UI 設計能力,我在2023年6月底參加了 AAPD 所策劃的第一屆線上實戰營,透過約4週的課綱學習與作業練習,雕琢設計細節與 Figma 技能。
作業主要以外送點餐平臺為主題核心做延伸,課堂中提供了網頁、手機介面的 Wireframe 模板,供學員們練習轉換 UI Mockup 的設計能力,並引導使用顏色、元件、資訊架構、視覺層級等方式來思考產品端的設計,在紀錄的同時藉此確保過程不偏離所設定的概念與方向進行設計練習。
自己在第一週實作過程中,搭配「黃金圈理論」應用在思考資訊架構的設定上 —
‧ 在平臺資訊架構與功能的部分,自己以黃金圈理論( Why-How-What )做了小發想:
1
Why — 為什麼要飲食

→ 滿足生理、心理需求。
2
How — 如何選擇飲食

→ 現代物資相對不匱乏,選擇性也多元多樣化
在生理需求上較不受威脅(不用擔心沒食物可吃)
於是心理需求是現代選擇上的焦點。
3
What — 什麼樣的因素會影響飲食選擇


(1) 外在環境(偏生理):人在不同的地區與氣溫、季節下,對飲食的選擇會有所調整。
ex.氣溫炎熱偏好酸辣開胃、清涼消暑的飲食;氣溫寒冷偏好暖身進補、高熱量食物;
各種季節的當令蔬菜(大自然的饋贈)
(2) 特殊節慶(偏心理):各地區有不同的特殊節慶,對應文化孕育出不同的美食。
ex.端午粽子、中秋烤肉、感恩烤雞、番茄節、啤酒節等
(3) 個人狀態,選擇的最大因子(生理/心理):
ex.想爆吃、想走健康路線、素食者、想吃甜食撫慰心靈、看別人推薦的美食也想嘗試。
(大數據:87%的使用者近期買了OOO都說讚、演算法)、接收行銷訊息等
‧ 收斂—回歸題目
根據使用者所在的地區,搭配季節與氣溫/節慶來即時提供可能的飲食偏好資訊推薦,
因此規劃在平台頁面加入季節(夏天)這項參考條件,推播夏季熱門消暑餐點,
並在側邊欄位加入了「你今天偏好...」功能,提供冷食(預設)/熱食/不限的選項給使用者進行點選,
系統經由篩選結果顯示符合的推薦餐點。


‧ 在外送首頁平臺側邊欄位加入「你今天偏好」功能
第二、三週則延伸進入餐廳主頁面與餐點內容頁面,同時練習 Figma 的相關工具,例:Auto Layout / Components / Variant 相應的功能使用,讓元件之間的排版、整理更好上手,以及 UI 流程圖、標註工程規格,最後將一至三週的頁面串聯成可互動的 Prototype。

‧ 外送首頁平臺、餐廳主頁面、餐點內容頁面串聯可互動的 Prototype
這次的作業練習僅是產品當中的一小部分,如何更加優化產品使用與維持整體性,是需要持續去吸收新知與調整設計思維,以便後續的維護與迭代能順利推行。

‧ EatNow 外送點餐平臺作業練習 Mockup
© 2024 Ching Lin. All rights reserved.
Crafted with 50% Passion, 30% Focus, and 20% Innocence.