Mobile Core library
For the past year, I've worked on refining the app’s design system, the "Mobile Core Library," by optimizing components, introducing variables for scalability, and writing documentation to drive adoption and ensure consistency. The design system is a dynamic, living resource, so this is an ongoing project that continues to evolve. Below, I've included the key milestones throughout this project.
Empathy interviews
We conducted empathy interviews with design system users to gather feedback and pain points. We learned that the library lacked documentation, organization, and examples use cases.
Component clean-up
Next, I spent several sprints cleaning up and streamlining all components. This work included removing base components; removing unnecessary layers, frames, and shapes; making components highly configurable using component properties and nested components; and linking fonts and colors to the correct styles.
Typography updates
During this time, the team also chose a new font for the mobile app. I updated the design system's legacy font to a new typeface and applied the typographic change to all components to ensure adoption across any files using our library.
Documentation
To support the addition of new documentation, we restructured the library so that each component has its own dedicated page, containing the main component, documentation, examples, and related resources. I provided functional and visual documentation for all components, while motion and accessibility designers provided guidelines for animation and accessibility tagging.
Based on feedback from empathy interviews, I also created an "All Components" page that displays instances of every main component and its possible variants, giving the team a quick and comprehensive overview.
Developer 🤝 Designer partnership
During this process, the developer team transitioned to a new code base and wanted to build their own component library in code. I worked closely with developers to implement the design system components in React Native. QA remains an ongoing collaboration with the dev team as we continue designing new components and enhancing existing ones.
Variable implementation
I am currently integrating Figma variables into the design system and aligning them with developer tokens in code. As part of the component update process, I also created light mode versions of all components to support a future light mode for the app. With the use of variables, switching between modes is now streamlined, simplifying the future implementation of light mode. Additionally, variables enhance the system’s sustainability and scalability, enabling easier adjustments and updates to the design system.