VOXI App Design & Redesign
MY ROLE
介面設計、流程設計
PROJECT
個人專案練習
TIMELINE
一週 (2023)
專案概要
在英國留學時曾選擇 VOXI 的服務，但使用上覺得有許多不順暢的地方，因此以此為出發點，並參考周遭VOXI 使用者的使用經驗，整理出可以改善的部分進行優化，從網頁版轉換成 app 介面讓使用者視覺上不受過多的 tab bar 阻擋，功能方面強化線上客服的易達性與易用性，並進行視覺設計調整，讓使用者體驗更流暢。在此頁的最後可以查看幾個主要功能再設計的原型，可以更清楚了解修改後的使用流程與介面設計。
專案背景
關於 VOXI ...
VOXI 為英國虛擬電信服務供應商，屬歐洲最大電信 Vodafone 旗下的子公司。
問題 ...
-
與其他電信相比 VOXI 是唯一沒有 App 可以使用的電信公司，僅能以官網上推薦的方式 (iOS) – 以 safari 書籤新增至桌面充當 App。
-
網頁Tab bar 阻擋很多視覺空間。
-
有兩組 Navigation bar (下方列和側邊滑入的 menu) ，使用者在尋找功能時很混亂。
▲
兩組導航列。且下方導航列的功能並非使用者的常用功能。
?
?
▲
側邊欄無法點擊空白處關閉，必須點擊右上角的關閉鍵。
▲
側邊欄內的功能在My account 和 Home page 不同，容易導致混淆使用者。
▲
VOXI 的 logo 被網頁 Tab bar 遮住。
-
使用者經常使用線上客服功能，電腦版的線上客服需經過非常多層級的點擊才能夠尋找到；雖然手機版有較明確的路線但介面不甚符合手機使用習慣，如上方 banner 過大且擔心網頁跳出是否就須重新與客服聯繫，在排隊等待客服時不知何時輪到自己，必須一直停留在該頁面確認，使用起來壓力較大。
▲
上方 banner 佔據了將近1/3版面，導致使用者剛進入頁面時無法完整查看整個對話窗。
▲
對話框內與外層網頁皆可捲動，使用者不容易按照他們想滑動的頁面捲動。
?
?
?
?
?
目標
設計 APP 介面，
還原透過瀏覽器使用而減少的視覺空間
1
強化線上客服功能的易達性與易用性
2
Actions
-
強化視覺設計
-
整合Navigation Bar
-
縮短使用線上客服的路徑
-
調整對話框，讓使用上與通訊軟體相似
目標
A. 資訊層級架構
My plan 為打開 app 的預設畫面，使用者可在此查看他們的方案細節以及設定。另外我將原先的 Plan 改名為 Extras，將販售手機的功能一並移至Extras 內，形成 VOXI app 內的網路商店。原本的 Chat with us 我把他歸類至 Help 底下。
▲ VOXI app 資訊層級架構
B. 線框搞
設計
A. 元件設計包
B. UI 設計
1. My Plan
新設計:
-
將頁面分成三區塊：Current plan, 廣告及 Next plan
-
加入 Greeting 字眼，更貼近使用者
-
使用不同色調凸顯使用比例及方案內容
-
Extras 會顯示使用者已購買的額外功能，點擊即可查看細節。亦新增 CTA (Add more extras) 方便使用者後續購買
-
新增廣告欄位促銷，使用者可點擊關閉件鍵移除廣告，避免強硬又無法關閉的廣告引起使用者反感
-
新增 Next plan 欄位，做為提醒用途，亦可在此欄位內操作是否自動續約相同方案
2. 導航列
BEFORE:
-
兩組 Navigation Bar: 下方列及側邊欄，易混淆使用者
-
側邊欄位無法點擊空白處收回，需點擊右上角關閉鍵
-
My Account 和 Home 側邊欄內的功能不同，且下方 logo 被網頁 Tab bar 遮住
AFTER:
-
統一 Navigation Bar 至下方列
-
將原先 Phones 與 Plans 結合成 Extras：建立統一的小型商店
-
根據需求調整 Navigation Bar 主要功能
-
新增 Help
-
將原先的 VOXI Drop 及 Refer 放入 More
3. FAQs
BEFORE:
-
上方 banner 阻擋了近 1/3 的視覺空間
AFTER:
-
減少原先上方 Banner 空間
-
新增 Chat to us 並用漸層外框方便使用者尋找且與其他 FAQs 區分
4. Chat with us
BEFORE:
-
Banner (How can we help you?)過大，佔據近一半手機版面，導致剛進入頁面時無法完整查看對話框
-
對話框內與外層網頁皆可捲動，使用者不容易按照他們想滑動的頁面捲動
AFTER:
-
將對話設計如通訊軟體，版面較寬敞，亦沒有其他資訊干擾使用者
-
新增上傳照片功能，讓使用者與客服溝通更有效率；移除字體大小及提示音功能，若需調整則前往手機系統設定，無需額外設置此功能
-
使用者對話框改為對較強的顏色，使介面沒那麼單調，並調整對話框圓角角度，減少生硬感
5. 新功能：客服聊天記錄
使用者在結束對話後可查看過去與客服的對話紀錄，由於過去曾有案例是客服請使用者輸入一串代碼，但使用者還未複製代碼客服就急著關閉對話，導致使用者需重新與其他客服聯繫，造成使用者體驗不佳。因此認為新增聊天記錄可以保障使用者，也可以減少客服重複作業的負擔。
流程如下（稍後將有原型展示）：
▲ 未讀訊息會有紅點提醒
點擊 'Close the chat'
(對話結束，結案)
點擊 'Back'
(對話未結束)
1
2
▲ 正在進行的對話會顯示未讀訊息數量，而過去與客服的對話將放在Archived
▲ 使用者可查看過去與客服的對話紀錄
C. 原型展示
Login
Activate SIM
Login 和 Activate SIM 流程與原本網頁版一致，我將介面調整成手機介面，並新增幾個小細節讓使用者更清楚：
-
在 Activate SIM 中選擇方案時在已選擇方案時加上漸層外框
-
新增進度條讓使用者了解整個流程步驟
-
修改促銷優惠的圖示，讓圖示更吸睛，且將不同優惠用不同圖示區分
My Plan
Chat to us
Purchase Phone
-
上方 banner 可以自動更換，作為VOXI 的廣告看板
-
提供兩個篩選器使搜尋更有效率
-
選擇手機顏色時，會框選已選擇的款式並顯示顏色名稱
-
後續購機步驟與前面選擇方案相同，因此不放入原型中
專案反思
雖然此次的 self project 由於資源限制無法做深入的使用者調查及競品分析，僅能以身邊使用者的回饋及自身經驗來做 redesign。但經過這次 project 發現自己身為使用者時的困擾也可能是其他使用者的困擾，優化使用流程可以從這些看似微小的地方作為出發點做研究並改良。另外也發現介面設計也會影響使用者的好感度。調整後的介面得到正面回饋覺得視覺效果更舒服，相較過去的設計會覺得新設計更活潑。在重新調整設計的過程中我仍保留了品牌個性，避免使用者對品牌認同頓時產生太大的落差而有疑惑與抗拒。希望未來 VOXI 也能做相關的改變，帶給使用者更好的體驗。
This website is best viewed on desktop.
Made with love and a loud laptop fan.
©2023 Alison lin
