DiDi Design Systems

A set of two interconnected design systems developed for DiDi's digital communications across 8 Latin American markets. Each system was built to ensure visual consistency and brand credibility at scale, while adapting to the diverse audiences, channels, and cultural contexts of the region.

Client

DiDi

Role

Design Systems, Product Design, Brand, Illustration

Year

2020-2022

Context

DiDi is a Chinese ride-hailing app operating in more than 8 Latin American markets, competing with multiple ride-hailing apps, unlike China, where it has no competition. The visual illustration system inherited from headquarters was too generic to build brand credibility in the region and didn’t reflect its diversity.

At the same time, the team was producing hundreds of digital assets monthly such as emails, landing pages, in-app banners, without the ideal design software, access to stock images, or a shared visual framework. The result was inconsistent communications that varied by designer and by country with increased delivery times since each designer had to create almost from scratch.

DiDi-systems-1

Illustration System inherited from headquarters

Old-assets

Digital communications from different countries like Chile, Mexico, Peru and Colombia. 

Challenge

The challenge was to build a scalable visual infrastructure within significant technical constraints that allowed easy modifications and increased brand consistency. The solution was to create two interconnected systems: an Illustration System and a Digital Communication Guidelines System. As the Digital Communications Sr. Designer for Latam, I led the design and implementation of both systems.

Solution 01: An Illustration System

The system was designed to be modular, vectorial, and quickly adaptable to different topics, seasonality, and audiences. Vector images allowed digital communications such as emails and landing pages to be smaller in size.

DiDi-systems-2
DiDi-systems-3
DiDi-systems-4

Modular elements

The modularity of the system made it adaptable to the broad portfolio of DiDi's new services, such as motorcycle rides and delivery.

DiDi-Illustration-system_V2_Moto1
Animacion_bici
Animacion_moto

Diversity

DiDi is a global company and diversity is one of its most significant values, therefore, I wanted the characters to really represent Latin America, a very heterogeneous region. I focused on three main categories: gender, race, and relationships.

DRV-Race-Gif
DiDi-systems-6

Solution 02: Digital Communication Guidelines System

The first priority was standardizing graphic elements to establish a cohesive visual language across all communications.

DiDi-systems-7

Accessibility

Accessibility was also a priority: establishing clear visual hierarchy, improving contrast ratios to meet AA WCAG standards, and increasing typography sizes.

DiDi-systems-8

Resources for designers

The next step was to create scalable, ready-to-use templates and files for designers, so they would spend less time creating assets.

Another important feature was the creation of a UI gallery of the most used screens, so they could be used when explaining aspects of the app.

DiDi-systems-9

Impact

The two systems were adopted across the Latam team in 8 countries: Dominican Republic, Panama, Costa Rica, Colombia, Ecuador, Peru, Chile and Argentina.

20% improvement in user experience scores

Reduced delivery times and boosted team efficiency by 45%

Design team satisfaction increased from 75% to 100%

Increased brand consistency across 8 Latin American countries

© Leyla Vargas