JoeOkami
← 回到案例列表

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
AQUILA PRO AI 的三個畫面:登入頁、含房間裝置的首頁儀表板,以及情境模式列表。

背景

從零開始的 Wi-Fi App

AQUILA PRO AI 是 D-Link 的 Mesh Wi-Fi 系統,App 從零開始做,沒有前一版可以參考。

限制有三個:時程趕、要相容舊機型、配色要跟行銷統一。目標很單純:不懂網路的人也要裝得起來。裝不起來就會退貨、打客服,所以資源先集中在安裝流程。

競品

向 HomeKit 和 LG ThinQ 學的事

HomeKit 把技術細節藏起來,使用者只看到房間和裝置。這點我們學了,但路由器不能全藏,因為我們賣的就是網路本身。

LG ThinQ 會自己做硬體檢測。這很適合路由器:東西壞掉時,使用者第一個想知道的就是「是不是機器有問題」。

Apple HomeKit 的三個畫面。
LG ThinQ 的畫面,包含 Smart Diagnosis 硬體檢測。

研究

找最容易裝失敗的人來測

我們請 10 位不熟網路的同事,拿上一代機種 Eagle Pro AI M32 自己裝。不只測 App,從拆箱一路看到真的能上網。

10
位受測者
5
個卡點
2
個不在 App 裡
開箱流程的七個階段,五個卡點標在它們出現的位置。
3 個卡點在 App 裡,另外 2 個(包裝配色、機身外型)交給硬體和包裝團隊。

提案

提了 A 和 B,上線的是 C

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

提案 A 的畫面。
提案 A:流程不動,每個功能各自一頁。
提案 B 的綠、紫、藍三種版本。
提案 B:情境按鈕放到最上面。
最後上線的方向,三個畫面。
C:最後上線的版本。

Highlight #1

安裝流程:少看字,多看圖

問題:沒人讀說明文字;機身上的 Setup Code 沒人找得到;切到裝置的 Wi-Fi 之後,很多人就回不來了。

改法:第一步就選好安裝路徑,不會走到一半才發現錯。每一步都配插圖,直接標出按鈕和 Setup Code 在機身哪裡。切換 Wi-Fi 包進 App 引導,等待時顯示進度和預計時間。

安裝流程的三個畫面:選擇連線方式、掃描 QR code、標出延伸器擺放位置的平面圖。

Highlight #2

Tab Bar:常用功能拉到第一層

問題:切換裝置、看即時影像、調警報,這三件最常做的事都埋在三層選單下。客服工單裡一直出現「找不到功能」。

改法:我重整了 Tab Bar,把三件事拉到第一層,iOS、Android、Web 用同一套導航。這套結構後來成為公司設計系統的導航標準。

3 → 1
層選單
~70%
相關操作錯誤減少(依客服工單推估)

Highlight #3

Activity:位置不動,改裡面的內容

問題:從 recording 看到,使用者點進 Activity 兩秒就退出。他們找得到,只是裡面沒有值得看的東西。

改法:我沒有把它往前挪,也沒加紅點,那只會讓更多人點進空頁面。改成每個事件都能直接看當下的影片片段,重要的事件也能 pin 起來,不會被時間軸沖掉。

Activity 加入釘選功能的前後對照。
舊版檔案已經不在,左邊是從上線版還原的樣子。圈起來的是新增的釘選功能。

Highlight #4

讓 AI 被看見

問題:自動優化做得越好,使用者越感覺不到它有在做事。

改法:系統每週存一份報告,主動告訴使用者這週幫忙做了什麼。情境模式有預設的回到家、出門、睡覺,也能自己建,每次點選都有動態回饋,讓人知道有生效。

  • 回到家
  • 出門
  • 睡覺
  • 新增情境
  • 寵物
  • 出遊
交給工程師的原始 Lottie 檔。滑過去或點一下可以重播。

Highlight #5

配色規範:先通過檢驗再開始用

先訂一組通過對比檢驗的色票,所有畫面只能從裡面取色。每個狀態都同時用顏色、圖示和文字表示。規格標到 pt,微動畫的程式碼是我自己寫好交給工程師的。

AA
WCAG,全部配色
AAA
WCAG,主要文字
色彩規範的其中一頁:文字、文字按鈕、背景、圖示按鈕與狀態,每一項都標上色塊與色碼(圖上文字為英文)。

回顧

重做一次會改的三件事

  1. 1

    改版前先量數字。沒有改版前的數據,就證明不了改版後變好。

  2. 2

    受測者加幾位懂網路的人當對照,才知道哪些問題是所有人都有的。

  3. 3

    提案前先跟決策者對齊判斷標準,可以少繞一圈。

在找產品設計師或產品規劃的人嗎?

我開放產品設計與產品規劃的職缺機會,進辦公室或遠端都可以。任何一個案例都能細講。