DiDi Internship
Overview
DiDi Chuxing (DiDi) is the world’s leading mobile transportation platform. The company offers a full range of app-based transportation options for 550 million users.
During my internship in Didi, I was on the platform team working on different tasks and projects including wire-framing, visual design and user research, while my main focus was on the design system.
Time
June - August 2017
3 Months
Location
DiDi Chuxing HQ,
Beijing, China
Team
Platform Team
My Role
Design system, UX Design, Visual design, User research
DiDi has more than 8 product lines, that each has an individual design team.
How to build a design system and coordinate with different teams to keep a coherent overall experience?
...
Challenges
DiDi mobile app is already established without a complete design system. It needs to be cleared up.
The current style guide is outdated and doesn't communicate how designers should use it.
The company is fast-growing. New features come out every day. It is important to ensure both quality and efficiency.
Design teams working in different locations are not connected closely. They need a common language.
My Process
INSPECT
Inspect all the current use cases of the section
COMPARE
Compare different use cases (and compare them with the old style guide and pattern library if existed) to find commonality and identify patterns.
PRINCIPLE
Set up principles for the section to guide the final decision of the rules and future design.
AUDIT
Decide which patterns stay, go, or need tweaking based on the principles and the need of the design system users.
Create
Summarize the use cases and create rules. Create exceptions for special uses.
Iterate
Iterate rules in old style guide and communicate with other teams to update old design.
Eliminate
Report irregular uses and work with other teams to eliminate confusing and odd design.
Example
The "Senior Cab" product uses a different layout with larger font sizes and a simplest input style. The design of this product takes care of senior users' need.
In our typography guideline, we made an exception for this product, according to our principle of inclusivity.
SHOWCASE
Showcase the rules and guidelines in a clear and unified format along with the typical use cases.
Outcomes
I independently drafted the design guidelines of typography, gesture and feed card.
They have been distributed to more than 100 DiDi designers in the format of PDF and Sketch file.
Due to the high confidentiality, I am not able to show all the work I did during my internship at Didi. With the permission of my manager in Didi, I am presenting a few examples of my contribution to the Didi 5.0 design guidelines. They are official documents.
Annotations
Examples
Foundation - Gesture
Interaction Guideline -
Gesture
Principles
Simplify the gestures and be considerate of user habits
2) Use the same gestures for the same function in different scenarios
1) Use intuitive gestures with predictable usage.
For hidden gestures, use arrows or handles to signify.
Or show in onboarding.
Mapping the gesture with its function
"Slide left to hide menu"
Use pairs of gestures to easily reverse
double tap with one finger to zoom in;
single tap with two fingers to zoom out"
Use gestures as an alternative way to interact as long as it is easy to use for the user
Use Cases
Pattern Library
Overview
Why we use gestures
Why we need gesture guideline
Consistent
1) Use standard gestures, avoid complicated gestures
Intuitive
Alternative
Reversible
Interaction Guideline -
Feed Card
Types of feed card +
hierarchy
User should be able to determine the type of information by the position/hierarchy
Notification
Basic information
Product Information
Priority determined by each product team
Extension
Components - Feed Card
Visual Guideline - Typography
Style Guide
Use single font family, the system default font family
Font size and color
Font size should be a multiple of 4 between 20-80px. Font size larger than 52px can only be used for numbers. For special cases like "senior taxi" can use larger font sizes
Because of the different height of Chinese characters and numbers, the font size of numbers can be adjusted in some cases. It has to be a multiple of 2
Use Cases
For product with specific target group, like "senior taxi", can use different font sizes. The font size still has to be a multiple of 4. Talk to platform team for specific user scenarios
Usability Test
Color Contrast Test
Foundation - Style - Typography
Principles
Learnings
Understood my role and responsibility as a designer in a large tech company.
Learned how to collaborate with engineers, product managers, and other designers.
Exposed to industrial level product design and learned from my amazing colleagues.
Had a systematic view of the entire product and learned the importance of a design system.