01
AQUILA PRO AI
把路由器的進階設定,做成家裡長輩也敢按的 App,工程師要的除錯資訊也還在。
30 秒看完
- 問題
- Mesh Wi-Fi 賣給一般家庭,但只有懂網路的人裝得起來。裝不起來,就退貨、打客服。
- 做了什麼
- 我們找 10 位不熟網路的同事從拆箱開始自己裝,抓出 5 個卡點,App 裡的 3 個重新設計。我另外把最常用的三件事,從三層選單拉到第一層。
- 結果
- 已上線,還在賣。相關操作錯誤推估少了約七成(依客服工單推估)。配色全數通過 WCAG AA。
我負責的部分
- 定義研究問題
- 使用者研究與易用性測試
- 從研究推導設計策略
- 介面設計與原型製作
- 設計規範交付
平台
- iOS
- Android
團隊
- 1 位 UX 設計師
- 2 位 UI 設計師(含我)
- iOS 工程師
- Android 工程師
- PM
客戶與時間
- D-Link
- 2023 – 2025.10

背景
從零開始的 Wi-Fi App
AQUILA PRO AI 是 D-Link 的 Mesh Wi-Fi 系統,App 從零開始做,沒有前一版可以參考。
限制有三個:時程趕、要相容舊機型、配色要跟行銷統一。目標很單純:不懂網路的人也要裝得起來。裝不起來就會退貨、打客服,所以資源先集中在安裝流程。
競品
向 HomeKit 和 LG ThinQ 學的事
HomeKit 把技術細節藏起來,使用者只看到房間和裝置。這點我們學了,但路由器不能全藏,因為我們賣的就是網路本身。
LG ThinQ 會自己做硬體檢測。這很適合路由器:東西壞掉時,使用者第一個想知道的就是「是不是機器有問題」。


研究
找最容易裝失敗的人來測
我們請 10 位不熟網路的同事,拿上一代機種 Eagle Pro AI M32 自己裝。不只測 App,從拆箱一路看到真的能上網。
- 10
- 位受測者
- 5
- 個卡點
- 2
- 個不在 App 裡

提案
提了 A 和 B,上線的是 C
A 保守、B 激進,兩個都沒被選上。但看到兩個極端之後,決策者才說得出想要的方向,那就是最後上線的 C。



Highlight #1
安裝流程:少看字,多看圖
問題:沒人讀說明文字;機身上的 Setup Code 沒人找得到;切到裝置的 Wi-Fi 之後,很多人就回不來了。
改法:第一步就選好安裝路徑,不會走到一半才發現錯。每一步都配插圖,直接標出按鈕和 Setup Code 在機身哪裡。切換 Wi-Fi 包進 App 引導,等待時顯示進度和預計時間。

Highlight #2
Tab Bar:常用功能拉到第一層
問題:切換裝置、看即時影像、調警報,這三件最常做的事都埋在三層選單下。客服工單裡一直出現「找不到功能」。
改法:我重整了 Tab Bar,把三件事拉到第一層,iOS、Android、Web 用同一套導航。這套結構後來成為公司設計系統的導航標準。
- 3 → 1
- 層選單
- ~70%
- 相關操作錯誤減少(依客服工單推估)
Highlight #3
Activity:位置不動,改裡面的內容
問題:從 recording 看到,使用者點進 Activity 兩秒就退出。他們找得到,只是裡面沒有值得看的東西。
改法:我沒有把它往前挪,也沒加紅點,那只會讓更多人點進空頁面。改成每個事件都能直接看當下的影片片段,重要的事件也能 pin 起來,不會被時間軸沖掉。

Highlight #4
讓 AI 被看見
問題:自動優化做得越好,使用者越感覺不到它有在做事。
改法:系統每週存一份報告,主動告訴使用者這週幫忙做了什麼。情境模式有預設的回到家、出門、睡覺,也能自己建,每次點選都有動態回饋,讓人知道有生效。
- 回到家
- 出門
- 睡覺
- 新增情境
- 寵物
- 出遊
Highlight #5
配色規範:先通過檢驗再開始用
先訂一組通過對比檢驗的色票,所有畫面只能從裡面取色。每個狀態都同時用顏色、圖示和文字表示。規格標到 pt,微動畫的程式碼是我自己寫好交給工程師的。
- AA
- WCAG,全部配色
- AAA
- WCAG,主要文字

回顧
重做一次會改的三件事
- 1
改版前先量數字。沒有改版前的數據,就證明不了改版後變好。
- 2
受測者加幾位懂網路的人當對照,才知道哪些問題是所有人都有的。
- 3
提案前先跟決策者對齊判斷標準,可以少繞一圈。

