首頁個人作品UI/UX設計環保集點 APP Redesign Redesign, 介面設計 / 作者: 稀飯 / 2022-11-22 2021年的暑假,因為突如其來的5月疫情大爆發,導致而後的生活步調都被打亂了。看著在家無所事事的我決定發起一場自主學習的Side Project,找尋同班三位對UI/UX領域有高度熱忱的同學一同完成從使用者經驗開始研究以致最終原型製作的專案。❙ 設計時程:2021/07/05~2021/10/01 ❙ 設計團隊:4人 ❙ 負責工作:使用者研究、測試訪談、介面架構規劃、Wireframe、Prototype ❙ 設計軟體:Figma、Maze 內容目錄 Toggle 成果展示貳、專案背景使用者研究(手機應用商店評論)現行軟體使用測試、訪談各題操作錯誤次數統計全新環保集點誕生首頁 設計亮點1. 整合Tab Bar與首頁功能選單2. 修改部分功能名稱3. 新增通知功能商店 設計亮點1. 優化商品卡片2. 顯示目前所持有點數3. 優化搜尋、篩選、排序功能4. 明確顯示是否正在篩選痛點修正會員點數不明顯不知道哪些優惠券還沒兌換新版環保集點 易用性測試設計系統後記 成果展示 前往Figma體驗 貳、專案背景 選擇環保集點這款軟體作為我們Redesign的原因是因為剛好組內有人使用過這款軟體,她使用的原因是因為它可以透過作環保的方式集點兌換獎品,我們都覺得這是一個很不錯的軟體,便去下載來嘗試看看,結果發現使用下來後,整個軟體的操作比較不人性化一點,部分功能會讓人很困惑,覺得好像這樣操作是對的,但為什麼跟我想的完全不一樣?基本上只有在想要兌換的時候才有動力去打開它,不然會選擇放在旁邊,甚至先刪掉,等之後有想到在下載回來,看到突然暴增的點數還比較快樂。 使用者研究(手機應用商店評論) 現行軟體使用測試、訪談 各題操作錯誤次數統計 觀察測試者的操作狀態以及訪談後的結果得知:1.任務二、任務三: 「商品查詢」、「我要兌點」、「電子優惠券」三個功能容易搞混。而「我要兌點」之按鈕確實能完成任務,但在要兌點時會跳到「電子優惠券」的頁面,因此讓許多測試者感到疑惑,而一直在兩個功能中切換。 2.任務九: 該頁面名稱為「集點序號」,但會員頁面中的該功能為「序號輸入」、Tab Bar中的「掃描」功能同樣也是「集點序號」的意思,因此多數人一直找不到該功能。 3.任務五: 部分測試者確實有順利進入「常見問題」頁面,但由於切換不同選單功能不易被發掘,因此導致部分受測者花費了一段時間才完成任務。 全新環保集點誕生 首頁 設計亮點 1. 整合Tab Bar與首頁功能選單 電子優惠券與我要兌點合併為商店。將我的優惠券移動至Tab Bar,減少多餘點擊步驟,加快操作效率。 2. 修改部分功能名稱 商品查詢改為消費集綠點,更好辨識該功能可查看消費獲得綠點的商品。 3. 新增通知功能 更新、點數回饋消息等通通可以在這裡查到。 商店 設計亮點 1. 優化商品卡片 舊版點數顯示於右上方圖片位質,因部分圖片較為複雜會影響到辨識度,因而改為顯示於商品名稱下方,增加點數的重要性與可視度。新增我的最愛功能,將你喜愛的商品加入最愛中,下次找尋不會再一個個搜尋,減少操作時間。優化舊版店家名稱與商品名稱合併導致商品名變為較長,閱讀時間也會較為提升,因而將兩種名稱分開放置,並強調最為重要的商品名稱,提高閱讀速度。 2. 顯示目前所持有點數 舊版頁面並無顯示目前所持有的點數,在兌換前並須要先查好自己有多少點數才能夠去搜尋,且考驗使用者的記憶力,因此新版於右上方新增目前所持有點數,讓使用者更能明瞭自身能兌換的哪些商品。 3. 優化搜尋、篩選、排序功能 將舊版下拉式篩選改為滑動頁面,操作步驟會比舊版稍微多了一步,但能有效減少因未明確分類類別而花費多餘找尋的時間。將舊版搜尋功能改為滑動頁面,並增加熱門搜尋與歷史紀錄,讓你更多找到當前最多人想要兌換及自己曾經搜尋過的商品。 4. 明確顯示是否正在篩選 因怕部分使用者篩選後忘了自己正在篩選而找不到特定商品的可能性,因此在頁面上只要正在篩選即會在Toggle顯示篩選:ON,並變更顏色,提高辨識度,達到告知的效果。 痛點修正 會員點數不明顯 將點數資訊與卡面分離,以品牌綠跟背景白搭配提高辨識度。 不知道哪些優惠券還沒兌換 新增優惠券、已兌換、已過期的按鈕,分類不同狀態的優惠券,並減少卡片對於使用者重要度不高的資訊。 新版環保集點 易用性測試 因應疫情關係,使用 Maze 軟體輔助測試。從數據中可以明顯得知整體操作效率提高不少,經問卷調查後,多數人更喜歡新版的環保集點,認為新版本操作步驟大幅減少、頁面也更加簡潔,更能留住自己的心。 設計系統 規劃設計系統統一團隊介面風格,提高團隊之間合作製作原型的效率,減少不必要的溝通、想法誤差。且若後期有新成員加入也能更快上手工作。 後記 第一次作為專案召集者,且沒有任何老師支援的情況下,其實內心有點緊張,很怕自己哪個部分沒有做得很好,讓團隊迷失方向。幸好,很感謝組員們都很包容,也能提出不一樣的想法,讓團隊更進一步;也很感謝之前上課(使用者經驗、設計心理學)的筆記、講義,三不五時都拿出來看一下,看看現在要怎麼做,為什麼要做這個;也很感謝出生在科技時代,網路上有太多太多資源可以利用了,真的非常感謝願意在網路上留下教學的人,讓我們度過徬徨、難關。最後,也很感謝我們同學、朋友無償幫忙做測試,疫情下真的有好多困難挑戰,這些挑戰無形中也讓我們變得更好,這真的是個非常難忘的經驗。