Instead of a fixed step-by-step journey, I designed setup as a state machine: every moment, good or bad, has a clear screen and a clear way out.
An independent concept project by Arif Khan. Not affiliated with or commissioned by Sonos.
Setup is where users first meet a product. When it breaks, they contact support, return the speaker, or leave a bad review.
A setup system built on states (Idle, Connecting, Error), with a recovery path mapped for every error.
Stop problems before they turn into support tickets, and give designers and developers one shared language.
In May 2024 Sonos released a redesigned app that many customers found flawed. Public reporting from that time shows the scale of the impact.
Company estimate, given to investors by the CEO.
The top end of the yearly revenue forecast was lowered.
Planned Q4 launches were postponed to focus on the app.
These are company estimates and forecasts reported in 2024, not the exact cost of setup issues alone.
A normal setup flow assumes everything goes right. Real homes don’t. So every state the speaker can be in gets its own clear screen, and every error gets a mapped way to recover.
Simplified view of the idea.
A strict 44×44px boundary grid prevents accidental taps across phone, tablet and desktop.
The layout shifts with hardware status, and sub-menus keep users informed during network dropouts.
Manual network entry lets users join hidden networks without resetting the speaker.
The setup code is split into 6 isolated layers, from style components down to network provisioning adapters. Device states map directly to what users see on screen.
Simplified illustration.
Turn the component framework into a shared asset that performs consistently on mobile, tablet and desktop.
Use local device discovery to spot network problems before a connection fails completely.
Extend the tokenized design variables to future smart-home platforms and new speaker lines.
Good setup design doesn’t just look right.
It stops problems before they start.