運動品牌商城

bonny Live品牌商城

Bonny Live是為了Bonny品牌設計的RWD運動商城,除了一般商品,也針對課程票券、場館預約票券做購買設計。

img

安迪,32歲,白領上班族

- 中等消費力
平時有運動習慣,會參加教練培訓課程
- 網購接受度高,習慣網購多於至實體店面購買
- 手機慣用者,希望紙本票券轉換形式

img

陳艾亞,42歲,商城管理員

- 網頁熟悉度不高,需要操作簡單
- 渴望清楚的管理商品、會員及購買資料

買家User Story

- 購買培訓或預約場館後可直接出示QRCode使用
- 快速線上購買實體、虛擬商品
- 得到點數回饋、折價券並使用

賣家User Story

- 透過商城活動提高會員忠誠度
- 傳遞品牌訊息、商品資訊
- 管理會員資料、購買紀錄及商品上架管理

我的角色

進行期間:2017.06 ~ 2017.09

> 參與客戶訪談
> 與UX designer合作,合作完成購物、會員中心UX企劃
> 定義風格、RWD網頁設計
> 與工程師溝通需求、管理測試優化進度

設計方法

> 使用者故事User Story
> UI動態規範 (使用Zeplin)
> 網頁風格定義
> RWD Web設計

使用者需求

使用者目標

快速購買想要的運動商品

線上購買及使用虛擬票券

購買後獲得優惠或點數折價

功能關鍵字

關鍵字搜尋、熱門搜尋、商品推薦

場館及課程商品產出電子票券

點數、折價券折抵現金及所有消費紀錄

解決方法

專屬於畢業校友的分享、交流平台

img商品/票券商城

商品販售平台,提供分類、關鍵字搜尋、熱門搜尋及商品推薦

img購物折抵

購物流程可使用點數或折價券消費,可配合行銷活動贈送優惠方案

img會員專區

紀錄期間內的消費交易及點數、折價券使用紀錄

img品牌資訊

瀏覽品牌相關文章、活動分享或視頻,提升對品牌的印象

img

UI及成果展示


首頁主題推薦

依不同主題呈現推薦商品,利用關鍵字、地區篩選、或是熱門標籤搜尋商品,提供更直覺快速的方式,讓使用者更容易找到想要的商品

img

img


一致化各類商品

將兩種票券及套組皆以“ 規格 + 次數 ”呈現選項欄位,這能夠讓虛擬商品與實體商品的規格相同,維持介面操作上的體驗一致



表格 RWD 設計

購物車及會員專區在電腦瀏覽時以表格呈現,讓資訊完整清晰
小螢幕則以方便閱讀為主,顯示最必要的資訊、並可以點擊表格展開更多資訊,使表格在RWD時更具易讀性

img

img


卡片式設計

卡片式列表可以很好的組織圖片及文字,讓大量的商品資訊看起來更舒適整齊
商品下方利用tag的標籤設計,以更活潑的方式呈現商品特色,同時達到搜尋效果