INTRO
As a Product Designer at Billetto, I was tasked with developing a cohesive and accessible Design System to address the inconsistencies and accessibility issues within our product. The project involved consolidating multiple UI libraries, standardising components, and creating thorough documentation for both POs and developers. This case study outlines the challenges faced, the solutions implemented, and the impact of the new Design System on our product development process.
Background
Our product had accumulated a wide array of design variants over time, resulting in a fragmented user experience and increased development effort. The product team had been using a mix of old UI components, new components from Tailwind UI, and custom-built elements. Additionally, accessibility was not consistently applied across these components, leading to potential usability issues for users with disabilities.
Key Challenges
Fragmented Design Components: Multiple UI libraries and custom components led to inconsistencies.
Accessibility Issues: Lack of standardised accessibility practices across components.
Disconnected Design Files: Design files from various team members were not unified.
Developer Handoff: Developers faced difficulties due to lack of standardized documentation and design tokens.
Objectives
Standardise Components: Consolidate and unify design components into a single, cohesive library.
Enhance Accessibility: Implement and document accessibility best practices.
Streamline Documentation: Provide comprehensive documentation for designers and developers.
Facilitate Developer Handoff: Create CSS tokens and a responsive grid system for ease of development.
Process
1. Research and Learning
I began by enrolling in a UXcel course on design accessibility to gain a thorough understanding of accessibility principles. This knowledge was crucial in identifying and addressing the accessibility issues within our current components.
2. Component Audit and Consolidation
Conducted a comprehensive audit of existing design components, identifying redundancies and inconsistencies. Consolidated components from the old UI library, Tailwind UI, and custom elements into a single, unified library.
3. Accessibility Improvements
Applied the following accessibility principles to core components:
Color Contrast: Ensured sufficient contrast between text and background.
Typography: Used readable fonts and maintained adequate text size.
Keyboard Navigation: Made all interactive elements accessible via keyboard.
Focus States: Clearly defined focus states for interactive elements.
Documented these principles in a cheat sheet within the Figma file for easy reference by the design team.
4. Documentation and Developer Handoff
Created detailed documentation outlining the changes required to align the website with the new accessibility principles.
5. Presentation & feedback
I presented the new Design System at our Hackathon event in April. The feedback from developers highlighted the value of standardised components and documentation.
Based on developer feedback, I defined a new responsive grid system. This included
Conclusion
Building and scaling the Design System was a challenging yet rewarding project. It required a deep understanding of accessibility, meticulous attention to detail, and close collaboration with the development team.
Unfortunately, I would not see these changes implemented during my time at Billetto, but I have used this exercise to practice implementing accessibility principles in my design, to hone my UI skills and test out new Figma features.
Unfortunately, I would not see these changes implemented during my time at Billetto, but I have used this exercise to practice implementing accessibility principles in my design, to hone my UI skills and test out new Figma features.
