I was tasked with building the Mobile Design System from the ground up, with the goal of establishing a cohesive framework that would enable the team to design and develop faster, with greater consistency. Starting with no prior system in place, I focused on creating foundational components, establishing documentation practices, and defining design principles tailored to Plume’s needs.
Working closely with engineering, we prioritized alignment between teams, ensuring the new system would streamline workflows and provide a solid, scalable foundation for future product development.
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.
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.
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.
By standardizing core components like the LMR and implementing comprehensive documentation, we have streamlined the design-to-development process, allowing for quicker iterations and improved collaboration.
For a closer look at how these components are implemented in practice, check out my related case study on the app's development, where the design system plays a crucial role in delivering a seamless user experience.