Sayeed AhmadProduct Designer
Book a call

Three apps, six devices, one Moen

Moen moved into the smart home by buying companies, and each one came with its own app. Our team at UX Cabin folded them into one app for six water devices, built on a 400+ component system. I was on the system team. I kept every screen tied to the library and owned the source-of-truth file developers built from.

Screens from the merged Moen app on a slate background, showing home, water level, sensor trends and a sprinkler zone.
Role
UI/UX designer, design system team
Company
Moen, via UX Cabin
Product
iOS & Android app, design system
Period
8 months, 2023

The work in numbers

One company, three apps

Moen bought two smart-water companies. Each came with its own app, its own navigation and its own idea of what a device was. A faucet, a sprinkler and a shutoff valve still needed their own controls, and a leak, an offline device or a failed pump had to read as urgent on every one of them.

Before, three apps, each with its own navigation. After, one app, one home screen for every device.

Mapping what already existed

We put the old Sketch and Figma files on one board and mapped every screen to its flow. That map became the new information architecture.

One of many flows on the board, from the old sprinkler app. Home leads to Update Schedule (edit schedule on touch), which leads to Advanced; a long press on a zone opens Run time.

Every device, one home screen

Every device opens from the same home screen and uses the same card, tabs and alert pattern.

The home screen’s devices row connects to five devices, each listing the components it reuses. The devices are the sprinkler controller, sump pump monitor, leak detector, Flo Shutoff and kitchen faucet.

Screens from the whole app

Alerts, sprinkler zones, settings and device detail. Different products, built from the same cards, sheets and type.

A wall of Moen app screens, with zones, Flo Shutoff, device detail, smart leak detector, alerts and sprinkler controller.

The system underneath

Atomic Design, built by the UX Cabin system team. I was on that team, and I made sure every component the screens needed existed, and that every screen used them correctly.

Foundations. Eight colours and a nine-step grey ramp; an 8px grid annotated on the home screen with its exceptions; ten type styles on one scale; one icon set; every glyph fits a 16px box inside a 24px container.

Every component, every state

Each module was documented with its states and a rule for when to use it, so screens were checked against the library, not against each other.

Components. Primary and secondary buttons in four states; one device card for every device, with photo, title, status icons and actions; three levels of alert urgency.

One source of truth

Four designers, six products, one Figma file. This part was mine. Screens attached to the library, missing components added, every flow annotated and linked before handoff.

The source-of-truth Figma file in Dev Mode, with every screen built from library instances, missing components raised and added, annotated and linked before handoff.

Tested before it shipped

Complex flows, like setting a watering schedule, went through remote usability tests. Ratings, click paths and written answers went back into the designs.

Usability test of the watering schedule with 4 remote testers, 3:04 average time on task, none rated it difficult. One written answer said “We run ours in the early morning, around 5:30, before it can be too warm and any of it could evaporate.”
“We stood up a fully functional design system in a couple of months. Because of that we were able to get products out the door, period. Incredible ROI for us.”
Brian Colby, Principal UX Design, Moen

What it added up to

Agency work at UX Cabin, alongside Moen’s in-house team. My part was system coverage, the source-of-truth file and the handoff.

  1. 1PlatformThree apps shipped as one, with one navigation for every water device.
  2. 2The system400+ components, and every screen in the source file built from them.
  3. 3HandoffDevelopers built from one file, with every flow annotated and linked to its prototype.

Message Sayeed