Project banner image

Ubike App 設計優化

PROJECT
#User Research # Mobile APP # UIUX Design
MY ROLE
UX Research UIUX Design
TIME
1 Week

專案說明

根據Youbike的官方統計,台北市2023年的總使用次數已超過4600萬,相較於2022年成長了百分之三十五,可見在疫情之後,使用的次數正在快速增加,台北地區所設立的站點非常廣泛且密集,對於短距離通勤而言,可以說是非常的便利,可是礙於1.0跟2.0版本的不同,以及App的使用狀況,還是有諸多的問題導致Youbike的使用體驗有待加強。

Ubikes parked on the strret
Ubike official statics image

設計流程

定義問題與目標

市場研究
用戶訪談

設計研究與發想

競品分析
頭腦風暴
線框圖

設計規劃

高擬真設計
設計原型

本次的設計挑戰我給自己一週的時間,前期我先透過網路上的資源以及向身邊的親朋好友們訪談,以搜集關於Youbike的回饋,定義問題後,我鎖定出需要優化的方向,進而透過競品研究分析出可行的解決方案,再藉由線框圖初步構想畫面互動與交互流程,最後設計出高擬真的設計原型。

用戶研究

透過Google Store, Apple Store, 以及社群論壇,可以看出不少評論點出相同問題,其中包含「不同車種不能還車」「可借數量與App顯示不符」「熱門站點借不到車」這些問題,透過訪談身邊有在使用Youbike的親朋好友們之後,發現到他們的確也遇過相似的問題。

Reviews on the internet

定義問題

我同時也針對現有的Youbike App進行初步的設計優缺分析,發現出一些易用性的問題,包含「主要CTA不夠明確」「站點車種類型不明」等問題,我將前期研究的問題定義成更加具體的「三項」痛點,針對這些痛點來擬定設計優化方案。

Current app problems screenshot
無法最大化一覽所有車輛
Youbike1.0 以及 2.0 並沒統合,造成使用者無法清楚 一覽「所有」可以租借的腳踏車,也導致使用者可能需要互相切換平台才能找到租借的車輛
首頁主要目的不明確,功能繁雜
頁面充滿太多CTA (上排搜尋、站點地圖、AI客服、掃描租借、個人定位) 欠缺明確的目標指引使用者快速租借/歸還車輛
站點車輛狀態與期望不符
系統更新狀態不明,造成使用者當下看顯示有可租借的車輛,實際到站點時卻發現沒車輛可以租。無法預借車輛,可能導致使用者到現場時發現車輛已被租借走了

專案目標

Youbike App 如何讓使用者更方便地找到可租借的腳踏車?
這些痛點主要造成了用戶在「便利性」「操作性」上的不便,所以我將目標鎖定在該如何解決這類的困難,目標在於改善「便利性」以及「操作性」上

競品分析

首先為了發想出可行的解決方案,我鎖定了國內外相似的競品,並進行分析與研究,我將競品中挖掘到好的應用歸納與整理了出來,這些優點有助於我產出具體可優化的方向。

Vam Dam app screenshot
1.車輛剩餘數量展示
2.預約單車服務
3.簡潔UI
Smile bike app screenshot
1.明確的CTA
2.篩選器功能
3.站點狀況刷新按鈕
Zolo app screenshot
1.車種類型標示
2.預約服務
3.簡潔UI
iRent app screenshot
1.篩選器功能
2.車種切換器
3.簡潔UI
Lime app screenshot
1.車種篩選器
2.明確CTA
3.簡潔UI

解決方案

以下是我從競品中挖掘出的解決方案,透過制定出明確的解決方案能夠有效助於我構想出後續的設計稿以及互動流程。

統合Youbike1.0 以及 2.0 並透過篩選器功能快速找到可租借的車輛
雖然 1.0 及 2.0 的車架系統不同,我們依然能利用篩選器的功能讓使用者在不需要切換平台的模式下最大化搜尋附近可以租借的腳踏車
簡化頁面,提供明確目標(借車、還車)並簡化使用流程
將頁面首要的目標展示出來並吸引使用者注意,簡化頁面讓使用者能專注於首要目標,並快速搜尋最近站點進行租借及歸還
提供頁面刷新、預約借車、導航等功能
透過手動刷新的方式,確保螢幕上所顯示的為最新數據,讓使用者能做出更正確的決定。以付款預借的方式替緊急使用者暫時保留車輛,以確保使用者可以如預期租借到車輛。

