Rebuilding a legacy design system into a single source of truth
I was one of two designers who initiated the design systems rebuild from the ground up. I led the component audit, defined interaction patterns, drove component consolidation decisions, and rebuilt components with auto-layout and variants.
Role
Product Designer
Timeline
12 Months
Team
2 Product Managers
4 UX Designers
2 Engineers
Overview
In 2022, Motion Industries embarked on a site redesign, a significant endeavor that required us to rethink our digital presence from the ground up. When I joined, our small design team of 2 had inherited disorganized and under-documented Figma files, along with an outdated design system, making it challenging to deliver high-quality designs efficiently. Our design team often spent significant time each sprint reconciling inconsistencies and re-creating the same patterns from scratch, highlighting a need for a robust design system.
By developing a comprehensive system with reusable components and clear documentation, we aimed to establish a single source of truth for designers, developers and cross-functional teams. This initiative would enable us to designer faster, ensure consistency, and streamline future updates within our tight production timeline.
Challenges
Lack of mobile optimization
Our existing components and styles were not optimized for mobile devices leading to an inconsistent experience for a substantial portion of our users. This gap not only led to user frustrations, but also limited our development's team ability to deliver seamless interactions across various devices and screen sizes.
Need for seamless collaboration
To ensure our design system would make sense for both designers and developers, we needed to integrate stakeholder insights systematically into our process. This required close collaboration with our development team and project managers.
Process
Collaborative audit to gain stakeholder buy-in
To optimize our development process, our team determined that our new design system would be built on top of our existing library, incorporating successful elements to minimize disruption and ensure continuity for our users. I started by researching various design systems, exploring their principles, and considering how we could effectively apply these concepts to our own design system.
As part of this process, I initiated a thorough audit of our designs, documenting inconsistencies and areas of improvement throughout the site. Our close collaboration with developers, product managers, and designers ensured that our design system was informed by their expertise and perspectives, resulting in a more effective, scalable and maintainable solution.
Updating our foundational elements
In launching our design system initiative, I updated our foundational elements in the style guide to ensure consistency and accessibility across all platforms. I incorporated design tokens to provide a shared language for both designers and developers to reference and conducted accessibility checks to ensure all colors and typography were compliant with ADA guidelines.
Rebuilding components with auto-layout, properties and variants
The insights gained from our audit enabled me to streamline our design systems by minimizing the number of variants and pinpointing key components to include in our design system. As a team, we carefully selected components to ensure a cohesive experience across desktop and mobile devices.
I modernized existing components by integrating auto-layout, properties and variants to streamline the design process, ensure consistency and simplify future updates.
Establishing a documentation system
We integrated the new style guide and components into our code component library to establish a more accessible and developer-friendly documentation resource.
Results
Our new design system has yielded significant benefits, including:
Enhanced design efficiency: Having established styles and components has enabled us to design faster and with greater ease, allowing us to focus more on enhancing functionality and the overall user experience.
Improved collaboration: Our design system now provides a shared language and set of guidelines for designers, developers, and other stakeholders, facilitating better communication and collaboration.