Trip History Optimization


Project Info  Internship @ Didi

My Roles   UX Designer

Date   Jun - Dec, 2016



During summer 2016, I interned at Didi as an UX designer. Didi is a mobile app cooperation that commits to building an intelligent trip sharing platform. It allows consumers to request a trip and then be picked up by Didi drivers. Didi now serves for almost two hundred million users around China.

During this time, Didi was merging with Uber China, so I had a chance to participate in the 5.0 new version design process and my task was to optimize the Trip History.

Didi App Screenshots from App Store

Didi App Screenshots from App Store


Problems & Solutions

How to find problems

Prior to the design process, I tried to use the app from the passenger perspectives. I made about 20 trips personally in the first week by Didi application, during which I talked with drivers and other passengers. Then, I built my basic understanding about the travel process and figured out some problems that needed to be improved within the passenger's trip history. After communicating with my Product Manager, Mingyu, we defined several problems to be solved:


Trip Card Redesign 

Trip Information Analysis


To redesign the trip card, I analyzed the issue in respect of the scene, passenger, driver and basic order information. After which, I  picked out the most important factors concerning the passenger, and categorized them into 3 zones: order information zone, additional information zone, and operational zone.

Compared with the original design, I added driver information, order state, and cost to complete the trip information. Besides, the operational zone was added to help passengers pay for the trip easily, developing the expansibility of the trip card.

However, the redesigned card was much larger than the former one which means that users have to continue sliding in order to look through their trips, so I tried to reorganize the Title and Detail areas to shorten the card's height.

In the iteration 1, I highlighted the service part by putting it on the top-center of the card. In the iteration 2, I arranged the time part for a change. These were the most vital information that passengers would use for trip searching and identification. However, when both the date and service character length are long, there is no enough space. So I reorganized the information in a different way, which led to the birth of my third iteration. In this iteration, I placed Driver area and Detail area side by side, making the trip card clearer and shorter.


Trip Filter

Why people need to find certain trips?

To figure out the filter criteria, I needed to know why passengers are searching for their trips. Based on my team's user research, more than 30000 companies, including Lenovo, Huawei, and Alibaba,  remunerate their employees' commuting expenses using the Didi app. Amongst all trips, passengers need to select their commuting ones and invoice them by using Didi. People commute on workdays at the same time, and tend to use the same means of transportation. Therefore, by setting the criteria of date, time and service, the recoverable trips can be chosen easily. 


Trip Filter Wireframe

wireframe sift.jpg

Trip Filter Iteration

Through the design process, I had lots of opportunities to communicate with my mentor, user researchers, and product managers, from which I gained insights about business concerns, user demands and feasibility. I conducted multiple design pitches, compared and reflected to find a better one. Before I made any decisions, I would ask my mentor and other designers for their suggestions first, so that I could find weak points earlier.

The original design looks good. However, according to the usability testing conducted by user research team, it is too cumbersome. On the one hand, users need to scroll through four rollers to select the date period. On the other hand, the small screen resulted in considerable unintended operation.

How to make the design more explicit and easy to use? What came to my mind was a calendar.Inspired by the calendar idea,  I redesigned the date filter. In this iteration, users only need to click twice to choose the date period. In addition, the calendar is a more familiar tool to check the date, so it will be easier for users to understand and utilize the date filter.


Filter Flow


Invoicing Process Optimization

Problems & Solution

“I spend a lot of time trying to finding where to invoice my trips, and the invoicing process is so inconvenient! I have to search and invoice my trips one by one! ” Hearing these complaints again and again pushed me to pay attention on the invoicing process.

I first built a diagram to help me understand the existing invoicing structure and to find out what was wrong with it.

The invoicing process is very long, and the the step from My Wallet to Invoice is somewhat illogical, which resulted in the confusion among users. How can I simplify the whole user flow? Provided that users can select their commuting trips by using filter in Trip History, I think that adding an Invoice function to Trip History is a good way to make the invoicing process easier and more explicit. Then I must reorganize the structure.


The reorganized one was shorter than the previous one as the trip selection process was simplified. Moreover, by moving the Invoice function to Trip History, the redesigned user flow was more logical and user friendly. According to the feedbacks from passengers, they can find out where to invoice their trips now. Then based on the redesigned structure, I refined invoicing user flow.

user flow invoice.jpg

Main Walkthrough

D Invoicing Walk Through.png


During the design process, I worked mainly with Product Managers and User Researchers. I got to know about the demands and user research data from them. However, although the files could provide me with the main problems of users, they couldn't make me really understand what they felt and walk in their shoes, so I took more than 20 trips personally to talk with the real passengers. What's more, whenever I finished my iteration, I would prototype it and invite passengers to test it. I think highly of the users' responses instead of mine, even my colleagues. Because I always keep it in mind that I am designing for users.

However, the situation is that the division of  labour at company is increasingly clear and specific. As a UX designer, I had a little chance to get in touch with the real users. Even I had multiple sessions with user researchers, who conducted and analyzed  surveys, but was it really a good way for design? I don't think so. From my point of view, I regard UX designers should spend more time talking with the real users instead of leaving these tasks only to User Researchers and Product Managers.


Interning at Didi greatly developed my professional UX design skills and understanding. I treasured every working opportunities and took down working journey by Evernote everyday. In the journeys, I record my design thinkings and talked to myself about what I learned and what I could do better.