從 0 到 1 打造一個報名系統

角色
完整 UI/UX 設計
互動設計
設計系統
時程
7 個月
(2019 九月 - 2020 三月)
工具
Sketch
團隊成員
前端 - Boris Lu, Po Chuan Chen, Denny Cheng
後端 - Elvis Lee
產品經理 - Rebecca Zheng

背景

台灣每年有至少 50 場的單車賽事,幾乎每週末都會有一到兩場比賽,然而車友從報名參加到現場騎乘中間的傳統流程,卻有許多需求尚未被滿足。

找出參賽者所需要的

建立產品的第一件事,就是瞭解我們的使用者,在研究的過程中需要好奇心、同理心,同時需要保持客觀性,在瞭解報名需求的過程中,我們進行了數場訪談。​我們發現車友在報名單車賽事時,普遍會有幾個期待:

1. 我參加活動時會希望幫朋友一起報名,並以團體名義出賽。

通常在活動中有超過 50% 的車友都是團體報名,原因有二:
一、物資寄到同一個地址可以省下運費
二、需要一起替不熟悉數位報名系統的參賽者報名

2. 我想要在活動前知道賽事的距離、坡度、路線圖、紀念品。

在參加一個活動之前,使用者評估的內容不單只是價格與時間而已,還包括賽事的詳細細節、以及活動相關紀念品​。

3. 我想要在騎乘時知道自己朋友的情況以及騎到哪裡了。

當活動的距離較長,通常朋友們不會全程跟在一起騎,而是會約在特定的集合點會合,也因此瞭解朋友的位置變得相當重要。

有了以上的發現,我們將目標訂定為替車友設計一套從報名到騎乘的系統,並與平台現有帳號整合,幫助車友從報名到騎乘維持完整的體驗。

設計成果

一人報名,多人同享

在設計時,我們特別針對團體與個人報名進行報名邏輯的設計,確保符合車友報名時的習慣。另外,為了防止票卷同時被購買的問題,我們也在加上了「訂單保留時間」確保每筆訂單都能順利完成購買。

適合每個裝置、每個語系

為了確保各個載體都能呈現易於理解的報名流程,我們設計了響應式網站(RWD),在元件的設計上使各種裝置及語系都能清楚、舒服的呈現。且根據不同裝置的使用習慣進行細部調整。

確保資訊有效傳遞

在活動頁面,我們確保各個資訊都是使用者需要的,從一開始的活動頁面、中間填寫資料的流程,到後來的付款頁面、訂單明細,都經過討論與驗證。

除此之外,為了幫助傳遞訊息以及後續查找,我們更設計了 3 種不同的交易型電子郵件(Transcational Email),確保透過不同的訊息管道能將報名訊息確實傳遞給參加者。

維持一致的設計系統

在建立報名流程的過程中,為了保持介面一制性,我在字型、顏色、網格、輸入格、以及各式元件狀態都訂定了一套設計系統。

設計迭代過程

驗證與測試

為了更加理解設計是否符合一般使用者及背後主辦單位的想法與需求,因此在初步設計出來後,我們針對目標使用者、活動主辦單位與團隊內部成員,在台灣與日本進行了5場易用性測試,並且依測試結果進行迭代。

我對個人報名、團體報名等不同情境的報名流程製作了原型與腳本,目標是透過接近真實的互動流程瞭解使用者對產品的感受。

Step1

我們根據測試結果,將聯絡人區域從第一步拆開,移到填寫報名資料後的單獨頁面,不僅可以加快團體報名的流程,更可以幫助使用者理解聯絡人的概念。

Step2

對於購物車的設計,電腦版會一直浮在右測,但因手機螢幕顯示空間有限,因此我採取了不同的做法。

與其讓購物車在每個報名步驟都出現在畫面上佔據瀏覽區域、增加誤觸機會,若在使用者需要的時候再出現在使用者面前,使用體驗上會更佳。

因此在手機上購物車從每個步驟都出現,改為兩個時機出現:進入填寫報名資料前、付款頁面,讓使用者可以專注在其他步驟上,需要時也能直接提醒。

Step3

我們發現,輸入框內的文字(placeholder)如果用來說明,對於使用者來說其實不是非常有效的方式,因為輸入文字後就會被輸入內容取代,因此我們決定統一由副標題的形式替代。

Step4

我讓報名步驟與訂單保留時間在不同裝置上變得更易讀,將資訊雜訊降低,提升了整體流程的使用體驗。

​成效與影響

報名活動後騎乘時的軟體使用率提升了34%

En
繁中