Jianing Hou Jianing Hou

Cello Cello

User Experience & Interface design
year
2018
client
Cello Cello (by 17 Media)
website
[link]
Skills
Sketch, Axure, Zeplin

User Experience

  • 參考市面上已有的後台設計，像是Shopline、Shopify、Opencart等
  • 與實際使用者（團隊其他成員）做訪談，確認原系統的痛點及期望需求
  • 釐清電商的工作流程及運作邏輯，確認設計是否符合工作人員所需
  • 與前台設計師持續討論和協作，確認兩端設計及資料可銜接
  • 依照需求文件繪製wireframe和flow

Interface Design

  • 蒐集現有的相關介面設計作品，並加以整理
  • 依照品牌現有視覺，以後台使用者為主考量，最終產出UI guideline
  • 依照wireframe、flow和guideline繪製出後台所有介面完整之UI
  • 和前後端工程師協作，調整及確認成品與設計稿無落差

Wireframe & Flow

Guideline

Guideline設計以CelloCello本身logo，藍紅主色做為出發點而設計，

但考量後台使用時間及頻率，因此將顏色調為較適合觀看的彩度，並以藍色為主

其他設計規範以不違背一般使用者慣用行為為原則，像是紅色為error顏色，disable為較淺色彩等

User Interface