Multi Brand Design System For DP World
- Created and implemented a unified, scalable multibrand design system at DP World, streamlining design processes, enhancing collaboration, and preparing the organization for future scalability
Role
As the lead product designer, I managed and mentored our design team in building and implementing a unified, scalable design system. This initiative streamlined design processes, enhanced collaboration between designers and developers and prepared the organization for future scalability and white-label solutions.
Team
Our team was made up of three designers and a design system engineer. Two designers and the engineer were based in Bangalore, and the designer from the branding team was in Dubai.
Introduction
As a Senior Product Designer at DP World, I led the creation of a multibrand design system from the ground up. This initiative aimed to unify our disparate design practices, enhance collaboration between designers and developers, and prepare the organization for future scalability—including white-label solutions and new brand guidelines.
The Problem
Fragmented Design Ecosystem
- Multiple Inconsistent Design Systems: Each product team operated with its own design system, leading to fragmentation and inconsistency.
- Components are not exhaustive in catering to various functional needs.
- Edge cases are not part of the existing design system.
- Redundant Efforts: Designers frequently recreated components for different projects, wasting valuable time and resources.
- Inconsistent User Experience: The lack of standardization resulted in a disjointed user experience across DP World’s digital products.
Development Inefficiencies
- Developer Bottlenecks: Developers spent excessive time building components from scratch, hindering productivity.
- Slow Feature Rollouts: The inability to transfer assets between projects caused delays in designing and developing new features.
-
Limited structure for library upgrade across EDS and design
Lack of Future Readiness
- Scalability Issues: Existing systems were ill-equipped to handle future requirements, such as white-label solutions or adaptations to new brand guidelines.
- Adoption Challenges: Adopting new technologies or methodologies without a unified approach was cumbersome.
The Goal
To develop a unified multi-brand design system that:
- Standardizes Components: Establishes a single source of truth for all design assets.
- Enhances Consistency: Delivers a cohesive user experience across all products.
- Improves Efficiency: Reduces design and development time through reusable components.
- Facilitates Collaboration: Strengthens synergy between designers and developers.
- Prepares for the Future: Supports white-label solutions and adapts seamlessly to new brand guidelines.
Process and Approach
Auditing Existing Design Systems​
• Comprehensive Analysis: Reviewed all existing design systems within DP World to understand the scope of inconsistencies and redundancies.
• Usage Patterns: Documented how components were utilized in their respective products.
• Identified Redundancies: Highlighted overlapping components and pinpointed areas lacking standardization.
Collaborative Workshops​
• Cross-functional engagement: Conducted workshops involving designers and developers to gather diverse insights.
• Use Case Mapping: Mapped out various component use cases across products to understand common requirements.
• Feedback Collection: Encouraged open dialogue to identify pain points and gather requirements for the new system.
Benchmarking Industry Standards Design Systems
• External Research: Studied successful design systems like Microsoft Fluent, Atlassian, Oracle’s Redwood, Adobe’s Spectrum, Google Material, IBM’s Carbon and many more to gather insights and best practices.
• Previous Experience: My previous experience with the H&M fabric Design system, which catered for the need for multiple brands, was very useful in this situation
• Best Practices Extraction: Identified methodologies relevant to our needs, focusing on scalability and adaptability.
Developing the Multibrand Design System​
• Centralized Component Library: Built a comprehensive library of UI components in Figma, serving as the single source of truth.
• Theming Capability: Introduced multiple themes encompassing specific icons, typography, and color palettes to support different brands.
• Flexible Components: Developed adaptable components, such as a flexible table component, capable of handling various data and layout needs.
• Scalability and Future Readiness: Ensured the system could accommodate future brands and white-label solutions and adapt to new brand guidelines seamlessly.
Implementation and Demonstration
• Interactive Prototypes: Created demos showing how designs can transform by swapping themes in Figma, highlighting the system’s versatility.
• Explainer Videos: Produced instructional videos to help designers and developers understand key features and components.
• Communication Channels: Established a Teams channel for real-time support, knowledge sharing, and as a repository of FAQs and solutions.
• Training Sessions: Organized onboarding sessions to familiarize teams with the new design system and its functionalities.
Post-Implementation Audit and Adoption Monitoring
• Adoption Assessment: Conducted audits using the Design Lint plugin to evaluate the adoption of the design system in designers’ files.
• Identifying Detachments: Used Design Lint to find detached components, which indicated areas where the design system was not fully utilized.
• Continuous Improvement: Analyzed audit results to address gaps in adoption, providing targeted support and resources where needed.
The Solution
One Design System
A unified, scalable, and future-ready multi-brand design system that:
• Streamlines Processes: Enables quick application of different themes without recreating components.
• Ensures Consistency: Maintains a uniform look and feel across all DP World products, enhancing the user experience.
• Enhances Collaboration: Facilitates seamless sharing and reuse of assets among designers and developers.
• Reduces Development Time: Provides developers with ready-to-use components, accelerating the coding process.
• Supports Future Initiatives: Easily adapts to new brand guidelines and supports white-label solutions.
• Monitors and Promotes Adoption: Utilizes tools like Design Lint to ensure consistent use and adherence to the design system.
Visual Demonstration
Design system enables seamless theme swapping, allowing designers to reuse components and layouts across multiple brands without starting from scratch. With just a few clicks, a designer can begin with wireframes and instantly apply a chosen brand’s guidelines—transforming the look and feel while preserving underlying structures. As demonstrated in our video, this approach significantly reduces design effort, streamlines the workflow, and ensures consistency across all brand experiences.
Flexible Table Component: Demonstrated the adaptable table component that can handle various data types and layouts, showcasing its ease of customization.
Our design system is built to adapt seamlessly across various screen sizes, ensuring that every component—from buttons to navigation bars—remains clear, functional, and visually consistent on mobile, tablet, and desktop devices. In addition, it’s structured for scalability, allowing new features and components to be added or modified with ease without disrupting the existing system’s integrity or design language.
Results and Impact
Design Efficiency Gains
• High Adoption and Usage: Four product domain actively use the One Design System, which includes 137 components and variants, along with 12 styles tailored for multiple brands and white-label solutions.
• High adoption compared to UDS and Flow
Comparing usage patterns with other design systems (like Flow and UDS) shows the One Design System’s significantly higher insertion rates and peaks during significant project phases.
• Widespread Engagement: The system recorded 37.2k component inserts in a single week, reflecting strong reliance on standardized elements for rapid design execution.
• Reduced Rework: High-frequency components—such as Text Fields (160k+ inserts/year) and Data Cells (139k+ inserts/year)—are reused extensively, minimizing redundant design efforts.
Development Efficiency Gains
• 35% Faster Development Cycles: Developers leveraged pre-built components, accelerating development timelines and reducing workload.
• Lower Detach Rates Indicate Quality: Very low detachment rates—e.g., Text Fields at just 0.06%—suggest components are well-structured, reducing the need for custom tweaks and streamlining handoff to development.
Consistency and Quality Improvement
• Uniform Branding Across Platforms: With multiple themes and styles readily available, teams maintain consistent brand experiences without manual adjustments.
• Strong System Integrity: Low detachment metrics (all under 0.3%) confirm that the design system aligns with user needs, ensuring components remain intact and on-brand.
Business Impact
• Faster Time-to-Market: Readily available, high-quality components reduce design and development cycles, enabling quicker product launches and adaptations to new brand guidelines.
• Long-Term Cost Savings: Fewer design inconsistencies, reduced UI bugs, and streamlined workflows translate into lower overheads and more efficient resource use.
Next Steps
Completing Documentation
• Comprehensive Guides: Develop extensive documentation to supplement existing support resources, ensuring long-term sustainability.
• Living Documents: Create documentation that evolves with the design system, incorporating updates and new best practices.
Expanding Resources
• Additional Explainer Videos: Produce more instructional content covering advanced components and features.
• Enhanced Support Channels: Continue to promote and expand the Teams channel as a central hub for knowledge sharing and collaboration.
Continuous Improvement
• Regular Adoption Audits: Maintain the use of tools like Design Lint for ongoing monitoring and support.
• Feedback Loops: Establish mechanisms for users to provide feedback, ensuring the design system meets evolving needs.
Promoting Best Practices
• Community Engagement: Encourage team members to share tips, solutions, and innovations within the community.
• Training and Workshops: Organize regular sessions to keep teams updated on new features and practices.
Conclusion
By coaching and mentoring our designers to build a unified, multibrand design system, we created a solid foundation that now serves as the backbone of DP World’s products. This system streamlines design process, makes it more efficient, and ensures we can easily scale and adapt to future needs, including white-label solutions and new brand guidelines.
Through this experience, I have deepened my understanding of design systems, collaboration, and continuous improvement. Moving forward, I am committed to refining these approaches, applying what I have learned to new teams and projects, and confidently embracing the challenges that lie ahead.