Case study · 2025 iOS · Smart home 25 screens Live prototype

Smart home,
finally calm.

SmartNest is a concept for a smart-home iOS app that prioritises a single quiet glance over a wall of toggles. 25 production-grade screens, a small-but-bold visual system, and an in-app coachmarks tour.

Role

Product designer

Timeline

3 weeks

Platform

iOS — light

Deliverables

25 screens · UI kit

↳ Primary flow · live preview

Glance, tap, done.
From "where's the toggle" to "this is my home".

iOS 26 · Liquid glass

72°F · Bedroom

4 rooms armed

Today · kWh

8.4

Living room

72°F

Active scene

Movie night

The problem

Most home apps make you work for control they should give for free.

After auditing six incumbents, three patterns kept showing up — and kept breaking flow. SmartNest is built around fixing those three.

01 · TOO DENSE

Toggles, everywhere.

Every device wants its own row. The home screen turns into a settings panel. You scroll for context.

02 · WRONG MODEL

Brand, not room.

Houses are organised by room and routine — not by manufacturer. Most apps still group by brand or device type.

03 · UNREADABLE

State you can't read.

Tiny icons, identical card silhouettes. You squint to know if the lock is locked or if the AC is running.

Process

Three weeks. Four moves.

Audit, model, system, build. The constraint was 25 screens and one design system. The aim was a hi-fi prototype, not a pitch deck.

Audit

Tore apart 6 reference apps — Google Home, Apple Home, SmartThings, Aqara, Hue, Nest. Mapped their info hierarchy.

Days 1–3

Model

Settled the mental model: house → room → device → state. Energy and security got their own top-level surfaces.

Days 4–6

System

Light cream + lime + black. One typeface. Six component primitives. Big numerics, soft cards, real photographic accents.

Days 7–11

Build

25 screens in React + inline SVG illustrations. Empty states and an onboarding tour to make the system feel lived-in.

Days 12–21

Key features

Six surfaces, one feeling.

Feature 01 · Home

A dashboard you can read at a glance.

One contrast card holds the most-used room. Below it, four equal-weight room tiles say what's actually happening — temperature, light count, music — without you tapping.

NOW Active room sits in a black hero card
LIVE Room tiles surface live state, not static labels
CALM Cream + lime keeps the eye relaxed

01 / Home

Feature 02 · Thermostat

Big numerics. Big targets.

The thermostat isn't a slider buried in a list. It's a 220-pixel arc with a temperature large enough to read across the room. Eco and Auto live as a pill, not a settings tree.

EASY Drag arc — no double-tap, no modal
GLANCE Color encodes mode (cool / heat / off)
SMART Surfaces the active routine inline

02 / Thermostat

Feature 03 · Energy

Numbers worth showing.

Energy is shown as one number, one trend chip, one lime bar that always points to today. A small per-device breakdown turns into action — not a wall of receipts.

CLEAR Hero number + delta vs last week
ACTION Per-device kWh with tap-to-tune
HONEST Cost in dollars, not abstractions

03 / Energy

Feature 04 · Security

Quiet by default. Loud when it matters.

Status is one line. Below it a 2×2 grid of live camera feeds. Activity is timestamped, not gamified. Alerts borrow the rose accent — used nowhere else in the app — so they read instantly.

CALM Status pill, not a red alarm
LIVE 4 camera tiles in one glance
SCANNABLE Activity log with icon coding

04 / Security

Feature 05 · Empty states

Empty states are the friendliest screens in the app.

Six handcrafted illustrations replace the standard "nothing here" gray text. They explain the missing thing, hint at the next move, and keep the brand voice when there's no data to show.

CUSTOM All inline SVG, brand-coloured
USEFUL Each suggests the next action
SOFT Pastel scrims reuse the room palette

05 / Empty

Feature 06 · Onboarding

A four-step tour, not a wall of bullet points.

Coachmarks dim the home screen and highlight one element at a time. A single black tooltip explains the surface, a progress bar shows where you are. Skippable, replayable.

FOCUSED One affordance per step
CONTEXT Tour runs over real Home — not stock illos
CONTROL Skip on every step, replay from Profile

06 / Tour

All 25 screens

One calm system. Twenty-five surfaces.

Onboarding, dashboards, device controls, automations, energy, security, six empty states, four onboarding coachmarks. Every screen reuses the same six primitives.

HomeDashboard

RoomLiving

ThermostatDevice

Home altVariation

OnboardingFirst-run

Add devicePairing

FamilyMembers

ProfileAccount

LightingControl

SpeakerNow playing

Smart lockAccess

ScenesQuick

RoutineMorning

EnergyWeekly

SecurityCameras

Alerts—

EmptyDevices

EmptyAlerts

EmptyRoutines

EmptyFamily

OfflineHub

No resultsSearch

Tour 1Welcome

Tour 3Rooms

Tour 4Tab bar

Style frame · 01

"Lime is the only thing that wakes you up."

One accent, used like a scalpel. It marks the active room, the next action, the only thing on screen worth looking at twice. Used too widely, it loses meaning.

Style frame · 02

Numerics, oversized.

Temperature. Energy. Time. The most important value gets the biggest type — never crowded, never centred-by-default. Tabular figures so they don't shift while you watch them.

Style frame · 03

Photography is the texture.

Real photos of rooms inside softly-rounded cards. Cream UI around them. The home looks like a home — not a control panel.

UI Kit

A quiet system, six primitives.

One typeface, four accent hues, six component primitives. Everything else in the app is a recombination of these. Specs are tuned for iPhone (390pt) but scale cleanly to tablet.

01 — Colour tokens

7 tokens · 4 accents

Primary

Ink

#111111

Surface

Paper

#F2F1ED

Accent

Lime

#D4FF4F

Pastel

Warm

#FFE0B0

Pastel

Lilac

#D9CCFF

Alert

Rose

#FFC9C9

Pastel

Teal

#B5E8DC

02 — Type scale

SF Pro Display + Times

Display type

80 / 600 / -0.045em

Title H1

48 / 600 / -0.035em

Section H2

28 / 600 / -0.02em

Body — large

18 / 600 / 1.5

Body — regular

14 / 500 / 1.55

Eyebrow / overline

11 / 700 / 1.4px

03 — Components

6 primitives

Buttons

Primary

Accent

Ghost

Toggles & sliders

Segmented

Day

Week

Month

Cool

Heat

Off

Status badges

Online

Idle

Alert

Offline

+12%

−4%

Inputs

Search devices…

Device card

Bedside lamp

Bedroom · 60% brightness

04 — Icon library

20 icons · 1.5 stroke · 24px

Smart home,finally calm.

Glance, tap, done.From "where's the toggle" to "this is my home".

Most home apps make you work for control they should give for free.

Toggles, everywhere.

Brand, not room.

State you can't read.

Three weeks. Four moves.

Audit

Model

System

Build

Six surfaces, one feeling.

A dashboard you can read at a glance.

Big numerics. Big targets.

Numbers worth showing.

Quiet by default. Loud when it matters.

Empty states are the friendliest screens in the app.

A four-step tour, not a wall of bullet points.

One calm system. Twenty-five surfaces.

"Lime is the only thing that wakes you up."

Numerics, oversized.

Photography is the texture.

A quiet system, six primitives.

01 — Colour tokens

02 — Type scale

03 — Components

04 — Icon library

Want to see it move?

Smart home,
finally calm.

Glance, tap, done.
From "where's the toggle" to "this is my home".