Overview: As the UX designer at ECRI, I led the initiative to create a design system and shared component library across multiple products. The goal was to standardize components from ~10 applications, retain their features and functionality, and elevate the design while making them responsive and accessible. This case study explores the process, challenges, and outcomes of this project.
Challenge: ECRI had multiple applications with inconsistent designs and components, leading to a fragmented user experience and increased development time. The challenge was to create a unified design system and shared component library that could be utilized across all applications, improving consistency, accessibility, and efficiency.
Solution: To address this challenge, I collaborated with developers across various products to standardize components using the atomic design methodology. We defined foundations such as typography and color using design tokens. The components were created in React, Angular, and web components, ensuring compatibility with different frameworks.
Process
- Auditing existing components: I conducted a thorough audit of components across all of ECRI’s applications to identify common patterns, inconsistencies, and areas for improvement. I collected the visuals using InVision (RIP!) and documented their locations using a spreadsheet.
- Defining design principles: I established a set of design principles to guide the creation of the design system, focusing on consistency, accessibility, and user-centered design. I researched some of the best examples of Design Systems out there such as Pattern Fly, Salesforce’s Lightning Design System, IBM’s Carbon Design System and more. I also looked into strictly UI libraries such as Tailwind UI.
- Creating a style guide: In conjunction with our Creative Director, I developed a comprehensive style guide that documented the foundational elements, such as typography, color palettes, and spacing, using design tokens.
- Designing and standardizing components: I collaborated with business analysts and developers to design and standardize components, ensuring they retained their features and functionality while elevating the visual design and making them responsive and accessible. We utilized external libraries such as Kendo for advanced components where performance was a priority. We also integrated Vega Lite as our charting library. Requirements for components were documented in Jira.
example jira ticket 
example component documentation
- Implementing the design system: We implemented the standardized components in Storybook, supporting React, Angular, and Web Components. This allowed developers to easily integrate the components into their applications.
- Continuous improvement: I established a process for ongoing maintenance and updates to the design system, incorporating feedback from product managers, developers, and users.
Outcomes:
- Improved consistency: The design system ensured a consistent look and feel across all ECRI applications, enhancing the overall user experience.
- Increased efficiency: Standardized components reduced development time and effort, as developers could reuse pre-built components across projects.
- Enhanced accessibility: The standardized components were designed with accessibility in mind, ensuring that ECRI’s applications were usable by a wider range of users.
- Collaborative workflow: The project fostered collaboration between designers and developers, promoting a shared understanding of design principles and best practices.
Conclusion: Creating a design system and shared component library at ECRI was a significant undertaking that required collaboration, planning, and attention to detail. By standardizing components across multiple applications, we improved consistency, accessibility, and efficiency. This project laid the foundation for a more cohesive and user-centered design approach at ECRI.
