Consolidating three separate smart home applications into a unified platform — with a scalable design system, usability testing, and an award-winning interaction design.
Moen, a leading global faucet and water hardware manufacturer, expanded into the Smart Home sector through acquiring multiple companies — each with its own app.
The challenge was clear: integrate three separate applications into a single, unified platform while modernizing the visual identity, establishing a scalable design system, and implementing user testing to validate every design decision. The result? A cohesive smart home experience that won an IDSA Silver Award.
Three apps. Three design languages. Three user bases. One brand promise to uphold.
Three separate apps from acquisitions needed to be combined into one cohesive platform supporting all smart water devices.
The existing design language didn't reflect Moen's position as a smart home innovator — it needed a contemporary, premium feel.
Without a shared component library, design and development were siloed — leading to inconsistencies and slow iteration cycles.
Three separate applications that needed to become one unified smart home experience.
Before redesigning anything, we needed to deeply understand the existing ecosystem — its strengths, gaps, and user mental models.
We reviewed existing Sketch and Figma files, organized relevant mockups and app screenshots, and mapped them to existing workflows. This audit revealed the information architecture challenges and gave us a solid baseline to restructure from.
Through iterative refinement, we developed a "glassy look and feel" — modern, premium, and scalable enough to support Moen's expanding device lineup.
The new visual language balances sophistication with usability. Every surface, every interaction, every transition was designed to feel premium while remaining immediately intuitive — even for users who've never set up a smart home device before.
A glassy, modern aesthetic that scales across Moen's growing device ecosystem.
Every feature, flow, and component was designed in both light and dark themes — giving users full control over their preferred experience.
Dark mode isn't just an inverted color palette. We carefully tuned contrast ratios, shadow depths, and surface hierarchies to ensure readability and visual comfort in both modes — especially important for a smart home app often used in low-light conditions.
Platform-specific design considerations integrated throughout — respecting native patterns while maintaining brand consistency.
We designed for both platforms with platform-aware navigation, system UI integration, and gesture handling — ensuring the app feels native on both iOS and Android while maintaining a unified Moen identity across devices.
400+ reusable components. ~2,500 component insertions weekly. Built on Brad Frost's Atomic Design methodology.
Icons, labels, color tokens, typography, and base primitives.
Buttons, inputs, selectors, notification cards, and toggles.
Top Nav, Bottom App Bar, Stepper, Floating Player, and complex layouts.
Text styles, base color palette, shadows, and container styles forming the foundation.
Comprehensive documentation and developer handoff — annotated mockups, prototypes, and video walkthroughs ensuring pixel-perfect implementation.
We created extensive guides for design consistency, new team member onboarding, and developer reference. Every component came with usage guidelines, spacing specs, and interaction annotations — reducing back-and-forth and accelerating development cycles.
Extensive guidelines ensuring consistency and accelerating onboarding.
We didn't just design — we validated. Multiple prototypes were tested for complex workflows to identify what was intuitive and what wasn't.
Testing focused on identifying common user mistakes, fixation points, and gathering qualitative feedback. These insights directly informed design iterations — ensuring the final product wasn't just beautiful, but genuinely usable by real people in real contexts.
Complex workflow prototypes built specifically for usability testing sessions.
Motion brings interfaces to life. We established animation guidelines and created two types of motion — micro-interactions and educational animations.
Subtle transitions and loading states creating a fluid, polished experience that feels alive and responsive.
GIF illustrations demonstrating device usage and troubleshooting — reducing support burden.
Specific rules for duration, easing, transitions, and styling consistency across all animations.
Micro-interactions and educational animations bringing the smart home experience to life.
Won a Silver Industrial Designers Society of America Award for Smart Faucet Motion Control work.
The design system enabled significantly faster product deployment and accelerated team onboarding.
Delivered significant return on investment through system efficiency — a fully functional design system stood up in months.
IDSA Silver Award for Smart Faucet Motion Control — recognition of design excellence.
"I've worked with agencies... and this is hands down one of the best experiences. You're a UX Design agency that delivers like an in-house team."
"We stood up a fully functional design system in months. Because of that we were able to get products out."
"You guys were super flexible with scheduling, budgeting, and team allocation."