設計準則

為了優化「便利性」與「操作性」,我從競品與解決方案中歸納出幾點設計準則,分別為「簡潔」「直覺」「有用」,這讓我在設計時有更明確的方向以及時時刻刻提醒我該注意的細節。

簡潔
簡潔的UI不僅畫面看起來舒適,同時也因為將低了大腦閱讀資訊的負擔,而讓用戶可以更加專注在首要的目的,也就是「找車」「借還車」
直覺
直覺的操作有助於用戶可以不必浪費時間在學習該如何操作App,有助於讓找車更有效率、更加便利
有用
用戶開啟App最主要的目的就是為了「找車借車」,除了簡潔和直覺之外,要如何讓用戶可以在需要的時候借到車,「有用」才能為用戶帶來價值

線框圖

有了解決方法以及設計準則後,我有了明確的方向可以協助我發想畫面該如何設計以及互動,接下來我拿出了紙筆,開始繪製線框圖,過程中,我標記出該具備的功能以及互動。

Hand draw wirframe

設計不同版本

透過線框圖,我接著著手進行繪製更高擬真的設計原型,過程中我嘗試了不同的設計版本。

Version 1
Version 2
Version 3
Version 4

最終設計

在不同版本之中,我考量了用戶或許會單手使用手機(如騎乘中、行進中)也考量大部分的「台灣」用戶為右手慣用手,選擇了一個最符合用戶使用情境,同時也符合「簡潔」「直覺」「好用」的版本作為我最後的版本。

Demo image with features description
Redesign app image-1
Redesign app image-2
Redesign app image-3

設計對比

這裡我將說明舊有設計中我發現的問題,並分析優化後的設計能如何改善用戶的使用體驗,透過前後對比能更鮮明地看出差異。

優化前
Old app screenshot image-1
手動選擇車站麻煩:需要花時間找合適的車站
無法快速查看所有車站: 增加搜尋難度
使用目的不明確: 使用者目標分散
優化後
Redesign app image-1
簡化介面: 把副功能放在一起,讓使用者更容易找到車站
統一系統: 可以快速查看所有車站,並知道剩餘車數量,更好做出的選擇
便捷搜尋: 使用一鍵按鈕快速找最近車站,提供刷新功能以確保資訊準確
優化前
Old app screenshot image-2
單一車種: 無法查看所有站點
混淆的CTA: 主要按鈕竟是個人定位,讓使用者容易感到困惑
無預約功能: 可能到達時無可租借的車輛
優化後
Redesign app image-2
Redesign app image-3
車種篩選: 可選擇不同車種,輕鬆找到所需站點
清晰按鈕: 提供明確的按鈕和站點資訊,幫助快速做決定
預約功能: 可以預約並付款,確保租到車輛,避免到時沒車的問題

反思與學習

多方參考競品
好的競品因為經過許多版本的迭代與更新,相對來說已經是相當成熟的產品了,往往可以從中挖掘出很好的設計運用,仔細思考會發現背後的決策都是為了解決明確的痛點,並幫客戶帶來價值。
有限的時間,需要好的專案規劃
以前做其他作品時,因為沒有時間的壓力,可以按照自己的步驟做研究、設計規劃與測試,這次的設計挑戰我只給我自己一週的時間,也只能利用下班零散的時間做,相對來說更需要好好規劃有限的時間內該做多少研究以及是否有能力做測試,這次的經驗學習到如何掌握一個專案的進行,並如何在期限內產出設計。
驗證不可少
雖然有了設計產出,但因為沒時間做測試,心裡總覺得怪怪的,像是沒踏實的感覺,唯有被驗證過的設計才能知道優化到底是好是壞,所以我隨後也將本作品分享給之前訪談過的親朋好友,他們也有陸陸續續給了我有用的回饋,讓我再次體會到實際的回饋才能印證設計的成敗。
Thank You

其他專案