Building and Scaling a Design System at Delivery Hero MENA
This case study outlines my journey in creating and scaling a design system for Delivery Hero MENA (talabat). As the Design System Manager, my responsibilities included setting the vision and strategy, driving transformation, leading rebranding efforts, evolving the design language, managing adoption and communication, building and scaling the team, and documenting best practices. My goal was to establish a robust and scalable design system that could support the fast-paced growth and diverse needs of talabat.
The Challenge
When I joined talabat in 2019, the company was experiencing rapid growth, which brought several challenges. The product was expanding with new verticals and features, but this growth led to scattered information and difficulties in maintaining consistency. The involvement of multiple designers resulted in a fragmented user experience, and the lack of an autonomous process hindered collaboration and slowed down iteration speed. My mission was to address these issues by building a new design language and system.
Product Audit
The initial step was conducting a thorough product audit. This audit revealed significant fragmentation in the user experience. There was no design library, multiple colors and font styles were used inconsistently, and designers were working in silos without any structure for alignment. The audit highlighted the need for a cohesive approach to design to improve the overall user experience and efficiency.
The Strategy
To address these challenges, I developed a strategy - a comprehensive plan to redesign the app, build a design library, and scale the design system:
- Validating new designs through usability testing
- Extracting components to build a UI library
- Naming the design system (Marshmallow)
- Building and hiring for a dedicated team
- Documenting the design system and establishing engagement models and governance
- Driving adoption and measuring impact
- Measuring and communicating the impact
Getting Buy-In
Securing buy-in from senior leadership was a critical step. I presented a detailed strategy deck to the CPO, CTO, and CEO, outlining my approach to building and scaling the design system and the resources required. I made a compelling case for hiring the first designer based on the ROI of efficiently executing a fast rebrand. In 2019, talabat was planning a rebrand but lacked a clear plan for its rollout in the app. As a Design Manager, I assessed the scope of work and developed a detailed plan to launch the new brand. I successfully convinced the business to pause all feature development for an entire quarter to focus on launching the redesigned app. This coordinated effort across 9 different markets in the region was pivotal in gaining the necessary buy-in and resources.
Key Steps and Execution
- Validation: We conducted usability testing to validate new components, ensuring they met accessibility standards and user needs. This involved creating prototypes, defining goals, and testing typography, colors, and iconography.
- Building a UI Library: We created a UI library in Sketch (now Figma), following the atomic design model. This library included atoms, molecules, and organisms, allowing designers to build layouts faster and maintain consistency.
- Naming the System: We engaged the community in naming the design system. The chosen name, Marshmallow, helped create a sense of identity and involvement among team members.
- Team Setup: We established a dedicated team consisting of designers, engineers, and a product manager to manage the design system.
- Roadmap Planning: We planned the components roadmap quarterly, prioritising high-impact components. Adoption planning was done in advance to align with OKRs and ensure commitment from various squads.
- Establishing Workflows: We created a detailed component lifecycle and decision tree to facilitate new proposals and ensure a structured approach to design contributions.
Communication and Socialising
Effective communication and socialising were key to the success of the design system.
- Regular updates through standups, stakeholder check-ins, newsletters, and leadership meetings.
- Workshops and walkthroughs to keep the design team updated.
- Slack channels and monthly showcases to promote engagement and adoption.
- Onboarding sessions for new joiners to familiarise them with the design system.
Impact
The implementation of the design system led to significant improvements:
- Adoption Rate: We achieved a 98% adoption rate across the organisation.
- Rebrands: Successfully pushed through two major rebrands using the design system.
- Enhanced User Experience: Delivered a consistently delightful user experience across all platforms, making updates faster and more efficient.
Learnings
Through this process, I gained several key insights:
- Community Involvement: Engaging the entire organization in naming and adopting the design system fosters a sense of ownership and commitment.
- Clear Communication: Regular updates and transparent communication are crucial for smooth adoption and ongoing engagement.
- Iterative Approach: Continuously validating and iterating on components based on user feedback ensures the system remains relevant and effective.
- Dedicated Team: Having a dedicated team for the design system is essential for maintaining quality and consistency.
The design system transformed talabat’s experience, ensuring a cohesive and efficient user experience while significantly improving scalability and consistency. This case study demonstrates the value of a well-structured design system in supporting rapid growth and enhancing the overall product experience.
Category:
DESIGN SYSTEM
Role:
DESIGN SYSTEM MANAGER
Organisation:
DELIVERY HERO TALABAT
Date: