Designing a mobile design system
Overview
I took the initiative to build the Mobile Design System from the ground up, aiming to create a cohesive framework that would empower the team to design and develop more efficiently and consistently. With no prior system in place, I began by crafting foundational components, setting up thorough documentation practices, and defining design principles tailored to Plume’s unique requirements.
Collaborating closely with engineering, we ensured alignment across teams, focusing on streamlining workflows and establishing a robust, scalable foundation to support future product development.
Role
Co-Design Lead
Platforms
iOS and Android
Year
March 2024
Design Language
To build a cohesive identity, we streamlined the color palette, reducing the number of colors to enhance consistency and usability. Color usage guidelines were defined across components to ensure clarity and accessibility in both light and dark modes, with dark mode specifically designed to reduce eye strain while maintaining brand integrity.
Design-led Documentation
We established a design-led documentation approach that outlines Figma components alongside clear instructions for developers. This includes tokens for semantic colors, typography, border radius, and spacing, providing a consistent framework for implementation.
By providing clarity on design specifications and usage scenarios, we enable a more streamlined integration of designs into the final product while maintaining visual consistency.
One Core Component
We decided to standardize on the Left Middle Right (LMR) component as the sole core component, which is used 549 times throughout the app. This decision has significantly increased the efficiency of the implementation process. The LMR component accommodates various atoms, providing flexibility in design.
The documentation includes guidelines for localization and usage, along with skeleton loaders to enhance the user experience during content loading, ensuring consistency and usability throughout the app.
