×
![Modal Image]()
Matrix is a component library aims to elevate the experience of client team members across Unit and Above Unit levels, while also enhancing interactions with vendors and clients.
Unfortunately, due to the confidentiality of client information, I have taken measures to highlight key aspects of this case study while respecting privacy and security concerns.
Implementing a component library for multiple apps and transitioning from SAP Fiori to custom React components comes with challenges. design consistency, adoption resistance, scalability, usability testing, maintenance, and documentation/training are key hurdles to address throughout the process.
Our scope includes designing and developing a custom component library to be used across multiple applications within the project.
The kickoff session for the component library implementation is a critical starting point, bringing together stakeholders to align on project goals, timelines, roles, and components. During the session, the team will introduce the project's scope and objectives, clarify roles and responsibilities, and establish communication channels for ongoing feedback and updates.
Implementing a design system was crucial for the company to address key challenges and achieve several benefits:
Firstly, it ensured a consistent user experience across multiple applications, promoting brand recognition and user trust.
Secondly, it streamlined development by providing reusable components and standardized design patterns, reducing duplication and speeding up time to market.
Additionally, the design system promoted collaboration, scalability, and flexibility, allowing for future growth and adaptability to changing business needs.
Lastly, it enhanced user satisfaction, strengthened the brand, and improved overall competitiveness in the market.
To better understand the current state of our existing design ecosystem, we started with a UI Inventory of our main interface components. We used Brad Frost’s interface inventory guideline as inspiration to conduct a full-day audit that we ran as a team of 2 designers and 1 developers.
As a result of this exercise, we identified a lot of inconsistencies in our design assets, which only proved the need for a more systematic approach to documenting, communicating, and maintaining our design system.
.png)
The inventory process helped us clearly see all discrepancies and inconsistencies across our site and product. It served as a foundation for our component library work. With the audit results in mind, we created a priority list for our component library minimal viable product (MVP).
We decided to focus first on the foundational elements (atoms) of our component library, such as color palettes, fonts, grid, spacing, buttons, etc., and then move on to more complex blocks and pieces (molecules, organisms, templates, pages).
After researching component libraries and analyzing captured use cases, we streamlined our components and color schemes, resulting in a final, cohesive palette.
.png)
Some principles we followed:
.jpg)
Each component we designed with accessibility in mind. We strived to comply with WCAG AA accessibility standards. Below is an example of intentional choice of color on a warning alert to achieve sufficient text contrast (checked via Stark Figma plugin) so that users with low vision can see and use our component.
.jpg)
Regular review sessions ensure alignment on key design elements. Our team meets biweekly to discuss progress. We utilize a dedicated Slack channel for updates and feedback, bridging design and engineering.
Comprehensive and organized component documentation is essential for swift and consistent decision-making within our component library. Drawing inspiration from established systems like IBM's Carbon, Material, Atlassian, and Salesforce Lightning, we aimed to create detailed, user-friendly documentation that covers every aspect of our system.
The component library is an ongoing project. We iterate, change and learn a lot in the process. So far, we have a set of basic components ready, which has been game-changing for our client team in terms of efficiency, as well as consistency, and standardization.
We leverage our know-how to build and scale your digital product to fit the needs of your business and your users. We're available for new projects. Let's embark on a creative journey together!
contact@designabble.com
