This case study outlines the process of building a design system for Tuyajenge, a digital health education and referral tool for youth in Tanzania. The goal was to establish a single source of truth for both designers and developers, ensuring a consistent and scalable user experience across mobile and web platforms. My objective was to solve this by creating a scalable design system.
The Challenge
Tuyajenge was being developed for multiple platforms, which created a risk of design and user experience inconsistency. We needed a systematic approach to ensure that the user interface was unified and that our teams could work efficiently without constantly reinventing the wheel. The core problem was a lack of a centralized, single source of truth for design assets and guidelines.
Our Approach
Our team adopted the Atomic Design methodology to build the design system from the ground up. This approach allowed us to create a flexible and scalable system, starting with the smallest elements and building up to complex components.
The foundational design decisions were a collaborative effort:
- Typography and Colors: Our communication designer led the charge on these elements, ensuring they aligned with the product’s overall branding and vision.
- Spacing: We implemented an 8-point grid system, a common industry standard, to ensure consistent and organised layouts.
- Interface Audit: To identify existing inconsistencies and design opportunities, I conducted a thorough audit of the developed product’s interfaces, pinpointing unresponsive elements and areas that needed a unified design.
The Solution: Our Design System
We created a comprehensive design system that served as our single source of truth. It was a living product that contained everything our team needed to maintain consistency and efficiency. The key deliverables included:
- Foundational Elements: A style guide with all our approved colors, typography, and spacing guidelines.
- Component Library: A collection of reusable UI components, documented with their different states and usage rules.
- Documentation: Detailed guidelines on how to use the system, which helped both designers and developers understand best practices and usage scenarios.
Impact and Outcomes
While we didn’t track quantitative metrics for this first version, the impact on our workflow and the product’s quality was clear and significant.
- Improved Handoffs: The design system streamlined the handoff process between design and development. With a shared library of components and clear documentation, developers could build new interfaces with confidence, even without a pre-made design file.
- Increased Component Reuse: The system fostered a culture of reuse, which drastically reduced redundant work and accelerated development cycles.
- Enhanced Consistency: We achieved a noticeable level of visual and functional consistency across both the mobile and web platforms, which is crucial for a cohesive user experience.
Cross-functional Collaboration: The process of building and refining the design system strengthened our collaboration with the product manager, senior product designer, and communication designer. Their feedback was essential in ensuring the system was practical and effective for everyone.
By creating this design system, we not only solved a problem but also laid a solid foundation for the future growth and scalability of the Tuyajenge product.