Agoda - a Booking Holdings Company
Agoda Design System
Introducing the latest evolution in design at Agoda: a newly unified Design System meticulously engineered to elevate both designer and developer experiences. This cohesive system is tailored to streamline workflows, significantly accelerating the pace of meeting business objectives.
By seamlessly integrating design and development processes, the ADS not only fosters enhanced collaboration but also drives efficiency, ensuring that our team's creative and technical endeavors are perfectly aligned with Agoda's strategic goals.
Role
UX Engineer
Platforms
Figma, Notion, Confluence, JIRA, Storybook, GitLab
Deliverables
UI Kit, Design Language, Design Tokens, Component Library (React)
Timeframe
~ 18 months
Project Overview
At Agoda, we embarked on an ambitious project to unify our multiple design systems across teams into a single, cohesive design language. This initiative was aimed at supporting all platforms with a focus on scalability, consistency, and efficiency.
Problem Statement
Previously, our design approach was fragmented, with different teams operating independent systems. This led to inconsistencies in user experience, increased maintenance efforts, and a slower response to market changes. Our objective was to migrate to a unified design system, leveraging Design Tokens to ensure a seamless integration across various design tools, coding frameworks, and white-label theming.
Users and Audience
The primary users of this system were our in-house design and development teams. Indirectly, this system impacted our end-users across various platforms, enhancing their overall experience with Agoda’s products and services.
Roles and Responsibilities
As a UX Engineer, my role encompassed overseeing the migration process, developing the architecture for the unified design system, and implementing Design Tokens. I collaborated closely with UX/UI designers, front-end and back-end developers, and product managers to ensure a smooth transition.
Key Responsibilities:
-
Design System Creation: Spearheaded the development of Agoda's Design System, focusing on scalable UI libraries and efficient Design Tokens.
-
Figma Expertise: Utilized Figma for robust design asset management, streamlining the design process.
-
React Integration: Implemented and tested UI components within React, ensuring optimal functionality and user experience.
-
Collaborative Efforts: Bridged the gap between design and engineering teams, aligning technical execution with design vision.
-
User-Centric Approach: Prioritized accessibility and inclusivity, tailoring design elements to a diverse user base.
-
Agile Practices: Adopted agile methodologies to adapt quickly to changing requirements and enhance team productivity.
Outcome: The Agoda Design System significantly improved design coherence and operational efficiency, contributing to a more intuitive and consistent user experience across Agoda’s digital platforms.
The Working Process and Actions Taken
Our journey began with an in-depth analysis of existing systems and identifying common elements and discrepancies. We then developed a phased migration plan, starting with core components.
The implementation of Design Tokens was crucial – these tokens represented design decisions like color, typography, spacing, etc., and were used to maintain visual and functional consistency across platforms. We employed tools and technologies that facilitated this process, such as Figma for design and various front-end frameworks for implementation.
Initial Assessment and Planning
- Audit of Existing Systems: Conducted a comprehensive review of all existing design systems used across teams.
- Identifying Common Patterns and Discrepancies: Mapped out common elements and inconsistencies to understand the scope of unification.
- Strategizing Migration: Developed a step-by-step migration plan, prioritizing elements based on their impact and complexity.
Collaboration and Iterative Development
- Cross-functional Workshops: Organized workshops with designers, developers, and product managers for collaborative development.
- Iterative Feedback Loops: Implemented an iterative approach, regularly testing and refining components based on feedback.
Testing and Quality Assurance
- Prototyping and Testing: Developed prototypes to test the design system in real-world scenarios.
- Quality Assurance: Conducted thorough QA sessions to ensure compatibility and performance across different platforms.
Figma UI Kit Library: Button Component
In our quest to streamline design and development workflows, we've meticulously consolidated our component library into a unified source of truth, accessible across all platforms and funnels. This comprehensive library not only showcases a diverse array of component variants but also delves into a detailed anatomy of each component.
It includes tokens, spacings, and guidelines for interactive states, ensuring a thorough understanding of each element.
Crucially, we have synchronized the Properties and Values within the Figma component-level parameters and our React Framework components.
This harmonization guarantees that designers and developers speak the same language, using identical terminologies and settings for each component.
Such alignment fosters a more cohesive and efficient collaboration, bridging the gap between visual design and functional implementation. This approach ensures that the transition from design to code is seamless, maintaining consistency and integrity across all stages of product development.
Design Language: Design Tokens (Colors & Typography)
Implementation of Design Tokens
- Defining Design Tokens: Created a comprehensive set of Design Tokens representing all the design elements.
- Integration with Tools: Ensured that Design Tokens were integrated with Figma plugins like Tokens Studio for easy access and application.
- Training and Documentation: Provided training sessions and documentation to ensure smooth adoption by all teams.
DroneJS: React Framework and Documentation for ADS
- Architecture Design: Established a scalable and flexible architecture for the new design system.
- Core Components Development: Began with the migration of core components, such as typography, color palettes, and icons.
- Stakeholder Engagement: Regularly consulted with key stakeholders for feedback and alignment.
Outcomes and Takeaways
The unified design system significantly improved our product development lifecycle. Design updates became more efficient, as changes in Design Tokens automatically reflected across all platforms. This not only enhanced the consistency of the user experience but also reduced the time and resources needed for updates. Key takeaways included the importance of cross-team collaboration, the effectiveness of Design Tokens in large-scale systems, and the need for an adaptable system to cater to future growth and technological advancements.
Success metrics and numbers
A snippet of the various "success metrics" we've used to determine the progress and improvements ADS brought to our organization as part of our KPIs, some of these were highlighted during Quarterly Business Reviews by our stakeholders and PMs.
65%
Consistency Metrics
Following the implementation of our updated system, we achieved a 65% improvement in UI consistency across platforms. This metric was derived from a comparative analysis of prior audits, which identified discrepancies in duplicate components and styling values.
The integration of DroneJS components from Agoda Design System 2.0 significantly harmonized the visual elements across our website.
38%
Development Efficiency
We observed a notable 38% improvement in component usage by developers, leading to a more efficient code review process.
This enhancement directly contributed to an increased readiness of experiments within the current sprint, streamlining our development workflow.
66%
Resource Utilization
We significantly streamlined the process for designers to identify and utilize the correct components for specific funnels/pages.
By introducing a dedicated Slack Support Channel with 'on-call' designers and UX engineers, we reduced resolution time for resource utilization issues from 3-6 days to 0-2 days, marking a 66% improvement in efficiency.
78%
Cross-team Collaboration
Our internal surveys indicated a 78% increase in cross-departmental collaboration satisfaction by the end of Q2 2023.
This feedback was gathered from product designers, product managers, and software engineers who engaged with the new ADS 2.0 UI Kit, React Framework, and supporting documentation and channels.
100%
Adaptation to Changes
Despite initial challenges in framework implementation, our team's dedication to research and experimentation led to the successful integration of 65% of all components and 100% of the most utilized components on the platform.
This achievement underscores our commitment to evolving and adapting our systems to meet changing needs and technologies.
30%
Resource Utilization
A significant 30% of experiments leveraging the new ADS 2.0 components reported an increase in success scores.
This improvement was attributed to faster loading times, enhanced visual transitions, better accessibility, and a more consistent and legible visual language, all of which are integral to an elevated user experience.