威秀影城
App Redesign

UI/UX design
簡介
針對舊版2.0.0之前版本改造。實際演練app開發流程,搜集用戶評價,分析用戶痛點,畫出site map得知產品問題,再根據使用者需求改善威秀影城app的頁面呈現方式與使用流程。

專案中負責:UI/UX 設計
Redesign 動機
這是一次自發性的練習,某次同儕間使用該 app 購票時發現許多功能沒有在預想的位置上,必須花一段時間找尋找,導致購票流程不甚愉快。
原始app分析
用戶評價
分析Google Play 與 App Store 上的用戶評價,多數用戶反應無法順利登入app、操作複雜、無法持電子票證入場、web app 不同步等問題。上述為程式bug與介面設計上多面向問題。
用戶分析
使用威秀影城 app 的族群就是有打算來影城消費的顧客,他們善於提前規劃所以選擇線上購票,他們重視觀影品質所以選擇票價較貴的威秀,他們可能要以信用卡買優惠票,顧客可以是上班族、學生等。針對學生與上班族制定 persona ,幫助團隊了解目標用戶需求。
  • 查詢場次與訂票:用戶若已經明確想看哪部電影,那查詢場次與快速訂票會很重要。
  • 想看該影城所放映的電影:還不知道要看什麼的用戶需要熱門電影目前放映即將上映的分類。
  • 管理票券:用戶在訂購票券後需要對票券進行其他動作如退換票、驗票、查看等,故需要一個管理票券的地方。
  • 持特殊優惠購票:ishow 會員、學生、老人都有優惠票,信用卡也有特殊優惠,故線上認證身份是需要的。
  • 電子票券入場:線上購買後直接持電子票入場,不需要再現場購票或是現場網路取票。
競品觀察
觀察各大影城與具有訂購使用流程的 app:
  • 秀泰生活
  • 美麗華影城
  • 看電影
  • Accupass
根據用戶評價,前兩家影城的低分評價有許多是因為用戶無法順利登入。 與威秀 app 很大的不同是,競品皆使用更為直觀的 tab bar 設計而不是漢堡選單。影城 app 都有快速購票的功能,唯獨威秀影城沒有,無法滿足單純購票用戶的需求。
架構分析
由原始 app 架構可分析出以下幾點:
  • 七個主要功能:電影購票、場次查詢、我的票夾、我的訊息、我要退票、會員設定與使用說明
  • 整合同類型功能:“我的票夾”、"我要退票"
  • 合併功能:“使用說明” 不常用故併入"會員中心"
  • 新增功能:app 沒有獨立購票功能,想買票只能從查詢影片開始,故新增 "快速購票"
  • 刪除功能:刪除“我的訊息” 功能,因為根本無法使用
  • 購票流程冗長:九步驟才能完成購票
  • 電影查詢流程冗長:刪去不必要的 “電影海報” 頁面,以電影列表接續電影內容即可。
實際使用後
原始購票流程
使用購票流程後發現以下痛點:
  • 耗時的會員登入:根據官方說明,沒有會員不能線上購票。會員分兩種( ishow 與一般會員)ishow 會員可享購票優惠,一般會員只能線上購票沒有優惠。註冊一般會員既沒有優惠且過程相當耗時,簡化為綁定 email 或以 gmail 、 fb 快速登入。
  • 驗證優惠身份:根據官網規定,優待票必須現場購票,因此不需要放在購票流程的選擇。於會員設定新增驗證優惠身份的功能,就能讓特殊身份的用戶可以在線上購票如:學生票、敬老票、身障票等。
  • 合併票種選擇的可行性:票種分3類( 套票、一般、信用卡優惠),套票包含餐點跟電影券。流程改為先買票再選餐點,避免用戶選了套票反悔不想購餐,選一般票又想購餐,結果必須重新選擇票種。信用卡優惠可於填寫付款方式時套入,不需獨立分類。
  • 購物明細與付款設定合併:購物明細後方設定付款方式。
  • 先選票種後選座位的疑慮:後選座位容易導致用戶不滿意該場次剩餘座位,就必須重頭開始整個購票流程。故在輸入票數後加入預覽座位的功能。
更改後的購票流程
iBeacon 入場問題
  • 電子票必須同時入場:iBeacon 技術限制,相同裝置購買的電影票必須同時入場,有人遲到會很尷尬,且根據用戶評價入場有訊號不穩定的問題。新增分享票券功能,用戶就能陸續進場。
分票流程
領票流程
主要改造重點
更改後的 app 架構
Wireframe
以墨刀繪製 Wireframe,但在後期 mockup 製作時發現流程與灰階圖設計有些許問題,故來回修改多次。
1.調整app整體架構
2.優化購票流程
3.優化持電子票入場流程
4.主畫面功能列表( tabbar 取代漢堡選單 )
5.簡化登入方式
6.簡化電影查詢流程
7.新增快速購票

改造前後

Prototype

https://marvelapp.com/8hi60f7/screen/42965135
以 Marvel 做 Prototype 模擬產品體驗。