Moen Design System Development

Skills

Project Overview

As part of a contracted team, I led the overhaul of Moen Smart Water App design system for iOS and Android, enhancing user experience and laying a solid foundation for future redesigns. We updated the system with the latest Figma features, aligned it with Moen's implementation, and made platform-specific improvements for better functionality and a cohesive user experience across all devices. This modernization prepares the system for future technological advancements and user needs.

Role

Position: UX/UI Designer

Responsibilities: Catalog existing app elements, create a standardized set of components, set up theme management, document the design system in Figma, and propose platform-specific enhancements.

Process

Research and Component Collection

Conducted a thorough audit and collected all UI elements from existing Moen apps on both Android and iOS platforms to assess current assets and identify discrepancies.

Design System Creation

We used Figma's latest features to build a scalable and flexible design system. This process consisted of two main activities: harmonizing and updating components to utilize Figma's advanced properties and implementing theme management using Figma variables.

Harmonizing and Updating Components

After collecting all disparate UI elements across the current app implementations, I unified them under a cohesive set of components. This step involved:

• Componentization: Developed a library of standardized UI components with adaptable properties to ensure flexibility and reusability.
• Standardization: Standardized these elements by creating a unified set of components that maintains visual coherence across both platforms.

Theme Management and Semantic Aliases Using Figma Variables

Developed a sophisticated system of semantic aliases using Figma variables to manage themes efficiently. This innovative approach enabled the design system to be both scalable and easily adjustable, accommodating future theme changes and expansions without extensive reworks.

• Dark and Light Mode: I used Figma variables for dynamic theme management, making it easy to switch between themes and preview component appearances across different user environments.
• Semantic Aliases: Created semantic aliases for design tokens, such as colors, typography, and spacing, reflecting their usage rather than their values, making the system intuitive and maintainable.
• Efficiency and Scalability: Using variables significantly reduces the effort required to update designs, as changes to these variables automatically propagate throughout all components that reference them.

Platform-Specific Enhancements

Proposed enhancements to align more closely with native behaviors and components specific to iOS and Android, enhancing user experience and system performance.

Learnings

This project highlighted the importance of a well-structured design system in maintaining brand consistency and operational efficiency in product development.

Impact and Future Use

The design system sets the stage for quicker and more efficient feature development, reduces maintenance costs, and ensures a cohesive user experience across Moen’s digital ecosystem.