Visual Side roleProduct strategy, UX architecture and interface design
Delivery modelFounder-led project
01
What needed to change
Problem
A connected environment can contain dozens of devices, live signals and automation rules. The original challenge was not adding more controls—it was helping people understand what was happening and act without hesitation.
Device setup, room-level control, alerts and automation all competed for attention. We reframed the product around everyday decisions: what needs attention now, what is running, what can be controlled safely and what should happen automatically.
Make live device status understandable at a glance
Reduce friction during setup and first use
Keep advanced automation available without overwhelming everyday control
02
How we shaped the experience
UX process
The UX process began with the physical environment rather than a list of screens. We mapped how people move between properties, rooms and devices, then identified the moments where status, feedback and control matter most.
Core journeys covered onboarding, device pairing, dashboard monitoring, room navigation, direct control, alerts and routines. Early flows and interface prototypes were used to test hierarchy, safe actions and recovery states before visual detail was applied.
Environment and device journey mapping
Progressive onboarding and pairing flows
Control, alert, offline and error-state prototypes
03
How the system connects
Architecture
The product was structured as a connected hierarchy: account, property, room, device and automation. This gave every screen a clear context and made it possible to introduce new hardware without redesigning the core experience.
Telemetry, permissions, alerts and routines were treated as shared system layers rather than isolated features. Navigation and data relationships were documented so product, interface and engineering decisions could follow the same model.
Property, room and device hierarchy
Shared model for telemetry, alerts and routines
Role and permission logic for multi-user environments
04
How consistency was built
Design system
A reusable interface language translated complex system behavior into familiar visual patterns. Device cards, status signals, controls and charts were designed to remain clear across different equipment types.
Color was reserved for meaningful status and action feedback, while typography and spacing carried the everyday hierarchy. Components included interactive, loading, offline, warning and disabled states so the system could communicate reliably beyond the ideal path.
Reusable device and room components
Accessible status and signal language
Consistent interaction states and responsive rules
05
How the work became build-ready
Development
The design was prepared as an implementation system, not a collection of static screens. Component behavior, state changes and responsive patterns were documented alongside the visual specifications.
Handoff defined data dependencies, loading behavior, edge cases and reusable patterns for dashboards, controls and charts. This gave development a clearer contract for translating the experience into a maintainable mobile product.
Component and interaction specifications
Loading, offline and failure-state behavior
Build-ready mobile layouts and reusable patterns
06
What the project unlocked
Outcome
The result is a more coherent path from onboarding to daily control, with the complexity of the connected environment contained behind a calm and repeatable experience.
The system gives users clearer visibility, gives engineering reusable interface logic and gives the product room to support additional devices, properties and automation types over time.
Clearer daily control and system feedback
Scalable patterns for future device categories
One shared product language across design and implementation
