back arrow

Weaven產品介面設計與易用性測試

Product Design
專案簡介 Project Brief

接案作品,設計iOT產品-機械錶智慧收藏盒的產品介面。
用戶得以透過操作介面,進行即時檢測、觀看數據、調整錶盒設定等功能。我在專案中擔任UI/UX Designer, 負責產品介面設計、易用性測試規劃與執行。

產品官方網站連結 →
專案成員
1 Designer  2 Project manager  1 Front-end/Back-end engineer
角色/項目
Designer:頁面架構規劃、設計完稿與交付、設計品管、易用性測試規劃與執行
專案時程
3 Months (ongoing)
設計挑戰
1. 無產品相關背景
在對於錶盒與機械錶完全沒有背景知識下進行設計規劃,需要靠大量溝通來解決這方面的不足。
2. 在有限的時間下完成設計
短短兩個月的時間從完成設計到易用性測試後的迭代修改,考驗的是過去累積的經驗,需要衡量能夠取捨的項目,以最有效率的方式完成專案。
專案心得
第一次接案,讓我體認到要在滿足業主期待與對自己的期待之間找到平衡不容易,也因為缺乏接案經驗的關係,忽略了某些關鍵的環節,導致交付的範疇不夠清楚,讓工作量變大。

不過也在這次的經驗當中吸取到很多養分,實際走過除了研究之外的設計流程,接下來可能也會協助後續的迭代,期待產品實際上市。

主要功能
Feature

Weaven錶盒相較於市面上的機械錶盒,多了即時檢測的功能應用,使用者可透過介面管理/查看錶盒中的錶夾狀況,並且觀看相關報表數據。
以首頁為例,前後有諸多改動

設計流程
Design Process

Flowchart

針對重點或者不夠清晰的流程繪製flowchart以便釐清,梳理、展開可能遺漏的畫面。

包括:登入/註冊流程、錶夾綁定手錶、編輯錶夾、建立手錶

Wireframe
/ Wireflow

初期以繪製Wireflow的方式呈現畫面,以此和業主討論介面功能與確認流程。

總頁數約118頁

Mockup

由於此程式是以網頁為基底去執行開發,因此也有製作RWD版本介面。

總頁數約90頁

包括Mob以及Desktop/Pad版本Mockup

Design System / Guideline

易用性測試
Usability Test

測試目的與流程:
1.檢視易用性,測試目前所設計之裝置介面是否符合使用者需求  
2.探查未來是否具其他發展潛力

測試背景
Background

情境式任務操作
Scenario Task

規劃與本次測試功能相關的情境與任務,讓受測者與原型互動,並由主訪者觀察受測者在任務環境中的操作。
放聲思考
Think Aloud

請受測者在操作指定任務時,口述自己的操作行為及想法,讓主訪者了解受測者是如何理解及達成任務目標。
半結構式訪談與問卷填寫
Interview & Questionnaire

於測中、測後訪談,詢問受測者過程中遇到的困難以及對於產品的想法;請受測者協助填寫SUS, SEQ 與合意性測試問卷。
以首頁為例,前後有諸多改動

受測者背景
Testee Background

此次測試共有五位受測者,年齡介於25-40歲之間,全數均有收藏機械錶、對於錶有興趣者,其中一位為產品贊助者。

測試任務
Task

透過與業主以及PM討論,我們最終選擇7項關鍵任務作為測試主題,篩選標準為:重要度、複雜度、預估花費時間。而後再搭配User Story作為對於情境的描述。

Prototype

Prototypes總覽
以首頁為例,前後有諸多改動
以首頁為例,前後有諸多改動
以任務G為例的任務操作pv示意
以首頁為例,前後有諸多改動

測試後回顧
Recap

透過建立框架,在每場測試後利用30分鐘左右的時間帶領業主、PM進行回顧,以利快速抓取該場受測者的回饋重點,同時建立彼此對於測試結果認知的共識。主要記錄點為三種類型:具體觀察、成果判斷、下次行動。
具體觀察:受測者當下的肢體表情、印象深刻的故事/經驗、對哪些議題有興趣或沒興趣等
成果判斷:訪談的收穫、遺憾之處等
下次行動:在下次的測試中可以改進之處

討論紀錄之一

結果分析
Result Analysis

透過統計SEQ, SUS分數以及合意性測試結果以評斷目前介面的表現,將觀察紀錄、訪談紀錄、測試後回顧的結果進行整理、分類。根據結果推測出設計洞察/問題點,並給予相應的設計建議,最終和業主及PM共同討論出迭代的方向。

SUS, SEQ統計與合意性測試結果
討論紀錄。項目分別為:測試洞察、設計建議、受測者引言/想法、反應人數

設計迭代
Iteration

最終與業主、PM共同討論迭代的方向,調整多處UI,以下舉兩例:
1.建立手錶流程優化:原先將所有填寫項目集中在同一頁,但此作法造成使用者認知負擔,認為填寫複雜,因此最終決定拆分流程,降低填寫困難度。
2.檢測圖視覺優化:原先版面視覺有過多的留白,空間沒有充分被利用,因此決定修改此版面,有效運用空間。

改動 18 處

建立手錶流程優化
檢測圖視覺優化

其他專案
Other projects

繁中