Ctrip Membership Design System for Consistency Improvement
Redesign the system to improve users’ membership experience as well as the loyalty of our product through collaboration optimization and complex project management across Ctrip eight business units.
01/ Overview
User research & design
Cross-business units collaboration
Workshop facilitation
Cross-functional teamwork
Project management
Presentation
Scope
A design proposal
Design system including 10+ guidelines & 140+ UI components
A project plan
Project weekly reports
Presentation
Deliverables
Business
AB test shows significant increase in click rate, orders and annualized income
User experience
Great increase in membership NPS
Data impacts
02/ Context
Ctrip membership system is complicated, including two types of membership, five-level membership and paid membership.
The membership design system is expected to provide complete application guidelines and components for different scenarios of eight business units(BU), including Hotels BU, Flights BU, Car Rentals BU, etc. Each business unit has its own design team. As a result, it is important to create a design system which is user-friendly for different designers to follow and use.
Current situation
The system needs to be designed based on full understanding of both internal designers from different business units and external Ctrip members.
Internal users
Due to Ctrip’s design teams setting, each business unit has its own design style. Membership system is special that has connections with eight business units. As a result, the problem is inconsistency of membership design because of bad use of the current design system.
External users
For Ctrip members, inconsistency causes members’ weak perception of membership benefits during the transaction chain. As a result, it’s hard form them to remember either apply benefits or repurchase for gaining more benefits.
User problem
03/ Problem Discover
“Inconsistency causes weak perception while users jump vertically across different BUs’ pages.”
User pain points
According to user feedback from the customer service, user interviews and data analysis, user pain points have been collected and classified:
“Have no idea about which member level I am in.”
“Sometimes I didn’t notice that I have used a benefits while placing an order. Maybe there wasn’t a notification.”
“I don’t know what benefits I have and where to use them.“
“I feel confused why the membership information seems different in different pages? “
“Once I applied a train station VIP Lounge benefit, I didn’t notice that I only have one pass and it is very unfriendly because there is no notification about this. “
I initiated workshops with different design teams from eight business units to propose the project’s goal and problems. I firstly convinced them the importance and necessity of the project. Then I collaborated with other designers to collect the seventeen specific design problems in total.
inconsistency of paid membership introduction pages
inconsistency of the price tags of paid membership
inconsistency of the same benefit display throughout the transaction chain
inconsistency of the user flow of same benefit
inconsistency of tag design component in different pages
inconsistency of the benefits’ copywriting
missing information about benefits application
great effort spend when looking for products with available membership benefits
missing information of the benefit’s key information
while applying a benefit, missing information to notify users it
is due to their membership
“Design system does not well for internal designers to use.”
Collaboration problems
The design system also has problems that designers from different BUs couldn't follow well as expected.
The design system is not practical for different design teams to use due to lack of consideration of different scenarios. We haven’t collected specific problems each business units have.
The design system is not clear enough to control the application. As a result, inconsistency still occurs although designers have followed the design system.
For example
The label system has the biggest inconsistency application problem due to the old guideline provides too many UI component choices and just shows every component separately in different scenarios without high-level, vertical consideration or more specific explanation about how to choose:
As a result, different BU designers still delivers very different design although they have followed the guidelines.
“The application process is not designed or organized well.”
Because of the company’s structure regarding design teams, the membership design system hasn’t been followed strictly in different business units.
There is no clear brief of the membership design system, many designers used the design system incorrectly.
There is no review mechanism for membership design. As a result, some designers didn’t design based on the design system.
04/ Collaboration & Design
This time, we added practical guidelines and redesigned the system details aiming to eliminate all the concerns we collected from other BU’s designers.
UX guidelines
In order to let the right people do right thing, I defined a set of systematic UX guidelines for other BU’s designers to follow and they still can design based on their BU’s experience style. Also, we set review mechanism to make sure they also keep the consistency vertically.
UI components
For UI components, I arranged workshops for teamwork, including brainstorming and reviewing to improve collaboration efficiency. We met regularly to gather feedback about system application with other design teams and revise more rapidly. This time, we simplified and defined practical application rules, focusing more on vertical scenarios.
05/ Push the Design system to Land Effectively
Project management
Build the communication bridge and keep everyone at the same page
Because the project lasted long, I used weekly e-mail reports to remind all the related BUs what happened last week and what are we going to solve this week. I used 1 on 1 chat groups for each BU in order to get the right BU involved and let others that are not related for this week’s plan to “rest” without too much disturbance.
Set the timeline and milestone reasonably
According to the new design system, we classified and predicted how complex the design work could be and how long should it take.
For example, some redesign based on the guidelines required product managers to get involved, while some are just UI level revisions.
19+ BU redesign solutions
We pushed the design system to land and got 19+ BU redesign solutions according to new design guidelines, and achieved the goal of improving the membership consistency.
06/ Impacts
Business
AB test result: significant positive
Click rate: +0.8%
Daily orders: +1500
Annualized income：4000w
User experience
Silent awareness rate of member level：+7%
NPS of paid membership：+24%
NPS of level membership：+25.5%
NPS of member benefits：+2.3%
Design
Represented the project team to present at 2020 Trip.com Design Committee
Won the Best Cooperation Award
