Skip to content

Robot Vacuum App

The map is the interface.

Product UX · Interface Design · 2026

Role
Product & Interface Designer
Context
Istanbul Bilgi University · concept project
Team
Individual project
Timeline
5 weeks
Tools
Figma
Vacuum App — home screen during a clean

A robot that works where you are not

A robot vacuum does its job in rooms you are not in. Every complaint about these products is really the same complaint — you cannot tell what it is doing, where it has been, or why it stopped.

So the map is the interface. Every screen below is shown whole and in the order a real owner meets it, from the first launch to the report that arrives when the robot docks itself.

First run

Three slides, then out of the way. Onboarding earns about fifteen seconds of attention, so it makes three promises and stops.

Vacuum App — Arçelik splash screenVacuum App — onboarding: clean from anywhere
Vacuum App — onboarding: smarter navigationVacuum App — onboarding: set it and forget it
Vacuum App — the app icon on an iOS home screen

Pairing the robot

The riskiest five minutes of ownership. Every step says what is happening and what to do if it doesn't — including the escape hatch for a QR code that has already worn off the underside of the unit.

Vacuum App — add device: three preparation stepsVacuum App — scanning the QR code under the robot
Vacuum App — choosing the robot by model insteadVacuum App — connecting the robot to Wi-Fi
Vacuum App — connected, ready to map

Learning the floor

The first map is built once and edited forever. Making the editor part of setup — rather than burying it in settings — means the room names are right before the first real clean.

Vacuum App — tips for an accurate first scanVacuum App — the robot scanning the floor live
Vacuum App — the completed floor scanVacuum App — map editor with a room selected
Vacuum App — map editor showing all roomsVacuum App — renaming a room

Choosing the clean

Three ways to say the same thing — the whole home, named rooms, or a box drawn round the thing the dog just did. All three live on one screen, behind a segmented control, with suction, water flow and route on a single sheet.

Vacuum App — drawing a zone on the mapVacuum App — selecting rooms to clean
Vacuum App — rooms colour-coded on the mapVacuum App — cleaning settings: suction, water flow, route

While it runs

The map keeps drawing itself while the robot works. When something goes wrong, the app says where — a location is more useful than an error code. The clean ends with filter, brush and bin levels rather than a bare number.

Vacuum App — home screen during a cleanVacuum App — the route drawing itself on the map
Vacuum App — a stuck-robot banner on the mapVacuum App — robot needs help modal
Vacuum App — cleaning complete with consumable levels

Living with it

Everything that isn't the clean itself: the dock, the schedule, the quiet hours, and the notifications that should arrive exactly three times a week and never more.

Vacuum App — control centre listing dock and schedule settingsVacuum App — notification history

The whole thing, moving

A high-fidelity Figma prototype covering pairing, mapping and a full clean end to end. Static screens can show a layout; only the prototype shows whether the sheet that covers the map is worth what it costs you.

Twenty screens in grey

The whole product was built once in wireframe before a colour was chosen. Structure, hierarchy and flow were argued out here, where changing your mind is cheap — launch through to the dock, in the order an owner meets them.

Vacuum App — wireframe — splashVacuum App — wireframe — onboarding 1
Vacuum App — wireframe — onboarding 2Vacuum App — wireframe — onboarding 3
Vacuum App — wireframe — pairing stepsVacuum App — wireframe — QR pairing
Vacuum App — wireframe — pick by modelVacuum App — wireframe — connecting to Wi-Fi
Vacuum App — wireframe — scan tipsVacuum App — wireframe — scanning
Vacuum App — wireframe — map editorVacuum App — wireframe — renaming a room
Vacuum App — wireframe — drawing a zoneVacuum App — wireframe — selecting rooms
Vacuum App — wireframe — the live mapVacuum App — wireframe — cleaning settings
Vacuum App — wireframe — control centreVacuum App — wireframe — stuck robot
Vacuum App — wireframe — needs helpVacuum App — wireframe — cleaning complete

Legible at arm's length

A light, high-contrast interface so the live map reads at a glance in a bright room, with every control surfaced as a sheet over the map rather than a page away from it.

What I'd do next

Usability-test the pairing flow with someone unboxing a real unit, and design a proper error and recovery state for a robot that is stuck or lost.