Problems
Whenever our team needed to implement a new feature or update an existing one, we gathered old instances to create new screens. This approach not only introduced inconsistencies across our designs but also proved time-consuming.
A robust design system that would streamline the design process and ensure consistency across platforms was clearly needed.
Inconsistent User Experience
The lack of a unified design approach resulted in visual and functional inconsistencies across different parts of the application.
Inefficient Workflow
The absence of reusable components and standardized guidelines increased the time required to design and develop new features, hindering our team's productivity.
Misalignment with Brand Identity
The ad-hoc adaptation of old design instances often led to deviations from the new branding, diluting the intended brand identity.
Unresponsive User Experience
Each new feature often required reworking of layouts to maintain responsiveness, making the design and development process more cumbersome.
DesignGrid
Built an Impactful design system for The Mobility House ecosystem with Atomic Design, resulting in an impressive 80% reduction in development time for new products and features.
Overview
As our product suite grew, inconsistent UI/UX, repetitive work, and misalignment with our brand emerged.
To address this, we created DesignGrid, a scalable design system using atomic design principles. It ensures consistency, enhances collaboration, and streamlines development with reusable components.
My Responsibilities
Create, Maintain, Update, and Test components
Implement accessibility with EAA standards.
Tools
-
Figma
-
Chromatic (Testing)
-
Confluence (Documentation)
Component Structure
Example
The site setup component presented significant design challenges due to its complexity and the need to display multiple interdependent values. The previous design lacked a clear overview, forcing users to navigate various screens to access necessary information. The modal structure could have improved more efficient interaction and user experience.
Before
After
Research & Approach
Atomic Design
To keep things simple we structured the design system around Brad Frost’s Atomic Design Principles to ensure modularity, scalability, and efficiency.
Ant D
By using AntD, developers could work within a structure they were comfortable with, reducing friction and speeding up development.
Implementation of complex components
We followed a stepwise approach to break down complexity, ensuring easier implementation for developers.
Usability Testing
Testing components on Chromatic before being implemented into applications was a major part of the process.
Next Steps
-
Based on feedback, refine components for better usability, accessibility, and consistency. Fix any issues or inconsistencies that arise during implementation.
-
Identify and add any missing components or patterns that emerge from real-world use cases.
-
Regularly review and update the design system to ensure it stays relevant and aligned with evolving brand guidelines, technology, and user needs.
-
Research design system Tokens in Figma.
The Benefits
With the new design system, we redesigned the existing Dashboard along with new applications and reduced UI inconsistencies by 40%.
Consistent UI
Uniformity across all products reinforcing brnad identity and coherent user experience
Improved Collaboration
Common reference point for all designers and developers with common referenc points and documentation.
White Labelling
Reuse core components across multiple white-labeled products, saving time and development resources.
Accessibilty
Incorporate best Accessibility practices from the start. Meeting all the legal requirements.
Cost Efficiency
Reducing implementation time with reusable components. Maintaing and updating components is less-labour intensive.