Design system becomes an necessity as the company design team scales up. Most companies may gravitate toward building their design system on top of a well-established design system rather than starting everything from scratch. This brings multiple benefit, such as budget friendly and less demanding on designers’ bandwidth. So most often designers faced question of what criteria to evaluate when choosing the base design system and how to customize to company’s own needs.
Evaluate a Base Design System
Design Team Maintenance
- Update Process: Assess how easy it is to update the system. Is the process streamlined and well-documented and how new updates affect existing projects. Ideally, updates should not break or significantly disrupt existing work?
- Documentation: Good documentation is key. It should be easy for designers and developers to find the components they need
- Findability of Components: Robust search function is desired as that allows users to easily locate components.
You can have a better understanding on the usability of design library through a documentation deep dive, look for case studies, forums and reviews to study the challenges and limitations, and even build simple page prototypes to reveal scalability and functionality. More importantly, test component in various scenarios to see how it adapt to all different use cases.
Engineering Efforts
- Technology Stack: Ensure that the design system of your choice is compatible with your existing technology stack.
- Load Times: For web-based systems, assess the impact on load times and performance.
- Code Efficiency: Evaluate how the system’s components impact the overall efficiency of the codebase.
Additional Considerations
- Community and Support: See if community support and extensive documentation is available.
- Licensing: Licensing of external design systems and any legal implications. Ensure that the system end up using complies with relevant data privacy and security regulations.
- Accessibility Standards: Check if the design system adheres to accessibility standards, ensuring inclusivity.
Customize for your Unique Needs
- Brand Identity: Reflect unique identity (colors, fonts, imagery, etc.). to ensure that this identity is consistently represented in digital products.
- Brand Voice and Tone: Ensure that the system’s language and tone are aligned with your brand’s communication style.
- Modify Existing Components: Adjust existing components to better fit the organization needs. Include changing and adding styles, behaviors, states based on the use case. Customize components with reusability in mind to maximize efficiency.
- Establish Design Tokens: Create or modify design tokens (like colors, spacing, typography) to maintain consistency across your products. Consider using tools to manage and apply these design tokens efficiently.
- Create Usage Guidelines: From years of experience, simply building the components are way from sufficient. Develop guidelines and present patterns and page templates on how and when to use various components and styles in your system is critical in ensuring the design system adoption.
- Responsive and Cross-Platform: Adapt the system for different devices and screen sizes if necessary
Design System OKRs
If you are a designer working on the design system, what would be the best way to measure and communicate the impact of your work?
Here are some OKRs to measure the Impact of Design system
1. User Experience
- User Feedback: qualitative feedback from end users regarding the usability and aesthetic appeal of the interfaces.
- Engagement Metrics: Can partly attributed to a better, more coherent user experience.
- Documentation Usage: Usage and engagement with the design system’s documentation can indicate that the system is a valuable resource for the team.
- Usage Metrics: Given your likely close collaboration with engineers, it’s advantageous to have them build tracking into your storybook code library to keep track of the usage of your design system components. This data not only showcases the consistency and efficiency your system brings to projects but also provides concrete evidence of its practical impact of both design and engineering excellence. On top of that, you can theoretically compute the # of man hours saved from the toolset.
2. Team Satisfaction and Adoption
- External Team Requests: As the lead of a design system, you’ll receive numerous requests from various project teams. A key metric for success here is measuring the number of feature requests received and how effectively they are addressed. This approach highlights your responsiveness and the system’s adaptability to evolving needs.
- Adoption Rate: Manuela just talked about this too, while it is great to reflect the usage across Figma project files, you can also present the number of teams your design system supports, paying special attention to its cross-organizational influence. Noting other teams that have adopted your design system can powerfully demonstrate its utility and acceptance across the organization.
- Internal Surveys: Gauge designer and engineers’ satisfaction with the design system. High satisfaction levels often correlate with higher productivity and better adoption.
- Training and Onboarding Time: Time taken to onboard new team members before and after.
3. Efficiency Metrics
- Development Speed: Product development time before and after
- Reusability: How often components and patterns are reused. High reusability often translates to more efficient design and development processes.
4. Consistency and Quality
- UI Consistency: Adherence rate to design system guidelines.
- Error Reduction: Design-related bugs or inconsistencies reported before and after implementation.
That concludes our design team’s study last year of introducing a unique design system for our digital product. Hope you enjoyed this far!
