Motion Industries Design System
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 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. 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.
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.
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