DiDi

Designing In-Trip Video Ad Slots for DiDi Global

Role

Product Design intern

Duration

July-Nov 2024

Team

1Product Designers 1Product Manager 2 Engineers

MY IMPACTS

End to end design

Future vision development

Cross-team collaboration

Visual Design

DiDi

Designing In-Trip Video

Ad Slots for DiDi Global

Role

Product Design intern

Duration

July-Nov 2024

Team

1Product Designers 1Product Manager 2 Engineers

MY IMPACTS

End to end design

Future vision development

Cross-team collaboration

Visual Design

• BACKGROUND

Integrate dynamic video ads into the user lifecycle with minimal friction.

By Q3 2024, competitors launched video ad capabilities, while our advertisers increasingly demanded premium video placements within the core user journey.

Launched for Beta Testing: December 2024

Design Scope

12 Main Screens

12 Main Screens

Key Outputs

16+ compoents

16+ compoents

• The Business Context

Bridging the gap between market trends and DiDi's ad capabilities.

But

• The Business Context

Bridging the gap between market trends and DiDi's ad capabilities.

But

• Opportunities Area

From Anxiety to Engagement: Redefining Emotional Gaps in Transit

According to the June 2024 User Research Report, experience scores across the journey stages were 791 (Pre-trip), 742 (In-trip), and 794 (Post-trip). Analysis revealed a significant "Anxiety Gap" between requesting and pickup, where users often complained about driver distance

• Team Alignment

Design Requirement

In collaboration with the Product and Engineering teams, we established four core design principles: Format Inclusivity, User Control, Contextual Integration, and Visual Consistency & Componentization.

Format Inclusivity

User Control

Contextual Integration

Visual Consistency & Componentization

• Desk Research

Industry Standards & Native Adaptation

In collaboration with the Product and Engineering teams, established four core design principles: Format Inclusivity, User Control, Contextual Integration, and Visual Consistency & Componentization.

• Design

User Touchpoints & Flow Mapping

We identified this "Anxiety Gap" as a strategic opportunity for video ads, leveraging engaging content to redirect user attention and mitigate wait-time anxiety.

• Design

Visual Exploration: A vs. B

Card Pattern :A

Applied a black semi-transparent overlay to darken the background, ensuring a minimum 4.5:1 contrast ratio for white text across all areas. This maintains WCAG accessibility standards while delivering a more immersive viewing experience.

Card Pattern :B

A black semi-transparent overlay is applied to the background to ensure white typography maintains a 4.5:1 contrast ratio across all areas, meeting WCAG accessibility standards while providing a more immersive viewing experience.

• Design

Visual Exploration: A vs. B

Card Pattern :A

Applied a black semi-transparent overlay to darken the background, ensuring a minimum 4.5:1 contrast ratio for white text across all areas. This maintains WCAG accessibility standards while delivering a more immersive viewing experience.

Card Pattern :B

A black semi-transparent overlay is applied to the background to ensure white typography maintains a 4.5:1 contrast ratio across all areas, meeting WCAG accessibility standards while providing a more immersive viewing experience.

• Application

Component Architecture & Adaptability

Step 01: Waiting for Response

This stage covers the window between placing an order and successful dispatch. During this phase, user interaction is concentrated on the bottom half of the screen—specifically for selecting additional vehicle types—resulting in low engagement with the map area.

Order Placement

In the default X-panel state, the ad placement is optimized to ensure the price card remains visible, maintaining clear price transparency for the user.

In the default X-panel state, the ad placement is optimized to ensure the price card remains visible, maintaining clear price transparency for the user.

Awaiting Response

During the "Waiting for Response" phase, 35% of the map remains visible while ensuring that "AnyCar" additional selection remains fully functional and unobstructed.

During the "Waiting for Response" phase, 35% of the map remains visible while ensuring that "AnyCar" additional selection remains fully functional and unobstructed.

Vehicle Types Added

In the default X-panel state, all additional vehicle options are fully displayed to ensure a seamless selection experience.

In the default X-panel state, all additional vehicle options are fully displayed to ensure a seamless selection experience.

Step02:Waiting for Response

This stage covers the interval from order placement to successful dispatch. User focus is primarily centered on the lower half of the screen for selecting additional vehicle types, making the map area a secondary priority during this phase.

Arriving Soon

After accepting the order, the driver begins heading toward the pickup point. Since users need to monitor the driver’s real-time location, the layout ensures 40% map visibility to maintain situational awareness.

En Route


As the driver approaches the user’s vicinity, the user must focus on vehicle details and precise location for a smooth pickup. To ensure accuracy and minimize distractions during this critical transition, no ad cards are displayed in this scenario.

As the driver approaches the user’s vicinity, the user must focus on vehicle details and precise location for a smooth pickup. To ensure accuracy and minimize distractions during this critical transition, no ad cards are displayed in this scenario.

Step 03: End of Trip

During these two trip stages, the user's need for map visibility persists; however, by the End of Trip, map engagement drops to near zero.

In-trip

Users may monitor the map for real-time traffic updates, especially during congestion. To accommodate this, the layout maintains 35% map visibility.

End of Trip

As the user’s need for the map drops to near zero at this stage, map visibility is reduced to 25% (ensuring no interference with core operations).

• FInal Deliverable

Video Ad Design Specifications V1.0

The final output is the inaugural version of the video advertising guidelines for DiDi’s International Mobility Business.

Learning

I never expected that the memories of these past six months would carry such profound weight in my life.

Overall, this was an amazing internship and I couldn't have asked for it to have gone better. I will cherish the memories I made forever!

Let's build something cool together!

Follow Me on

©2026 Chongyu

Let's build something cool together!

Follow Me on

©2026 Chongyu

Create a free website with Framer, the website builder loved by startups, designers and agencies.