One token layer, seven platforms

Led the Sector Alarm design system: one token layer serving 7 platforms simultaneously (iOS, Android, tablet, Apple Watch, Wear OS, web, desktop). Built all platforms from the same token layer rather than iOS-first to prevent a hierarchy where everything else becomes a port. CSAT: 48% to 91%. Red Dot + iF Design Award 2022.

  • Security
  • Design system
Sector Alarm design system, case study

Context

Sector Alarm is Europe's leading residential security provider. The product runs across seven platforms: iOS, Android, tablet, Apple Watch, Wear OS, web, and desktop. Each was designed and built independently, with its own patterns and visual language. 50% of customers reported difficulty managing security settings across devices. For a product where the core promise is peace of mind, a fragmented interface is a trust problem, not a UX problem. It says, implicitly, that the product doesn't hold together.

Challenge

No shared token layer, no design system, no engineer-accessible documentation. Every designer on every platform was solving the same spacing, colour, and interaction decisions independently. Any new pattern required a designer to be involved with every team that needed it. The most common approach to fixing this, iOS first, then extend to other platforms, creates a permanent hierarchy where iOS is the reference and everything else is a port. That wasn't the right model for a product that had to feel consistent whether you were arming your home on an Apple Watch or checking a sensor on a desktop browser.

My role

Lead designer on the system, via NoA. I owned the token architecture, component library, cross-platform coverage strategy, and the documentation written for engineers. The project ran from February 2021 to March 2022.

What I changed

  • Built one token layer across all 7 platforms simultaneously rather than iOS-first then extend. Colour, typography, spacing, and motion defined at the token level before any component was built. Every platform draws from the same source, none can drift because all are downstream of the same definitions. No per-platform forks.
  • Rejected the library-first approach. A shared Figma library fixes visual inconsistency between designers. It doesn't fix how engineers consume the system, and that's where most design intent breaks down in production. Tokens give engineers and designers the same source of truth.
  • Documentation written for engineers and deployed via ZeroHeight as implementation guidance, not design specs. If an engineer can build a correct implementation without asking a designer, they will. The failure mode I was designing against was a system that required constant designer involvement to adopt.
  • Coverage: iOS, Android, tablet, Apple Watch, Wear OS, web, and desktop, all from one token layer. Each platform is a first-class output, not an adaptation.
Sector Alarm design system, mobile app
Sector Alarm design system, tablet
Sector Alarm design system, wearable
Sector Alarm design system, web
Sector Alarm design system, cross-platform tokens

Outcome

CSAT: 48% to 91%. Task completion time: 2:10 to 55 seconds. Cross-device consistency unified across all 7 platforms. Red Dot Design Award and iF Design Award 2022, both for the same project.

Have a product flow that feels harder to explain than it should?

Send me your product, MVP, deck, or prototype. I'll tell you where I'd start.