Motion Industries Design System
Rebuilding our existing library into a comprehensive design system
Introduction
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 two had inherited disorganized and under-documented Figma files, along with an outdated design system, making it challenging to deliver high-quality designs efficiently. Our team often spent significant time each spring 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.
My Role
Timeline
Platform
Responsive Web
Team
UX Designers x 4
Product Managers x 2
Engineers x 2
Challenges
Inaccurate design implementations
None of our current designs were accurately represented in Figma. Designers were frequently recreating components leading to inconsistencies, longer design times and increased technical debt.
Lack of mobile optimization
Our existing components and styles were not optimized for mobile devices leading to a subpar 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. We 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, the design team 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, we updated our foundational elements in the style guide to ensure consistency and accessibility across all platforms. We 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 us to streamline our design by minimizing the number of variants and pinpointing key components to include in our design system. We carefully selected components to ensure a cohesive experience across desktop and mobile devices.
To achieve a consistent and flexible set of components, we adopted the atomic design methodology, which allowed us to simplify complex elements into smaller, more manageable pieces. We also 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:
Improved design consistency: With our design system in place, we've achieved greater consistency in our designs, enhancing our overall aesthetic and user experience across devices.
Enhancing 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.
Reflection
This project served as a pivotal opportunity to dive headfirst into designing a scalable design system from the ground up, challenging me to grow as a designer and expand my capabilities. I gained a greater understanding between the intersection of design and development, paving the way for a more efficient and collaborative workflow.
The design system is a work in progress, requiring continuous iteration, testing and experimentation to evolve with our team and the needs of our users. We created an ongoing maintenance checklist that includes:
Reviewing and assessing current components as our product scales
Adding new and approved components into the design system
Optimizing all components for mobile
Updating documentation to serve as a single source of truth for the team