Project Background
Petite Pause「小憩」是一個以手作流心餅乾為核心的概念甜點品牌。網站需要將品牌氛圍、商品特色與購買流程整合成清楚且具吸引力的電商體驗。
UI/UX DESIGN
Petite Pause Cookie Website Design
小憩流心餅乾
電商網站設計
以「在忙碌生活中，留一刻給自己」為品牌概念，設計流心餅乾電商介面。首頁以單一商品主視覺呈現品牌與產品，風味分類則支援口味探索與商品比較。
ROLE
UI/UX Designer · Visual Designer
TIMELINE
4 Weeks
TOOLS
Figma · Photoshop · Illustrator
PROJECT OVERVIEW
專案概覽
Target Audience
本概念案設定的目標受眾為 20–35 歲、關注甜點與生活質感的族群，設計方向聚焦於快速探索口味並理解商品差異。
Project Goal
建立具品牌識別的甜點電商網站，降低使用者探索不同口味時的資訊成本，並透過清楚分類、商品資訊與購買流程提升流暢度。
My Responsibility
負責 UI/UX 設計，包含使用情境規劃、資訊架構、商品分類策略、Responsive Design 與 Design System。
DESIGN INSIGHTS
設計洞察
使用者痛點 Pain Points
口味不好找
Flavor Discovery
商品選擇多，若缺少清楚導購，使用者難以快速找到符合偏好的口味。
風味難想像
Taste Uncertainty
線上無法實際試吃，需要透過圖片與風味描述建立味覺與口感預期。
商品差異不明
Difficult Comparison
相似商品特色不易辨識，增加比較不同口味與選擇商品的時間。
購買理由不足
Purchase Confidence
除了口味與價格，使用者也需要理解原料、製作與品牌價值，才更安心下單。
使用者旅程 User Journey
探索商品
被商品吸引並了解品牌與口味
找到偏好
依風味與系列縮小選擇範圍
比較選擇
比較口味、內餡、價格與特色
確認購買
確認商品資訊與購買條件
完成結帳
確認配送與付款後完成購買
DESIGN DECISIONS
設計決策
INSIGHT
先建立食慾與品牌辨識，使用者進入甜點電商時，通常會先看見「看起來好不好吃」以及「這是不是我喜歡的品牌」。
DESIGN DECISION
將 Hero 聚焦在單一流心餅乾主視覺，減少不必要資訊，讓產品本身成為第一視覺焦點，同時以品牌字樣、色彩與留白建立 Petite Pause 的識別感。
UI APPLICATION
以大型流心餅乾攝影、與焦糖品牌色建立 Hero，搭配簡短 CTA，讓使用者在第一眼先被商品吸引，再自然進入後續探索。
INSIGHT
甜點商品常有多種口味，但使用者未必熟悉每個商品名稱，真正影響選擇的往往是「我今天想吃清爽、濃郁，還是療癒一點的口味」。
DESIGN DECISION
不只用商品名稱分類，而是加入以風味與情緒感受為核心的探索方式，幫助使用者先縮小選擇範圍，再進一步認識商品。
UI APPLICATION
透過 Find Your Flavor 將商品分為 Calm、Cozy、Clean 三個系列，搭配產品大圖、風味關鍵字與簡短描述，降低使用者逐一閱讀商品的負擔。
INSIGHT
當商品數量增加後，使用者需要快速比較口味、價格與特色。如果每張商品卡的資訊層級不一致，或需要反覆進入商品頁確認，會提高選擇成本。
DESIGN DECISION
建立一致的商品卡片架構，並加入篩選與排序機制，讓使用者可以先縮小範圍，再快速比較不同商品。
UI APPLICATION
商品列表統一呈現圖片、系列、名稱、風味、價格與購買 CTA，左側加入系列、風味與飲食偏好篩選，讓使用者能在同一頁完成探索與比較。
INSIGHT
加入購物車後，使用者最需要確認的是「我買了什麼、數量對不對、總金額是多少」。如果資訊分散或修改操作不直覺，容易在結帳前產生猶豫甚至離開。
DESIGN DECISION
將商品確認與訂單摘要集中在同一畫面，讓使用者能快速檢查內容、調整數量並理解總金額，再決定是否進入結帳。
UI APPLICATION
購物車以商品列表與訂單摘要的雙欄結構呈現，整合商品圖片、數量調整、價格、運費與總計，並以明確的「前往結帳」CTA 建立下一步行動。
DESIGN OUTCOME
設計成果
0%
Summary
串連品牌探索、口味分類、商品比較與購物車資訊，讓使用者能沿著同一流程查看商品並確認訂單。Responsive Design 對應不同裝置的瀏覽版面，同時延續 Petite Pause 的品牌視覺。
DESIGN SYSTEM
設計系統
BRAND APPLICATION
品牌情境應用
