Project Background
本概念案聚焦線上選購植栽時商品多、資訊分散與比較不易的情境。 因此整理商品分類、規格與購買流程， 並規劃會員中心供購後查看訂單與管理資料。
UI/UX DESIGN
GreenGleam Plants Website Design
綠拾光植栽
官網設計
依「綠意蔓延・品味自然」的概念方向，設計植栽電商介面，整合商品探索、購物流程與會員功能；以植栽情境和品牌綠呈現主題，並以分類與規格資訊支援瀏覽和比較。
ROLE
UI/UX Designer · Visual Designer
TIMELINE
6 Weeks
TOOLS
Figma · Photoshop · Illustrator
PROJECT OVERVIEW
專案概覽
Target Audience
本概念案設定的目標受眾為喜愛植物與居家佈置的消費者， 以及希望快速挑選合適植栽的入門族群。
Project Goal
兼顧品牌質感與購物效率， 讓使用者能快速找到商品、 掌握資訊並順利完成購買。
My Responsibility
負責 UI/UX 設計，包含網站架構、使用流程、 介面視覺與 Responsive Design，涵蓋首頁、商品、 購物車、結帳及會員系統。
DESIGN INSIGHTS
設計洞察
使用者痛點 Pain Points
商品難找
Information Overload
商品種類多，缺乏清楚分類時容易迷失， 增加尋找合適植栽的時間。
資訊難比較
Difficult Comparison
商品外觀與資訊相似，使用者不易 快速比較差異並做出選擇。
選購有疑慮
Purchase Uncertainty
線上無法實際查看植物，使用者需要 更清楚的商品資訊輔助判斷。
手機難瀏覽
Mobile Friction
商品資訊量較多，在小螢幕上容易顯得擁擠， 增加瀏覽與操作負擔。
使用者旅程 User Journey
尋找商品
快速找到想看的植物
瀏覽比較
查看商品與價格
確認商品
了解規格與細節
加購物車
確認數量與商品
完成結帳
快速完成購買
DESIGN DECISIONS
設計決策
建立鮮明的品牌入口
INSIGHT
植栽電商需要在第一眼建立自然、清新的品牌印象， 同時讓使用者快速理解網站定位。
DESIGN DECISION
以植栽情境主視覺與品牌綠呈現自然主題， 再用首頁層級與 CTA 將視線帶向商品探索。
UI APPLICATION
Hero 結合品牌標語「綠意蔓延・品味自然」與明確 CTA， 引導使用者開始探索商品。
平衡商品導購與品牌內容
INSIGHT
電商網站除了快速找到商品，也需要傳達品牌特色， 避免整體體驗只剩商品陳列。
DESIGN DECISION
將商品探索與品牌故事交錯安排， 在購物效率與品牌形象之間取得平衡。
UI APPLICATION
透過 GO SHOPPING 商品分類與 ABOUT US 品牌內容， 讓使用者從選購自然延伸至品牌認識。
簡化購買決策與結帳流程
INSIGHT
線上購買植物無法實際查看商品， 清楚的商品資訊與購買流程會直接影響使用者的決策。
DESIGN DECISION
集中商品資訊與購買操作， 並簡化從商品確認到結帳的操作路徑。
UI APPLICATION
整合商品圖片、規格、數量與 CTA，並延續至購物車與結帳頁， 建立連續且清楚的購買流程。
延伸購買後的會員體驗
INSIGHT
完成購買後，使用者仍需要查看訂單與管理個人資料。
DESIGN DECISION
將會員資訊與訂單紀錄集中在會員中心， 讓購後管理有固定入口。
UI APPLICATION
透過會員中心集中管理個人資料與訂單， 延續購買後的使用體驗。
DESIGN OUTCOME
設計成果
完成涵蓋商品分類、商品資訊、購物車、結帳與會員中心的響應式植栽電商介面，並以植栽情境和品牌綠延續視覺主題。
0%
Summary
跨裝置一致體驗
針對手機調整導覽、商品排列與資訊層級，而非單純縮小桌機畫面；保留品牌視覺及商品瀏覽、購物車與結帳等核心功能，對應小螢幕的瀏覽與操作。
DESIGN SYSTEM
設計系統
BRAND APPLICATION
品牌情境應用
