PAPAWASH
主導日系保養品牌「papawash」官方網站的全面改版與視覺重塑。與行銷及 IT 團隊協作梳理資訊架構，統籌從全站 UI/UX 動線、購物車結帳流程到各版位視覺 Banner；獨立制定介面動態呈現與 UI 設計規範，協同工程團隊精準落地，打造兼具日系純淨美感與直覺流暢的電商體驗。
COMPANY
PAPAWASH
DESIGN YEAR
2022
ROLE
Visual Designer
UI/UX
UI/UX
Skill Tools
Illustrator
Photoshop
Photoshop
01
Overview
專案概述
Legacy Issues
舊站痛點
- 結構過時、動線斷裂分類層級不直覺，使用者需經歷多次跳轉才能找到目標商品。
- 操作不易、維護成本高缺乏統一的介面規範，各區塊排版缺乏標準，不利後續檔期更新。
Goals
改版目標
- 資訊結構扁平化縮短購買路徑，從進站到加入購物車更直覺。
- 介面現代化與系統化導入標準化 Design System，確保全站視覺一致並提升後續迭代效率。
My Role
負責項目
Collaboration
跨部門協作
與行銷 Marketing
共同討論網站整體架構與頁面呈現方式，並明確首頁主力推薦品（酵素洗顏系列）與檔期 Banner 的版位比重，兼顧美感與促銷彈性。
與 IT Developer
共同檢視資訊架構，確立元件復用性與網頁動態載入的效能限制，並對齊動態規格落地實作。
- 01需求梳理
- 02資訊架構
- 03Wireframe
- 04UI Kit
- 05視覺設計
- 06開發協作
02
Information Architecture
資訊架構
Core User Flow
- 首頁活動入口・分類導航
- 商品列表瀏覽系列商品
- 商品詳情成分・規格・購買 CTA
- 加入購物車進入結帳流程
首頁Home
- 最新消息News
- 優惠活動
- 最新消息
- 季節限定
- 全系列商品Products
- 商品列表
- 商品頁
- 關於我們About
- 會員中心Member
- 註冊／登入
- 訂單查詢
- 購物車Cart
- 購物車
- 填寫資料
- 訂單確認
03
Wireframe
線框稿以低保真線框先確認版面配置與資訊層級，再進入視覺設計。
04
UI Kit
設計規範以品牌既有標準色為核心，拓展全站色彩體系、文字階層與元件規範，作為設計、行銷與工程協作的共同語言。
Colors
Primary#003894品牌標準色・主要按鈕・品牌識別
Accent#DB0031特價標籤・促銷警示
Neutral#808080輔助文字
Neutral#DDDEE1邊框線條
Neutral#EBEBED區塊底色
Neutral#FFFFFF頁面・卡片
Neutral#000000內文
Typography
Noto Sans TC
Light 黑體Regular 黑體Medium 黑體Bold 黑體
Arial
Regular AaBold AaBlack Aa
28px22px18px16px
Icons
Components
NT$770NT$655
限量限定販售
−1+
Components
05
Key Screens
主要頁面延續日系純淨調性，以大面積留白與品牌標準色建立識別；首頁 Banner 依 Design System 延伸各檔期視覺，並規劃輪播切換、載入淡入與按鈕懸停等微互動。首頁長頁面可滑鼠移入自動捲動瀏覽。
swipe左右滑動看更多
swipe左右滑動看更多
06
Checkout Flow
結帳流程將結帳拆為三個步驟並以進度條提示所在位置，依付款方式（信用卡／ATM 轉帳）呈現對應的完成資訊。
- 1購物車Cart
- 2填寫資料Information
- 3訂單確認Confirmation
07
Impact & Learnings
專案價值與反思
Impact
提升維護效率
藉由導入 Design System，縮短後續行銷 Banner 製作與工程端套版的時間。
Impact
跨職能溝通優化
透過可視化的流程圖與動態規範，降低行銷、設計與 IT 三方的認知落差。
Learnings體會到「系統化思維」對電商網站的重要性——單純做視覺美化，不如先建立嚴謹的元件與色彩系統，更能為產品帶來長遠價值。
