Trip.com
Redesigning a Pop-Up Component to Boost Email-Based Login and Registration Success Rates
Platform
Trip.com Web & Moble Web
Time
Aug 2023
Role
UX Design, Research
Tools
Figma
Team
Product Manager, Legal Counsel, UI Designer, Developer
Project Brief
Background
In the summer of 2023, I was honored to be selected as a UX Designer Intern at Trip.com, where I contributed to the design of Trip.com's products and internal B2B software. One of my key responsibilities was working on the login and registration module, a critical project for the Trip.com User Experience Design Common Team. This document focuses on a project related to optimizing the post-action pop-up component related to the registration and login module.
This component is designed to guide guest users (Unregistered or non-logged-in users ) to register or log in after they input an email address on Trip.com's web or mobile web platforms. (Note: This component is not required on the app as users must log in or register to place an order.)
Why is this component important?
Trip.com processes over 120,000 flight orders daily, alongside a higher volume of hotel orders. These orders primarily come from two channels: Direct customers and Meta customers (via platforms like Google or Skyscanner), which account for 44% of total orders.
Trip.com allows users to place orders without registering or logging in, resulting in a high proportion of Guest orders:
Web Platform
41.4%
Flights
23.3%
Hotels
Mobile Web Platform
80.5%
Flights
70.2%
Hotels
Proportion of Guest Orders
Guest users offer lower commercial value than Registered/Logged-in Users, driving worse short-term conversion rates, repeat purchase rates, and long-term strategic benefits for operations, marketing, and branding. Improving registration and login rates is vital for the platform's growth.
Use Cases
Booking Info Filling: Guest users input their email addresses on hotel or flight order forms.
Price Alert Creating: Guest users provide email addresses in the "Create Price Alerts" feature of flight services.
Booking Info Filling
Price Alert
Pre-Update State of the Component
Click-through rate (CTR): The percentage of users who click on the component out of the total number of times it is displayed, indicating user interest or engagement.
Click success rate: The percentage of clicks on the component that lead to a successful login/registration.
Exposure success rate: The percentage of component exposures that lead to a successful registration.
The component's conversion performance on both platforms is unsatisfactory, and a detailed analysis will be presented later.
Web Platform
Login
Registration
15.89%
Click-through rate
48.17%
Click success rate
17.51%
Click-through rate
90.50%
Click success rate
7.68%
Exposure success rate
15.85%
Exposure success rate
Mobile Web Platform
Login
Registration
15.57%
Click-through rate
52.47%
Click success rate
10.53%
Click-through rate
91.64%
Click success rate
8.17%
Exposure success rate
9.65%
Exposure success rate
Pre-Update Component Metric
(Click-through rates * Click success rate = Exposure success rate)
Design Goals
Increase conversion rates: Improve click-through and success rates for registration and login.
Reduce Guest orders: Lower the proportion of Guest orders to indirectly boost repeat purchases and order volume.
Enhance long-term user value: Grow the registered user base and strengthen the platform's core assets.
My Impact
Using data analysis, competitive analysis, walkthrough, and A/B testing, I collaborated with product managers (this project, flight team, hotel team), UI designer, developer, and the legal team to propose and implement optimized solutions. Ultimately, I delivered high-fidelity UX interaction designs along with research findings and detailed design specifications. These efforts resulted in a significant improvement in registration and login rates for the component.
Design overview
Key improvement: Registration and login methods, Structure and information, Visual.
Metrics
We validated the Exposure Success Rate through A/B testing: The proportion of users successfully registering or logging in after the component is displayed.
Web Platform
Total
Login
Registration
+43.9%
13.31%→19.15%
+26.0%
7.68%→9.69%
+47.7%
15.85%→23.4%
Mobile Web Platform
Total
Login
Registration
+109.9%
9.29%→19.5%
+15.6%
8.17%→10.29%
+132.0%
9.65%→22.5%
Exposure Success Rate
Design Process
▼ The following is the design process
Let’s dive deeper into the previous component data
I revisited the pre-revision component data provided by the product manager, and I discovered clues to several key issues within it.
Web Platform
Login
Registration
15.89%
Click-through rate
48.17%
Click success rate
17.51%
Click-through rate
90.50%
Click success rate
7.68%
Exposure success rate
15.85%
Exposure success rate
Mobile Web Platform
Login
Registration
15.57%
Click-through rate
52.47%
Click success rate
10.53%
Click-through rate
91.64%
Click success rate
8.17%
Exposure success rate
9.65%
Exposure success rate
Pre-Update Component Metric
(Click-through rates * Click success rate = Exposure success rate)
The overall click success rates for web and mobile web are roughly equal, but the poor click-through rate on the mobile web results in a lower exposure success rate compared to the web. Click-through rates are below 20%, with the mobile web registration click-through rate being the lowest (10.53%).
Login click success rates, at around 50%, are significantly lower than the registration exposure success rates, which exceed 90% but still has room for improvement.
Issues Identified:
Through analyzing pre-revision component data, conducting walkthroughs of the current component, and referencing previous user research data from the team's registration and login-related projects, the following key issues were identified:
Click-through Rate
Issue 1 - User Motivation: Users have low motivation to register/login because Trip.com allows Guest orders, prioritizing immediate needs over account creation.
Guest User
Honestly, I just want to quickly book my ticket and be done with it. Registering feels like an extra step, and I’d rather just complete my order as soon as possible.
"
"
Issue 2 - Perceived Complexity: Current login/registration flows are perceived as effort-intensive (e.g., requiring password input for login and setup for registration)
Issue 3 - Attractiveness: The component lacks engaging information presentation.
Issue 4 - Mobile-Specific Issues:
‧ Delay: The component takes 1.5 seconds to appear, reducing click-through rates.
‧ Position: Email input is the last field in the form, and users often scroll past it before the delayed component appears.
‧ Text: The text suitable for web length becomes overly lengthy and takes up significant space when displayed on mobile web.
1.5S
B. Click Success Rate
Issue 5 - Password Login Challenges: Users often forget or mistype their passwords. Previous A/B testing on the app confirmed this issue, showing verification code login success rate are much higher than password login success rate.
Password Login
79%
Success Rate
Verification Code Login
93.4%
Success Rate
Issue 6 - Registration Challenge: Password requirements are frequently unmet.
Competitive Analysis
Many competitors use innovative email-based registration and login methods:
Login Methods
Email verification code
Email verification link
Registration Methods
Checkbox-based registration (e.g., account creation tied to the contact email on the order form)
Mandatory registration (no option to proceed without account creation)
One-click registration (combined with code-based login)
Design Strategies
After conducting issue analysis and competitor analysis, it becomes clear that for operations like booking, the core user need is to complete the booking process quickly, while login or registration is just a supplementary step. Traditional password-based login methods may add unnecessary friction for users. We need to reduce users' psychological resistance to logging in or registering by enhancing the process experience and clearly showcasing the advantages of having an account, encouraging users to willingly complete the login or registration process and maximizing user conversion rates.
Text and Visual Optimization : Optimize text structure and improve visual appeal.
Fix Delay and Position: solve mobile web platform issue.
Simplify Login Method: Implement both password and verification code options (defaulting to the latter). (The form of email login link has also been considered, but users use different devices to view emails, which will lead to users still not logging in the original web page.)
Simplify Registration Method: Introduce password-free registration to simplify the process.
User Flow
This is the primary flow for Guest user. I charted a basic version, taking into consideration choices users might want to make, and specifying a clear simple path, which would allow me to start structuring the content within the conponent.
Extra Challenges and Solutions
Business Complexity: This project spans multiple scenarios (e.g., order forms for flights/hotels and price alert pages), each with unique requirements. For instance, price alerts require mandatory registration, unlike order forms.
Therefore, I communicated with the product manager and decided to customize the design of this component for different platforms and scenarios.
Legal Compliance: In the registration component module, after conducting competitive analysis, I discussed the potential new registration methods with the product manager. He proposed using a checkbox with a default selection for registration.
This decision was based on his calculation of the expected exposure success rate:
New approach exposure success rate = page conversion rate × checkbox selection rate = 26% × 80% = 20.8%
This figure indeed surpasses the previous 15.85%. However, I identified significant risks with this approach. Trip.com operates in 39 countries, which means it must comply with the legal regulations of each country. For common features like registration and login, many countries have strict laws prohibiting default selections for agreeing to privacy policies or subscribing to marketing emails. Thus, using a default-checked checkbox for contact email registration poses a clear legal risk.
Revisiting the calculations, if the default checkbox is removed, the success rate must rely on at least 60% of users voluntarily opting in to surpass the previous success rate. Achieving this threshold, however, is highly unrealistic.
Therefore, I consulted the company’s legal team. Unfortunately, the legal team for the European region, where regulations are typically the strictest, was on vacation😓.
As a precaution, I devised Plan B: implementing a one-click registration button.
Ultimately, the legal team advised against using the checkbox approach across all sites. I had anticipated this outcome and prevented further delays to this project.
Final Design
Login in - Flow Map
Login: Web - Hotel/Flight Booking Page - Flow Map
Login: Web - Price Alert Page - Flow Map
Login: Mobile Web - Hotel/Flight Booking Page - Flow Map
Login: Mobile Web - Price Alert Page - Flow Map
Login in - High Fidelity Prototype
Login - Web
Hotel/Flight Booking Page
Default to verification code login with password login as a backup because through a/b testing, we discovered that verification code logins have a much higher success rate.
Login - Web
Price Alert Page
Default to verification code mandatory login, with password login as a backup option.
Login - Mobile Web
Hotel/Flight Booking Page
Default to verification code mandatory login, with password login as a backup option.
Register - Flow Map
Register: Web - Hotel/Flight Booking Page - Flow Map
Register: Mobile Web - Hotel/Flight Booking Page - Flow Map
Register: Web & Mobile Web - Price Alert Page - Flow Map
Register - High Fidelity Prototype
Register - Web & Mobile
Hotel/Flight Booking Page
Develop an plan B to deal with the legal issues
Register - Web & Mobile Web
Price Alert Page
As simple as possible
Taking a look at the full flow
This component has already launched, and you can explore it on Trip.com.
Metrics Recap
We validated the Exposure Success Rate through A/B testing: The proportion of users successfully registering or logging in after the component is displayed.
Web Platform
Total
Login
Registration
+43.9%
13.31%→19.15%
+26.0%
7.68%→9.69%
+47.7%
15.85%→23.4%
Mobile Web Platform
Total
Login
Registration
+109.9%
9.29%→19.5%
+15.6%
8.17%→10.29%
+132.0%
9.65%→22.5%
Exposure Success Rate
Reflection
This project, though small, made me realize the complexity of design solutions. Beyond understanding user, it also required me to explore areas such as product operations, site regulations, information security, and brand marketing.
I place great importance on data-driven design, but as an intern, I had limited access to comprehensive datasets. Often, I had to wait for product managers from different teams to provide the necessary data, which sometimes caused delays. To overcome this, I focused on making the most of the data available to me, quantifying the impact of each design decision as much as possible. This approach allowed me to create more rational and well-grounded designs.
