Project Background
本概念案以天然水晶手鍊與能量飾品作為商品設定， 聚焦商品差異、功效資訊與選購路徑如何在網站中呈現； 因此將品牌入口、商品探索與水晶知識納入同一瀏覽脈絡。
UI/UX DESIGN
Serene Gems Website Design
澄境晶石
網站設計
本概念案以水晶選購資訊的呈現為設計情境，整理商品分類、功效資訊與購物流程；並以自然、療癒的視覺語言建立品牌識別，連結商品探索與知識內容。
ROLE
UI/UX Designer · Visual Designer
TIMELINE
4 Weeks
TOOLS
Figma · Photoshop · Illustrator
PROJECT OVERVIEW
專案概覽
Target Audience
本概念案設定的目標受眾為 20–40 歲、重視生活質感與自我療癒的消費者， 包含水晶愛好者，以及對水晶功效、送禮或日常配戴有興趣的初次購買者。
Project Goal
透過清楚的商品分類、功效資訊與視覺層級，降低挑選水晶的理解成本，同時建立自然、療癒且具有質感的品牌印象。
My Responsibility
負責 UI/UX 設計，包含網站架構、資訊層級、購物流程、Wireframe、 UI Design、Responsive Design 與 Design System，並統整電商介面的品牌視覺。
DESIGN INSIGHTS
設計洞察
使用者痛點 Pain Points
不知道怎麼挑
Choice Overload
水晶種類與功效繁多，即使知道自己的需求，也難以快速判斷哪一款真正適合自己。
功效差異難懂
Info Uncertainty
不同水晶功效描述相似，缺乏清楚的用途與情境說明，難以理解實際差異。
商品難以比較
Difficult Comparison
相似商品在晶石、寓意與價格上各有差異，資訊分散，增加比較與選擇時間。
擔心品質真假
Trust Barrier
僅靠圖片難以確認水晶材質與品質，缺乏透明資訊時，容易降低購買信心。
使用者旅程 User Journey
探索需求
了解自身需求尋找適合方向
找到水晶
依功效與情境縮小選擇範圍
比較選擇
比較品項、寓意價格與款式
確認購買
確認商品資訊與購買條件
完成結帳
確認配送與付款快速完成購買
DESIGN DECISIONS
設計決策
建立品牌氣質與商品入口
INSIGHT
使用者第一次進入網站時，會先判斷「這裡賣什麼、適不適合我」。若品牌形象與商品入口不夠明確，即使視覺吸引人，也可能因找不到下一步而離開。
DESIGN DECISION
建立品牌氛圍與商品入口，讓使用者在認識 Serene Gems 的同時，也能立即開始探索適合自己的水晶。
UI APPLICATION
以品牌代表性水晶主視覺，並將商品推薦緊接於 Hero 下方，縮短從「認識品牌」到「瀏覽商品」的操作距離。
平衡選購引導與品牌信任
INSIGHT
水晶不只是外觀選擇，使用者也會在意材質、寓意與配戴感受；若只有商品照片與價格，很難判斷「為什麼適合自己」，也不容易建立信任。
DESIGN DECISION
在商品之外補足使用者做決定需要的資訊，透過品牌特色、晶石知識與生活情境，協助理解商品價值。
UI APPLICATION
以圖像、短文案與情境照片分段呈現天然材質、品牌特色與水晶寓意，讓資訊容易掃讀，同時維持療癒、自然的品牌氛圍。
建立一致的商品瀏覽結構
INSIGHT
當商品數量增加時，使用者最需要的是快速看懂「有哪些選擇、彼此差在哪裡」。若資訊層級不一致，必須反覆進入商品頁才能比較，容易增加挑選負擔。
DESIGN DECISION
建立一致的商品瀏覽結構，讓使用者能先縮小範圍，再透過關鍵資訊快速比較不同水晶。
UI APPLICATION
統一商品卡片的圖片、名稱、類型與價格層級，搭配分類與篩選功能，使使用者能在同一頁完成瀏覽、比較與初步選擇。
以內容導購降低初次購買不確定
INSIGHT
初次接觸水晶的使用者，常不知道不同晶石的特色、配戴方式或如何選擇；若網站只負責販售商品，很難解除購買前的不確定感。
DESIGN DECISION
將購買前常見疑問轉化為容易閱讀的知識內容，讓使用者在購買前先獲得判斷依據，逐步建立對品牌與商品的信任。
UI APPLICATION
以文章分類、圖片與摘要建立內容入口，讓使用者能依興趣快速找到水晶功效、配戴與挑選相關資訊，並自然銜接後續商品探索。
DESIGN OUTCOME
設計成果
完成包含品牌入口、商品分類與比較、晶石知識內容及響應式畫面的電商介面設計，將商品資訊與內容導覽連結。
0%
Summary
從理解到安心選購
依水晶選購情境整理「理解需求、探索商品、比較差異」的瀏覽順序，並將商品資訊與晶石知識內容連結，呈現各階段所需的資訊。
介面涵蓋品牌入口、商品瀏覽與知識內容，並以商品分類、篩選與關鍵資訊呈現不同水晶的選擇與差異。
DESIGN SYSTEM
設計系統
BRAND APPLICATION
品牌情境應用
