top of page
點ui展示.png

產品痛點

痛點 1 : 目前產品僅有「消費型」給點功能,無法滿足品牌客戶的點數應用需求   

「消費型」給點為商店可設定消費者購買金額可以獲得點數回饋,但現行功能無法指定特定日期區間、圈選指定的商品,較適合作為一間商店長期經營的點數型態。例如:某品牌想於本週五加碼滿額就加倍贈點,則無法滿足客戶需求。

痛點 2 : 前台(官網 / App) 點數相關頁面曝光不足

91APP針對前台僅提供「紅利點數說明頁」,對消費者曝光度不足。

專案目標

提供品牌客戶多元的「點數活動」功能,讓品牌客戶自由設定

提供6大功能&14種維度設定(如下圖),多元的點數應用讓品牌客戶進行活動操作,於後台設定檔點數相關活動 (如:滿額點數加倍、滿額固定給點),同時於活動可圈選指定商品,透過點數發放,吸引會員回購,增加業績動能。

六大維度.png

提供6大功能&14種維度設定 (如圖)

針對前台 (官網 / App) 多個頁面提供點數活動相關資訊揭露

於商品頁、點數活動頁、促購活動列表、購物車...等頁面,提供更完整的紅利點數揭露,讓消費者了解並參與點數相關活動。

給點機制計算方式說明

單筆滿額固定給點:單筆訂單滿1000元,銀卡會員送100點數

單筆滿額比例(%)給點:單筆滿1000元,金卡會員給10%點數,上限150點。

如何計算? 訂單實付金額為1200元,符合1000元門檻,消費者會拿到120點 (1200元 x 10%=120點 ) 

91APP

點數活動 Promotion Reward

​專案關鍵字

介面設計
iOS/Android設計
網頁設計
易用性測試

專案角色

​專案範圍

產品設計師 

​官網|APP設計|後台設計

​專案時程

5個月

給點功能比較

透過下方表格針對「消費型給點」以及「活動給點」功能進行比較,了解其差異為何。

點數比較.png

設計流程

設計前期

專案開始前,設計師會先針對專案與Product Owner與公司業務單位進行需求對焦。接著,便開始進行一場設計風暴,介面流程規劃其中包含:Wireframe、UI Flow以及UI設計,進入開發前,會先與相關單位以及設計師們一同討論專案設計內容。

團隊使用Scrum軟體開發方法 (Sprint開始)

進入Sprint即開始進入團隊程式開發階段,此時隨開發遇到的狀況隨時調整設計,並進行UI畫面測試。在產品上線前,會安排一場易用性測試,廣邀公司同仁使用產品並給予回饋。最後會將易用性測試結果依照優先序,在上線前抓緊最後時間進行微調優化,確保上線的品質。

設計流程.png

功能地圖 Functional Map

將「品牌客戶」以及「消費者」這兩個角色,使用使用者故事的方式,歸納出各自的功能地圖 (Functional Map),不僅可看見產品功能的全貌,也很適合跟開發團隊確認功能。

點數活動funtional map功能地圖.png

後台設計展示

提供品牌客戶可於91APP後台使用給點活動相關功能,以下展示主要功能的重點頁面。

後台 (1).png

不同會員等級​可設定不同給點條件

品牌客戶可依照不同會員等級設定其消費後回饋的點數百分比(%)以及給點上限。

截圖 2021-09-11 下午6.31.21.png

​可設定不同的給點效期

可依據品牌客戶的需求,提供四種不同的給點效期方式設定,前3項與現況既有的「消費型」給點相同。本次因應客戶希望消費者於參與點數活動後,能快速使用掉點數(EX:消費者須於12/25 23:59前需使用完畢) 因此亦新增了點數統一於某一時間的23:59到期之機制。

截圖 2021-09-11 下午6.31.35.png

前台設計展示

以iOS APP示意消費者的UI Flow,消費者於品牌官網購買商品時,可透過給點活動展示頁挑選指定商品,消費滿額可獲得額外點數,當商品鑑賞期過後,即可獲得活動給予的點數,並可在會員點數中心查看,於下次消費即可消費進行點數折抵。

點數UI FLOW.png
給點活動規則.png
點數活動頁放大.png
點數活動_購物車UI放大.png
測試照片.png

舉辦「易用性測試」活動,確保產品上線品質!

​以專案需求設計任務卡

​依照本次設計「消費者」&「品牌客戶」兩種角色的任務卡,內容包含三大點: 角色是誰? 當下情境為何?任務是什麼?

易用性測試怎麼做?

由於開發裝置包含:APP(iOS &Android)、Web、Mobile Web,功能又分為前台官網/APP以及後台,因此分成多組人馬進行測試,於易用性測試當天,會由團隊人員分別擔任測試者以及紀錄者(2人一組),一次只專注於一個裝置&一個任務上。

我於Medium有撰寫一篇「身為設計師的你,不妨使用易用性測試讓產品上線不NG(上)」的文章,若對易用性測試想要有更深入的了解,歡迎查看!

後台-使用性測試任務卡.png
前台-使用性測試任務卡.png

​搭配放聲思考法

當受測者聆聽任務後,便開始進行介面操作,過程中會請受測者大聲說出正在操作什麼? 以及內心的想法是什麼?另一名團隊同仁將會協助紀錄。

測試結果收集討論

易用性測試結束當天,我與團隊快速將問題收集後,開始討論與篩選優化項目,接著我與PO一起討論優化項目的優先序,接著請工程師評估開發時間,最終排序「高」的項目均於專案上線前就修改完畢,而排序在「中&低」則列入產品待辦清單(Product Backlog),於未來若有迭代功能時,可拿出來優化。

截圖 2021-09-11 下午6.08.02.png

​快速列出需優化的排序項目(如上圖)

專案收穫

推出MVP產品要懂得掌握核心功能
每次專案想做的功能都非常多,覺得所有都是對用戶有幫助,然而開發時間總是有限,透過與公司的客戶窗口討論,哪些功能是Must to Have,而哪些又是Nice To Have,是重要的課題!

符合用戶需求的功能才是好功能
釐清用戶需求是在設計產品最重要的一環,而當著手進入UX/UX設計時,又會將產品看得更加深入,當某些功能自己也不清楚客戶是不是需要的時候,「問」就是一個非常好的解法,本次專案有許多功能都透過公司業務單位了解客戶,從而得知哪些功能能貼合客戶需求,達到產品真正的作用!

bottom of page