回首頁 | Index
回首頁 | Back to Index

Web UI Flow Redesign

UI/UX Design

Background

Overview

flyingV 為台灣最大的群眾募資平台,2012 年創立至今,已成功執行上百檔專案,將每一個有價值的好點子透過平台傳遞給認同理念的消費者。然而經過多年以後,許多線上的使用者透過各種管道向我們反應操作上的問題,特別是付款流程與缺乏一個能與提案者直接連聯繫的訊息功能。於此在 flyingV 任職期間,為了解決以上兩個問題便著手來改善。一方面在付款流程上讓使用者更直覺地填寫資料與選擇,另一方面將原本尚未改善的站內訊息功能加以優化。

Role

Define Problem, Sketch, Prototyping & Mockup

Tools

Sketch, Invision & Zeplin

Challenge

募資平台鎖定的目標客群,是對提案者的專案與計畫有著高度認同感與注目度的這群贊助者。因此要如何讓這些喜歡在募資網站尋找好靈感、好商品的使用者,持續地駐足或關心相關訊息,保持一定的回流率與平台轉換率是很重要的。然而在先前的網站規劃架構下,有幾個地方是有待優化的:

Persona

在開始製作之前,我們由先前用戶提供給我們的反饋,設定提案人與贊助者兩位使用者的 Persona,試圖了解雙方彼此的痛點。


付款流程 & 優惠碼

原本的付款頁面並沒有完成 RWD 響應式的設計,贊助總金額的版面預設是在網頁的上方,使用者常反映給我們,每選一次付款的選項都會做費用的更動,但數字變動後卻都在頁面的上方,覺得可以再改進。

另外我們覺得流程上面,選完寄送國家的選項(決定是否需運費)後,應該是要填寫寄送目的地的資訊,再選擇付款方式,之前的流程設計上顛倒了,缺乏層次結構。最後因應日後的專案有專案預熱期之前的優惠碼功能,總結需修改的地方有:

  • RWD 響應式設計
  • 付款介面流程優化
  • 新增優惠碼功能
  • 資料輸入時的微互動
  • 後台的新增優惠碼功能
優化前的付款流程網頁

站內訊息

架站之初因著重在系統的穩定與行銷層面,因故許多功能尚未開發完成,其中站內訊息這個功能當初就被忽略了,因此打算在這一版優化,站內訊息的功能上根據使用者雙方的需求去做改善。

提案者往往只能利用其既有的 Facebook 粉絲專頁或 Instagram 等行銷工具,私下回覆贊助者或尚未贊助但對專案有興趣的潛在贊助者相關問題。但這樣一來不但難以針對贊助者做客製化的回覆(提案者必須還得一個個對訂單編號),也造成一來一往時間上的浪費。因此在這次的功能更新裡特別改進。

贊助者也能透過站內訊息功能,直接與提案者聯絡,降低贊助者等待商品或服務的期待落差。

  • RWD 響應式設計
  • 提案者對贊助者溝通與直接對談
  • 贊助者能與提案者詢問專案事宜
優化前站內訊息畫面

Solution

付款流程 & 優惠碼

在付款的流程安排上,使用者一開始看到的右方版面就是預先選好的贊助項目與 Q&A 區塊。原先贊助總金額的區塊,我們把他移到資料送出前,供用戶最後的確認,標題也改為「贊助金額明細」。資料輸入的區塊安排從寄送的國家、寄送資訊、付款方式、優惠碼,最後顯示贊助金額明細。

優化後的付款流程畫面

付款方式

而「付款方式」這一個區塊,原本的設計是把選項設計成 2 乘 2 的方格,但是我們認為這樣不夠直覺,因此不管是 3 種還是 4 種付費選項,這次我們都把它設計同一行。這樣的設計除了夠直覺,也可以隨著視窗大小做 Responsive 的處理。





3 格與 4 格的付款方式區塊(上1、上2:桌機版、下:手機版)

優惠碼

優惠碼這個功能是這一次新增的項目,原因是專案部門的 PM 們希望在募資專案前的預熱階段,能提供填寫問卷、關心這個專案的潛在用戶或老客戶們一個回饋,透過優惠碼的折扣吸引這些用戶提供反饋,加強支持、贊助的動機。

優惠碼 Flow Chart

優惠碼驗證成功,即可以依照其設定的折扣去折抵募資金額。驗證失敗有幾種情況:

  1. 輸入的字元錯誤:打錯字
  2. 優惠碼已經被用過了
  3. 優惠碼還沒開放時間使用
  4. 優惠碼過期失效
優惠碼預設、驗證成功,與失敗的三種情形。

提案者如何設定優惠碼呢?前往「專案頁面後台 > 行銷設定 > 優惠碼設定」區塊,建立相對應的回饋項目對應的優惠碼,確認後即可在表格的右方產出完整序號清單進行發放。

專案後台「優惠碼設定」區塊示意圖
專案後台「新增優惠碼」的示意圖。可以自行設定適用的回饋項目、有效日期、折扣金額和組數,上限是 5,000 組。

站內訊息

預設可從右上方的「鈴鐺」圖示裡的下拉面板,進入站內訊息區塊;手機版則是從會員名稱裡的下拉面板找到連結。進入站內訊息區塊後,分成兩個部分。左邊側邊欄是訊息列表右邊訊息內容。列表裡如果是系統發出的訊息,會置頂在最上方。未讀訊息會以粗體文字和小紅點標示。

優化後的站內訊息畫面(點圖可開啟大圖)

下拉式面板

因應站內訊息的更新,原本的下拉式面板也趁此機會改版。將專案的進度通知朋友圈通知站內訊息通知合而為一。站內訊息通知會出現在平台上方的選單列,並且會告訴用戶有幾則訊息。進度通知是讓贊助者知道每個贊助過的專案,最新的進度追蹤。朋友圈通知則是讓使用社群平台登入會員的用戶,看到他的朋友們贊助過什麼專案,產生更深的連結。

從左到右依序為:進度通知、朋友圈(登入前)、朋友圈(登入後)、訊息【點圖可開啟大圖】
從左到右依序為:進度通知、朋友圈(登入前)、朋友圈(登入後)、訊息 【點圖可開啟大圖】

新增訊息

不管是贊助者還是提案人,用戶都能使用訊息功能相互溝通。贊助者能向提案人提問專案的進度與相關問題,提案人能和贊助者直接聯繫。但為了降低不肖的用戶傳送垃圾訊息的風險,我們不開放使用者之間互傳訊息的權限。

新增訊息的 UI Flow (點圖可開啟大圖)

查看專案明細

前面說到,贊助者如果因為專案相關問題想要詢問提案人,還必須另外再說明自己的訂單編號與相關資訊,提案者還要從後台搜尋其訂單,為了減少兩者溝通查詢的不便,在站內訊息視窗的右方,我們加了一個專案明細的 sidebar 面板連結,雙方使用者都可以利用這個功能的優化,期望盡量降低彼此的溝通障礙。

提案人、贊助者的專案明細 sidebar(點圖可開啟大圖)

篩選訊息

在站內訊息左方的列表上,我們做了一個篩選的功能,主要是多數的提案人反應,希望能更有效率地處理訊息和即時回覆。贊助者和提案人都可以利用透過選擇未讀、已讀、已標示訊息等選項去篩選需馬上回覆的訊息。提案人如果在平台上有一個以上的專案,想要發群組訊息,則能夠在下拉選單選擇後,大量傳送。

贊助者、提案人各自的篩選訊息(點圖可開啟大圖)

下個作品|Next Project

台日特快車 - Campaign Visual Design