Internship, UIUX Design Meituan - EV test-drive mobile booking Improving EV pages to create a convenient and simple booking experience for app users
About
Duration
Role
Tools
Interaction Design Mobile UIUX Design
Jun- Aug 2021
UIUX, Research, Prototype
Sketch
My responsibility
I prototyped and designed main pages using Sketch that implement the new features for EV car sections in the Dianping mobile app. I also had weekly syncs with engineers and meetings with senior designers.
Impact
The redesigned EV’s test-drive page for Meituan’s lifestyle mobile app, increasing page views by 20%. The design received positive user feedback.
Overview
About Dianping App
Dianping is China’s leading local lifestyle information and trading platform that collects third-party consumer reviews with more than 200 million unique mobile users. As the domestic market of EV cars accelerates in China, EV car dealers want to provide better EV car test-drive services to customers. As part of an internship at Meituan, I joined the design team and redesigned pages for car-related products. During the internship, I also had the opportunity to work collaboratively with senior designers, presenting ideas to the leading teams. The final design is landed in the application.
Problem
1. On the existing page, users need to contact car dealers themselves through phone calls. There is no direct access to test-drive booking from the home page. 2. Existing dealer card needs to modified for better readability.
Goal
1. Create an easy-to-use and test-drive reservation making experience that follows the current design system. 2. Have a clear indication of coupon to attract page views, clicking and promote successful booking rate.
Design Preview
I. The new test drive page
The EV test drive page can be accessed from the homepage through selecting the test drive icon. The page is divided into sections that belongs to different EV car brands.
II. Improved dealers' card
New elements are included in the updated dealer card , including bookable car models, availability, bookable dealers and the offer button.
Before
After
III. Updated buttons and cards in the system
The words on button have changed from "Test Drive Offers" to "Book Now" and "Get". These words are tested to be more attractive to users than precious ones in the research and user testing. Besides, the indication of coupons and offers can better attracts user's clicking and interests to the test drive service.
Iterations & Usability testing
In this stage, I asked 5 users including senior designers in the group to test the usability. I have set up 10-min sessions with them, asking them to try the prototype and provide feedback.
Background gradient weakens the readability.
Users need to scroll a lot to view information. The gap between cards are too wide.
A dark and high hydration color background strengthen users' reading focus. More information are shown after shorten the gap.
Key takeaways
Communication with senior designers and engineers are important for implementing a new feature. I worked with a user researcher and an senior designer in the team. I learned a lot from asking them questions, including user research techniques, design practices and new tools. Besides, meetings with engineers are so important for implementation because they tends to prefer editing on existing features than creating a new component.
Think from user's perspective It is important to have empathy with users to get a good design. Meanwhile, I found it difficult to create user flows that matches user expectations as people have varied preferences and user habits. I'm glad to see the improved features were launched. If I have more time, I would continue to gather user feedback and make improvements on version 2.
.jpg)
.png)
