Yara International Design System
My recent project for Yara International (and together with Bridge-the-Gap team) stands as a testament to our team's ability to deliver high-quality development solutions in the realm of design systems. Over a period of four months, we undertook the challenging task of refactoring and maintaining the React library of Yara International's design system. This project not only involved creating new components, refactoring the existing ones, and brushing up on documentation but also enhancing the existing React Native library, showcasing our team's versatility and expertise in handling complex technical tasks.
Our team was:
- Varya Stepanova: Design System Architect and Lead Developer
- Irina Samoylova: Senior UI Engineer
- Andriy Kotko: UI Engineer
- Alexandra Urberg: UI Engineer
Adding New Components
The enhancement of Yara's library was marked by the addition of 10 new components, including:
- Calendar
- Accordion
- SelectGroup
- NavigationRail ...and many more.
This expansion enriched the library's versatility, catering to more diverse design needs.
Upgrading to Storybook@7
A major achievement was upgrading the React and React Native libraries to Storybook@7. This upgrade necessitated refactoring almost all stories and updating dependencies, subsequently improving the UI's customization capabilities based on user research insights.
Improving Accessibility
Accessibility enhancements were a critical part of our work. We not only improved the components' accessibility but also integrated a11y tests into the library, reinforcing our commitment to inclusive design.
New Tokens Structure
We conducted an audit of the token structure at both the design and code levels, proposing a new, more intuitive structure. This reorganization accommodated the intricacies of over 50 components, making the system more user-friendly.
Infrastructure Improvements
Our team executed crucial fixes to the library's infrastructure, optimizing testing and deployment processes. The introduction of Chromatic previews for each pull request was a strategic move to streamline design reviews within the development workflow.
Refactoring Documentation
Comprehensive documentation refurbishment was undertaken. This involved not only updating the component documentation but also addressing technical issues within the components and outlining workflow processes.
Customizing the Storybook UI
Responding to the results of Yara's user research, we created a fully customized Storybook UI based on custom theme and tailormade reusable Storybook components. This customization included a revamped layout for component pages and improved representation of component examples. A a result, the documentation website not only aligned with the brand style, but also had a significant UX improvements, allowing product teams to find necessary information or usage example faster.
Support and Feedback Loops
We provided daily support to Yara's product engineers, aiding in the efficient use of the design system. Additionally, we organized feedback collection events and demos, ensuring a short and effective feedback loop.
Our engagement with Yara International showcases our team's proficiency in handling complex development-focused projects. By successfully refactoring the React library, improving documentation, and enhancing overall user experience through accessibility and UI upgrades, we have reinforced our position as a leader in the field of design system development. This project not only achieved its immediate goals but also set a new benchmark for future endeavors in the realm of design system enhancement.