
About
由公司內部自主發起的 Side Project,蒐集來自 2C 使用者、2B 企業用戶的實質反饋,針對主要頁面來進行調整,主要想要改善資訊混亂不易閱讀、名稱不統一、介面需更直覺,系統缺乏一致性、操作流程容易卡卡⋯⋯等,整體 APP 當時總是給人一種拼拼湊湊的感受,用起來有點沒有把握,嚴重可能導致使用者對產品的信賴度降低。另外,在視覺上也希望能升級更有品牌感。
What's Problems
操作流程不順暢
- 輸入地址時易忽略城市 & 行政區
- 優惠券使用容易忽略,或不擇最優
資訊雜亂易混淆
- 文字資訊一致性低
- 配送狀態狀態不直覺
介面缺乏統一性
- 各分頁資訊分佈,統一性低
- 整體資訊閱讀性低
Login / Register
Page 01:選擇要註冊的帳戶類型
強化品牌感,加入更多的橘色調與送貨員角色,將個人與企業用戶用更簡潔明確的圖區分,並在底下放入按鈕,提示使用者需要選擇註冊身份來開始流程。
弱化「跳過」,改「略過」並放置於右下角,因為希望提高使用者成為會員的機率與數量,以利更進一步的管理。
並隱藏「」,因為此按鈕會導向登入頁,等同於「已經有帳號了?」的功能。
Page 02 / 03:個人、企業用戶註冊頁面
將資訊整理,減輕畫面文字過多的壓迫,讓使用者能感受註冊其實很輕量且快速。
Home
Page 01:起始頁
縮短 Hero Banner 的高度,並將「、」置於底部並提高層級,增加畫面可呈現資訊的空間。
透過按鈕來提示使用者可執行的行為,例:輸入地址。
Page 02:輸入地址
輸入地址改用彈窗的模式,減少寄件總是給人填寫冗長資訊的感受。並把「城市」與「行政區」改用下拉選單,降低使用者下意識沒有完整確認詳細地址的機率,例:板橋區中正路、新莊區中正路⋯⋯等。
Page 03:選擇車型
取件與送件地址填寫完成,按鈕文案為「選擇車型」,引導使用者接下來的操作行為。
Delivery Process
Page 01:點擊車型後,展開加購項目
強化主層級與次層級選項的關係。
由於此步驟重點在於「選擇適合的車型」,所以弱化價格區塊,但仍保持價格明顯可視。
Page 02:點擊價格區塊,展開詳細價目
展開資訊視窗後,可選擇價格方案及查看價格明細。
並把「下一步」按鈕,文字調整為「確認訂單 」,更明確預告使用者接下來的步驟。
Page 03:確認訂單內容
總覽完整的訂單內容,按鈕文案為「開始配送 」,預告行為。
Page 04~06:即時的訂單狀態
標題明確說明目前訂單的配送狀態,搭配底部按鈕「添加小費 」、「分享進度 」、「完成 」。
Menu / News
Page 01:Menu
點擊「」展開左側導覽列,搭配毛玻璃效果增加層次,強化個人資訊拉近品牌與使用者距離。
放大底部 Banner 的範圍,讓整體 APP 規格對齊,例:尺寸、圓角樣式。
Page 02:News
點擊「」展開右側通知,一樣為毛玻璃效果增加層次。
合併「通知 / 促銷活動」分類(因為前者為純文字,後者為文圖,但容易有資訊重複的使用情況),統一為圖片,引導使用者點擊。
Account
除了基本資料外,也將常用資訊整理在「帳戶資訊」中,包含:發票方式、常用資訊、接收通知、登出⋯⋯等。
Order List
主要考量「多張訂單同時配送中」的情境,視覺上強化「車型、時間、訂單類型」能更直覺的提高使用者快速辨識訂單。
將訂單編號也整理至卡片中,方便快速提供客服人員核對資訊。
點擊訂單卡片後才展開更多詳細資訊。
Digital Wallet
Page 01:新增第一張卡片
此頁首要目標是引導使用者完成「新增卡片」,進而再完成儲值,所以加入 Banner 區塊適時溝通儲值優惠增加意願。
Page 02:填寫卡片資料
開始新增則展開區塊,提供必要欄位,底部按鈕則顯示「確定新增」。
Page 03:預設付款卡片
新增後的卡片,收集在「付款方式」的頁面裡,透過勾選 Radio Button 設定預設付款卡片。
已有預設付款卡片後,底部按鈕則為「前往儲值」,引導使用者進行儲值。
Page 04:儲值
儲值方案的頁面,一樣也是由區塊構成,讓系統保有一致性。
點擊方案區塊後,會展開更詳細的方案內容,按下「確定儲值」,即可透過合作的金流系統完成儲值。
My Drivers
加入 Banner,溝通不同車型間目前的優惠,只要有合作過便可得知司機的手機號碼,也輸入司機手機號碼來收藏司機。
一個手機號碼只能註冊一種車型,以 Tab 區分車型、每位合作愉快的司機。
右上角快速標示出司機的在線狀態,且頭像有等級徽章來提示使用者此位司機的經驗值,另外基本的車牌資訊也讓使用者一目了然,滿足需預先溝通的情境(例:使用者本人,不會出現在整趟配送流程中)。
選擇欲合作的司機後,點擊下方「邀請接單」按鈕後,即引導使用者填寫送貨資訊。
Rewards
加入 Banner 加強宣傳 Lala Points ,提高使用者互動意願。
點擊獎勵項目則會展開更多相關資訊,按下「兌換獎勵」,則會移動至「已兌換」的 Tab 中並扣除 Lalapoints。
Coupon
加入 Banner 宣傳更多優惠資訊,提高使用者下單意願。
輸入優惠代碼顯示於第一個欄位,並透過「可使用、已使用、已過期」三種 Tab 來整理使用者的優惠券。
選擇好優惠券之後,按下「使用優惠」即引導使用者填寫配送資訊。
Referral
加入 Banner 宣傳邀請好友的優惠資訊。
將目前邀請好友累積的獎勵金,顯示於第一個欄位。
優化整體畫面的資訊,先從 Banner 開始營造邀請好友的優點,目前累積的獎勵金,清楚的邀請步驟,再來是明確須知的細則與條款、最後維持 APP 的一致性,讓一個畫面只有一顆重要的按鈕「分享邀請碼」。
Customer Service
將各類問題重新分類,改為下拉式的問答選單,強力優化原本需要點擊 3 ~ 4 次才能到達答案頁面的操作流程,有望大幅節省客服資源。
