Designing, Building, Implementing, and Maintaining a Design System
Problem
We faced significant inconsistencies across our products, characterized by variations in both design and implementation that impacted user experience and brand cohesion.
Why is inconsistency a problem for users?
• Caused confusion and dissatisfaction for users.
• Gives an impression of disorganization, harming brand credibility.
• Increases cognitive load, making information harder to process.
• Reduces accessibility for users with disabilities.
Research
To enhance our understanding of potential cost and time savings, we looked to large companies that have shared insights about their design systems. While we may not match their scale, their experiences can provide valuable guidance.
After implementing a design system, they experienced a boost in their design and development efficiency, achieving up to a 50% reduction in production time for new features.
With the introduction of their Lightning Design System, Salesforce effectively minimized design inconsistencies and improved development timelines by over 40%.
On average, companies report saving between 30-50% of time in design and development by leveraging design systems.
What are the tradeoffs?
Cost - there are design and development expenses, acquiring necessary tools (we used Figma and Storybook), and ongoing costs for maintenance, documentation, training, and user testing.
Decision/Solution
Leadship decided to proceed with the design and development of our design system, which has since been named "Embers." This strategic move aims to enhance consistency and efficiency across our projects while establishing a unified approach to design.
The design journey begins.....
Create a consistent visual identity by defining brand colors, typography, imagery, iconography, and tone of voice. Hired an outside brand identification company "September Works" to assist in the brand identity to save the company time.
After the visual identity was established, it was handed over to my UX manager and I to develop the design components.
Atoms, Molecules, and Organisms
We organized the UI into atomic design elements, starting from basic building blocks (atoms, such as buttons) and combining them into more complex components (molecules, such as forms), and then compiling the atoms and molecules to create organisms (full page templates).
Next, we focused on interaction patterns and responsive layouts. As we defined these patterns, we collaborated with the UX team to gather feedback and iterated based on their input. We also detailed how components should behave in various states (hover, focus, error).
Documentation
Provided Comprehensive Guidelines: Provide clear, detailed documentation for each component.
Tools: We utilized Figma for designers and Storybook for developers to create a shared repository that met the needs of all our products, web applications, software, and mobile platforms.
Cross-functional Collaboration
Engaged developers, designers, product managers, and QA to ensure seamless integration across product development.
Implemented version control to track updates, ensuring the design system evolves while staying consistent.
Established a feedback loop for continuous improvement based on real-world use.
Implemented version control to track updates, ensuring the design system evolves while staying consistent.
Established a feedback loop for continuous improvement based on real-world use.
Implementation and Governance
Rollout: Implemented the design system incrementally, starting with the web platform and gradually extending to other teams, ensuring a smooth adoption process for all stakeholders.
Appointed a product manager Erin and myself (designer) that was responsible for maintaining and updating the design system as the product and organization evolved.
Results
Developers reported a 50% reduction in build time, making the development process twice as efficient. This improvement has also significantly saved time for designers as well as out QA team.
The Future
Initially, the design system initiative did not prioritize accessibility, and there was a notable knowledge gap within the company regarding accessibility principles, including their definition, visual representation, implementation, and design considerations. After the design system was developed, I volunteered to lead efforts in accessibility. You can find my learnings and subsequent applications of accessibility within the design system detailed in my project titled "Web Accessibility."
