Smart design for a smart home app

Our primary objective was to streamline the transition from conceptualization to a Figma prototype in under 5 minutes while ensuring consistency across the entire application. We aimed to adapt our design gradually to offer the ultimate user experience and satisfactions across both iOS and Android platforms. Our specific goals included: 

• Rapid prototyping of wireframes

• Consistency throughout the application

• Easy maintenance of design elements

• Improved development efficiency

• UI/UX Designer

• Android Engineer

• iOS Engineer

Figma emerged as a crucial tool,  enabling our design team to achieve efficiency and quality. By deeply understanding the needs of designers and engineers, we transformed the design process from mere aesthetics into functional prototypes that closely mimic real applications. The focus extended beyond visuals to ensure each screen functions as a dynamic unit that adapts to various scenarios.

To build and deliver our design system, we employed several tools and concepts:

• Design tokens: Serving as building blocks that define the visual characteristics and properties, design tokens replace complex values with easy-to-understand names, providing a centralized way to control and update design properties. 

• Auto layout: This feature allowed us to create responsive and flexible components that automatically adjust based on the content, screen sizes, or orientations, significantly reducing the time spent maintaining layouts for different screen sizes. 

• Atomic design: We organized components into atoms, molecules, organisms, and templates, allowing for substantial changes in one place. This hierarchy enables swift updates across thousands of screens with minimal effort.

• Micro interactions: Each component has built in micro interactions that cover the basic prototyping and effects, eliminating the need for repeated prototyping of common behavior. To further streamline design tasks, the behavior of the components is also controlled by conditional logic and variables, and the components preserve their state, making the prototype even more realistic.

• Variables and modes: Every color, spacing, font face or size, every shadow or radius, every icon and even component behavior are modeled by variables. For each of these we set up primitive variables with clear naming which hold the real value, for example a HEX color code or a number representing pixels. Then we create semantic variables that serve as an interface and are used in the components. These are then organized into collections and modes. When done, by simply changing the mode, we can produce a fully functional prototype tailored to different brands in seconds. This drastic boost in efficiency enabled us to focus on product design, instead of maintaining the screens.

• Streamlined organization: By categorizing design files into pages for research, wireframes, mockups and prototypes, we reduced the total number of screens by a factor of 20 to 30. Interactions are now modeled within components, significantly simplifying user flow design. 

The final step consisted of implementing the design system within both the Android and iOS applications, ensuring that the same components served as the foundational blocks for each platform. This not only speeds up application development but also reinforced quality and consistency.