top of page

User Interface 設計

首頁

將原本散落的功能,依類別整理到 Navigation Bar 和 Tab Bar,並將二手書上架與管理功能放在最顯眼的位置。

01

規劃行銷活動和書籍推薦位置給使用者,期望能協助顧客找到喜歡的書籍,同時促進書籍銷售。

02

放置 Segmented Control 動態牆,可看到最新、最熱門,以及 KOL 的閱讀動態。

03

專案目標

從公司、市場與顧客面了解產品,並進行測試,定義問題。構想與設計解決方案。

面臨的挑戰

TAAZE 的網頁版已可符合大部分的需求,但目前 APP 定位不明確。於是我需要嘗試了解品牌背景與野心,並進行使用者訪談,製作出符合公司與顧客雙方期望,具有發展性 Redesign。

解決方案

我重新設計資訊架構,針對首頁與二手書上架流程繪製 wireframes ,並給使用者驗證易用性。最後以UI mockup 呈現 Redesign 成果。

DISCOVER

台灣最大的線上二手書籍平台——TAAZE 讀冊生活,APP Store 評分只有1.4顆星。

我是一位閱讀愛好者,同時也製作過上百本書籍,因此「TAAZE 讀冊生活」就成為我處理藏書的交易平台。它代為經手非常多賣家過去需親自處理的環節,為我省去不少時間。然而在操作APP 時,其使用流程卻讓我感到非常困擾;APP Store 上也有許多與我有相似問題的使用者回饋。因此我想重新設計 TAAZE 的 APP,嘗試讓使用者體驗更為完善。

受訪者下載 TAAZE APP 產品的目的幾乎是為了上架二手書籍,原因是 APP 的掃描功能快速方便。於是我請他們操作上架流程和買書流程,並基於結果,製作顧客旅程地圖。 另外,冊格子在產品畫面中佔很高的比例,但幾乎每一個人都無法在短時間內理解這項功能的使用目的。

發現:使用動機

DEFINE PROBLEM

進行訪談,洞察顧客使用經驗

為了進一步分析產品使用體驗,我訪談身邊 5 位使用過 TAAZE的朋友,從他們的使用經驗中挖掘洞見。

DEFINE PROBLEM

定義問題

為了提高使用者體驗,這款 APP 有三項需被解決的問題

資訊架構
目前冊格子呈現資訊的方式不容易被使用者理解。 TAAZE 的甜蜜區在二手書籍買賣,但冊格子在畫面上有極高的占比,反而讓使用者難以順利完成上架與購買目的。
使用流程
使用者雖然可以達成最後上架的目的,但其中有許多感到困惑的地方。二手書買賣是讀冊的優勢,也許這是最急需改善的部分。
介面設計
介面設計與易用性上,目前與競品有很大的差距。若要發展出有競爭力的閱讀同好社群,這部分也需要一併更新。
  • 目前產品首頁不會讓人聯想到書店電商,以致有使用者表示並不知道可以使用 APP 購買書籍。
  • 買書流程至結帳階段時,被導引 至「線上網頁」登入。但登入後是「沒有RWD」的會員後台,同時不是顯示準備結帳的畫面,造成使用者放棄購物。

發現:買書流程

EMPATHIZE

建立同理心

基於前面的調查與訪談,我濃縮至三張 Personas 涵蓋三種 TAAZE 的潛在使用者。用以作為我重新設計時的思考依據。

Emma
「看過的書丟掉太可惜,留著又佔空間,賣個好價錢不無小補。」
Amber
「我想節省開銷,找到便宜的二手書。」
James
「我買書前有查找評價的習慣,希望能買到符合預期的書籍。」

Design thinking process

專案執行為期二週,我的流程是

01

了解問題

02

構想解決方案

03

設計與測試

01

了解問題

02

構想解決方案

03

設計與驗證

PROTOTYPE & TEST

線框稿 Wireframes

設計過程初期,我用 figma 繪製了低擬真度的 Wireframes ,並請 2 位使用者進行測試。經過兩次疊代才進入UI設計。 如下圖最左邊是「第一版」首頁 Wireframes ,右邊兩張是修改後的「第二版」首頁 Wireframes 。

Self Review

使用者回饋是前進的動力

請使用者測試 Wireframes 時,得到許多沒有預料到的 Feedback,雖然有點懊惱一開始沒有想得更仔細,不過後來馬上振作精神重新構思!覺得使用者的 Feedback 是很棒的刺激,調整後的確變得更容易使用,也很開心最後獲得使用者們的正面回應。

 

此次的 Side Project 讓我體驗到,不斷地疊代推出更有效的解決方案,是我最享受的部分。所以若大家有任何建議,也歡迎不吝提出喔!

  • 在社群討論中,TAAZE 是二手書交易的首要選擇,擁有高知名度。目前提供的服務也確實展現其價值。
     
  • TAAZE 有開發類似閱讀社群的「冊格子」功能。2020年官方於 Web上推出新版,可見讀冊欲創造閱讀社群的企圖。但有許多方面仍須改善,才能展現競爭優勢。

發現

DEFINE PROBLEM

了解公司與產品背景,並找出 TAAZE 的競爭優勢

設計初期,我在網路上收集公司與產品的相關資訊,特別是目標客群對於產品的想法。 另外,我以策略圖(下圖)協助了解 TAAZE 的甜蜜區。首先,二手書買賣方面,競爭者有線上二手交易平台(書寶、蝦皮等)和實體二手書店。次者,關於閱讀社群「冊格子」,最大的競爭對手是電子書平台 Readmood 看書。

  • 冊格子功能在 APP 中佔極高的版面,但所有人受訪者都無法理解功能與使用目的。
  • 若要上架二手書的話,受訪者表示用 APP 掃描條碼快速方便,但掃描完成後的申請流程不太清楚,以致想中途放棄。

  • 管理書籍販賣狀態的後台功能不完整,且受訪者無法快速找到管理入口。

發現:販賣二手書流程

上架流程

新增「繼續搜尋二手書」按鈕,解決無法繼續上架二手書問題。

04

新增進度條,解決使用者對上架流程不清楚的問題。

05

在準備出貨頁面確實引導使用者,解決申請上架單號後對出貨流程不了解的問題。

06

管理書店 / 讀冊金

將 UI Picker 改成 Segmented Control ,解決使用者無法順利管理販賣狀態的問題。

07

把原本攤開的書籍販售狀態分成三類,整理到 Segmented Control , 讓使用者可以更直覺地切換使用。

08

新增讀冊金與匯出現金的功能,此功能在網頁版有,但 APP 並沒有呈現。期望解決使用者無法在 APP 上得知收入與操作匯出申請的問題。

09

IDEATE

以草圖構想使用流程,確認資訊架構

配合三張 Personas 的使用行為與目的,我以草圖嘗試各種可能性,幫助自己釐清邏輯,確保產品保留 TAAZE 的優勢與野心,同時能有效解決問題。 確認架構後,我決定針對最多人使用的「首頁」、「上架流程」頁面和「管理書店」頁面進行設計,讓顧客使用地更為順暢。

TAAZE - APP Redesign

重新設計二手書交易平台的使用體驗

bottom of page