JoeOkami
← All work

01

AQUILA PRO AI

Advanced router settings, redesigned so a parent will actually tap them and an engineer still finds what they need.

The 30-second version

The problem
Mesh Wi-Fi is sold to ordinary households, but only people who understand networking could set it up. When setup fails, the box goes back or support gets a call.
What we did
We had ten colleagues with no networking background set it up alone from the box, and found five sticking points. The three inside the app were redesigned. I also moved the three most-used tasks from three levels deep to one.
Result
Shipped and still on sale. Related operation errors down by an estimated 70% (from support tickets, not a controlled test). Colours pass WCAG AA.

My part

  • Framing the research questions
  • User research & usability testing
  • Design strategy from research
  • Interface design & prototyping
  • Design system handoff

Platforms

  • iOS
  • Android

Team

  • 1 UX designer
  • 2 UI designers (incl. me)
  • iOS engineer
  • Android engineer
  • Product owner

Client & timeline

  • D-Link
  • 2023 – 2025.10
Three AQUILA PRO AI app screens: sign-in, the home dashboard with room devices, and the scenes list.

Background

A Wi-Fi app built from zero

AQUILA PRO AI is D-Link's mesh Wi-Fi system. The app had no previous version to build on.

Three constraints came with it: a tight launch date, support for older hardware, and colours that had to match marketing. The goal was simple: someone who knows nothing about networking should still be able to set it up. A failed setup means a returned box or a support call, so we put most of the effort into setup.

Competitors

What we took from HomeKit and LG ThinQ

HomeKit hides the technical detail: people only see rooms and devices. We kept that, but a router can't hide everything, because the network itself is what we sell.

LG ThinQ checks its own hardware. That fits a router well: when something breaks, the first question is whether the device is the problem.

Three Apple HomeKit screens.
LG ThinQ screens, including Smart Diagnosis.

Research

Testing with the people most likely to fail

We asked ten colleagues with no networking background to set up the previous model, the Eagle Pro AI M32, on their own. We watched from unboxing all the way to getting online, not just the app.

10
people tested
5
sticking points
2
outside the app
A timeline of the unboxing journey in seven stages, with the five sticking points pinned where they appeared.
Three sticking points were in the app. The other two, packaging and the look of the device, went to the hardware and packaging teams.

Proposals

We proposed A and B. C shipped.

One proposal was conservative, the other rewrote the flow. Neither was picked. Seeing both ends helped the decision-makers point to the direction they wanted, and that became C.

Proposal A screens.
Proposal A: keep the structure, one page per feature.
Proposal B in green, purple and blue.
Proposal B: scenes pinned to the top.
The shipped direction, three screens.
C: the version that shipped.

Highlight #1

Setup: fewer words, more pictures

Problem. Nobody read the instructions. Nobody could find the Setup Code printed on the device. People who switched to the device's Wi-Fi often couldn't find their way back.

What changed. People choose their setup path on the first screen instead of halfway through. Every step has an illustration showing where the button or code is on the device. The Wi-Fi switch happens inside the app, with progress and an expected wait time.

Three setup screens: choosing a connection type, scanning a QR code, and a floor plan showing where to place the extender.

Highlight #2

Tab Bar: the top three tasks, one tap away

Problem. Switching devices, checking live video and changing alerts were the most common tasks, all buried three levels deep. "I can't find it" kept showing up in support tickets.

What changed. I restructured the Tab Bar to bring all three to the first level, with the same navigation on iOS, Android and web. The structure later became the navigation standard in the company design system.

3 → 1
levels to the top tasks
~70%
fewer related errors (estimated from support tickets)

Highlight #3

Activity: keep the place, fix what's inside

Problem. Recordings showed people opening Activity and leaving within two seconds. They could find it. There just wasn't anything worth staying for.

What changed. I didn't move it or add a red dot, because both would only bring more people to an empty page. Now each event opens the video clip from the moment it happened, and you can pin the events that matter so they don't get pushed down the timeline.

Activity before and after adding pins.
The "before" is reconstructed from the shipped version, since the old file no longer exists. The circled parts are the pin feature.

Highlight #4

Making the AI visible

Problem. The better automatic optimisation works, the less anyone notices it's doing anything.

What changed. The app saves a weekly report and tells you what it did that week. Scenes come with presets (Arrive, Leave, Sleep) or you can build your own, with a small animation on each tap so you know it worked.

  • Arrive
  • Leave
  • Sleep
  • New scene
  • Pet
  • Vacation
The original Lottie files handed to engineering. Hover or tap to replay.

Highlight #5

A colour system that passes by default

Every colour in the palette was contrast-checked first, and screens can only use colours from it. Every status uses colour, an icon and text together. Specs go down to the point, and I wrote the micro-animation code myself.

AA
WCAG, all colours
AAA
WCAG, primary text
A page from the colour spec: text, text buttons, backgrounds, icon buttons and states, each with a swatch and hex value.

Looking back

Three things I'd do differently

  1. 1

    Measure before the redesign. Without a baseline I can't prove setup got better.

  2. 2

    Add a few people who do know networking, to see which problems everyone has.

  3. 3

    Agree on the criteria with the decision-makers before proposing.

Looking for a product designer or product manager?

I’m open to product design and product management roles, in-house or remote. Happy to walk through any of these cases in detail.