Trip.com UX Internship

Boosting Trip.com app downloads & ticket bookings through localization

In 2024 fall, I had the opportunity to intern as UX Designer at Trip.com & TrainPal Train Ticketing team in Shanghai.

Optimized web train ticketing experience with page structure refinement UI design, increased H5-to-app conversions by 23.6% and boosted new user ticket order by 3.3% through mobile UI improvements.

As 2035 becomes the near future, future of mobility is already introduced with auto driving technologies, bringing conveniences like never before.

RéJour brings innovative vision to shared mobility services where adventure seamlessly blends with comfort and simplicity.

In 2024 fall, I had the opportunity to intern as UX Designer at Trip.com & TrainPal Train Ticketing team in Shanghai.

Role

UI/UX Designer

User Researcher

Content Writer

UI/UX Designer

User Researcher

Content Writer

Timeline

Sep - Dec 2024

Team

EU Train Ticketing Team

Tools

Sketch, Adobe Suites

Goal & Strategy

As TrainPal expanded beyond the UK and Trip.com grew globally, the team aimed to attract new users from other countries to book train tickets on the platform while improving content design localization for the EU market.

Scope & Deliverables

Designed strategies to drive app downloads by integrating an full-page modal and half-screen banner, coupon designs, building up incentives for app conversions.

Impact

After launching design, we achieved:
23.6% increase in H5-to-app conversions
3.1% boost in new user ticket conversions in 7 days for repeated bookings.

Background

Customers who download the app are 3x more likely to repurchase within 30 days.

From data given by PM in growth, we discovered in spring 2024, there's a 15% decrease in app conversion across all global locales.

From data given by PM in growth, we discovered in spring 2024, there's a 15% decrease in app conversion across all global locales.

Framing Questions

HMW refine incentive strategies to make app downloads more appealing and frictionless for users transitioning from H5?

Understanding the Users

To investigate the drop in conversion rates despite no design changes, I analyzed cross-platform incentive points and benefits offered to users.

Title: Emphasize on low price & discount

Body: Introduction on ticket availability feature & low price

15+ OTA Competitive Analysis

After conducting a cross-platform product analysis, I examined OTA competitor strategies for Web-to-H5 downloads and identified diverse download modules.

Visual Hierarchy

55% image proportion, displaying the app and title-related interface

Visual Hierarchy

55% image proportion, displaying the app and title-related interface

Brand Consistency

Display brand logo & adopt brand color

Brand Consistency

Display brand logo & adopt brand color

CTA Optimization

Reinforce placement across multiple touch points

CTA Optimization

Reinforce placement across multiple touch points

Visual Hierarchy

60% module proportion, displaying title and brand rating

Visual Hierarchy

60% module proportion, displaying title and brand rating

Brand Consistency

No logo redundancy – adopting brand color scheme instead

Brand Consistency

No logo redundancy – adopting brand color scheme instead

CTA Optimization

Emphasized button to download app

CTA Optimization

Emphasized button to download app

Content Writing Strategy

Differentiate user needs between the H5 landing page and the H5 A-B station page, tailoring wording to align with brand voice and tone.

Task Flow - Intersect download app module in H5 before making ticket purchases

Design Iteration Strategy

01 Composition Layout

Unclear wireframe visualization with excessive icons for visual clutter

02 Illustration Iterations

Clear branding with logo, simplified train iconography, hand-held phone symbolizing efficiency, and a dashed circle representing seamless global connectivity.

Lack of contrast & clarity in phone UI, no contextual information and weak color hierarchy

03 Establish Brand Trust with Ratings

Ratings are unclear, lack universality, and fail to convey authentic user feedback persuasively

Final Outcomes

H5 to App Download Modules

Achievement after design launched

Additional Works

Other designs I did at Trip.com coming soon…

My Takeaways

Investigate underlying logic pro-actively

Approach PRD documents critically, uncovering the rationale behind requests, learning from past design failures, and iterating with real user needs in mind.

Aligning Design Strategy with Business Goals

Conduct competitive analysis while ensuring each iteration aligns with business goals through brand consistency, visual hierarchy, interaction models, and content design.

Voice Your Ideas Clearly

Share insights confidently, contribute research-backed ideas, and engage with cross-functional teams to foster stronger collaboration and innovation.