寬宏售票 ─
app Redesign
app Redesign
我們針對原有繁雜冗長的購票流程的與 UI 混淆問題，從實測與使用者回饋出發，重新設計購票與註冊使用者流程，優化整體視覺與操作邏輯，提升購票效率與體驗流暢度。
PROJECT DETAILS
TIMELINE
Nov. - Dec. 2023 8weeks
ROLE
UIUX Designer
MEMBER
UIUX x3
此概念為學生課堂作品，並非實際提案。
%20(1).png)
專案背景
重新定義購票體驗，讓直覺成為標準
寬宏售票為台灣知名演唱會與藝文活動售票平台，但其 App 常被反映介面不直覺、流程繁瑣，甚至導致購票誤操作。為改善用戶體驗，我們針對註冊與購票流程進行 UX 架構重整與 UI 設計更新，提升操作的直覺性與流暢度。
核心理念
以用戶為中心，透過實際使用者訪談與前測反饋，洞察用戶痛點。
簡化流程，讓使用者能在短時間內完成購票，減少多餘步驟與資訊干擾。
視覺與操作一致性，修正原有主色紅色色彩誤導，並強化行動指引與icon標示。
挑戰與
解決方案
解決方案
問題
解決方案
視覺設計缺乏規劃
主色紅色佔比過高，資訊強調性不足、界面視覺焦點不明確
主色紅色佔比過高，資訊強調性不足、界面視覺焦點不明確
視覺與介面優化
大幅降低紅色主色佔比，建立清晰的視覺階層
大幅降低紅色主色佔比，建立清晰的視覺階層
搜尋與導覽困難
首頁無法直接搜尋活動，使用者無法直接查找活動
首頁無法直接搜尋活動，使用者無法直接查找活動
功能完整性
導入活動搜尋與分類功能，降低尋找場次與活動的時間成本
導入活動搜尋與分類功能，降低尋找場次與活動的時間成本
前測量化數據
任務一：平均難度 2.22 分
任務一：平均難度 2.22 分
任務一：註冊帳號並重新登入
任務一 | 使用者反饋
帳號與欄位提示不清 :
「會員 ID」未明確標示須填寫身分證字號，易誤認為是電子郵件
表單結構與操作流程不友善 :
缺乏返回鍵
過度依賴下拉選單，選項過長，降低填寫效率
介面設計與視覺問題 :
整體介面布局與偏向電腦版設計，不符合行動端操作邏輯
主色使用過多紅色，易與錯誤警示混淆
前測量化數據
任務二：平均難度4.1分
任務二：平均難度4.1分
任務二：實際完成購票流程
任務二 | 使用者反饋
頁面流程設計 :
缺乏搜尋功能、返回鍵或步驟回溯設計
活動資訊層級過於雜亂
座位與票價選擇問題 :
座位選區與選位應整合在單一頁面，避免頻繁切換
缺乏完整座位圖總覽
選擇票種時介面標示不清
操作回饋與流程引導不足 :
缺乏視覺與文字引導，使用者不易辨識操作狀態是否成功
根據個別訪談統計結果，前測的系統可用性量表（SUS）平均得分僅為 32.8 分（屬於等級 F），
反映出整體使用體驗極待改善。此外，App Store 上的負評亦多集中於功能不完整與操作流程複雜、不直覺等問題。
重構使用者購票流程
重新設計購票流程頁面，簡化操作步驟，讓用戶能順暢完成購票體驗
現代化的介面設計
減少主色紅色在畫面中的佔比，並打造具備品牌識別性專屬 UI 元件
優化登入介面
另外規劃登入畫面，採用簡潔留白與一致字級風格，強調主要操作區塊（如登入、註冊按鈕），讓使用者更快理解流程。
Before
After
優化註冊介面
僅在必要時出現警示文字，避免預設全部顯示紅字，提升整體親和力與可讀性。
Before
After
優化首頁介面
導入活動搜尋與分類功能，降低尋找場次與活動的時間成本。
省略紅色區塊保持簡潔留白一致風格
省略紅色區塊保持簡潔留白一致風格
.png)
Before
After
優化購票流程
導入「下一步」行為引導機制，將按鈕固定在畫面下方強化階段性任務指引，重建資訊層級，優化標題、時間與地點的呈現順序
Before
After
重構後，購票所耗費的時間平均減少32秒
優化選票介面
更改選位初始狀態為場地全景圖，幫助使用者清楚理解座位的實際位置
同時新增步驟導引顯示，並透過下方固定按鈕提示下一步行動，強化流程透明度與操作引導。
同時新增步驟導引顯示，並透過下方固定按鈕提示下一步行動，強化流程透明度與操作引導。
Before
After
Before
After
優化付款、付款完成介面
以淺黃色警示背景替代紅色，減少造成用戶視覺壓力
重構關鍵資訊的顯示，整體畫面整合入場資訊與條碼，讓使用者更直覺地取得票券相關內容
重構關鍵資訊的顯示，整體畫面整合入場資訊與條碼，讓使用者更直覺地取得票券相關內容
Before
After
Before
After
優化票券介面
重新設計票券的資訊顯示內容
並新增條碼入場頁面，結合票券設計打造具備品牌識別性專屬 UI 元件
並新增條碼入場頁面，結合票券設計打造具備品牌識別性專屬 UI 元件
Before
After
重新定義售票體驗，讓直覺成為標準
crafting the
design system
design system
.png)
