TL;DR
Increased indirect conversion rate by 5.32% through a data-driven redesign of hotel video covers, optimizing for user viewing behavior and sound preferences.
+5.32%
Conversion
Indirect rate
4.8%
Video CTR
vs 2.0% images
8.4%
Sound-On CTR
vs 1.1% muted
400M+
Active Users
Annual platform
1My Role & Context
My Responsibilities
Wireframing, prototyping, user testing, data analysis, and A/B test design
Team
Me (Product Designer), PM, 5 Dev Engineers, Design Manager
Tools
Figma, Sketch, Maze
Platform
Ctrip App · iOS & Android
🏢
Project Context: Well Group (design consultancy based in Shenzhen) was contracted by Ctrip (international OTA based in Shanghai) to improve the hotel browsing experience. I worked as the lead designer on this engagement.
2Understanding Ctrip
Ctrip is one of the world's largest online travel agencies, enabling seamless travel experiences for global users. The platform integrates technology with innovative services, empowering travelers to explore the world with confidence.
Annual Active Users
400 million+
Partnered Hotels
1.5 million+ worldwide
Global Presence
200+ countries and regions
Monthly Reviews
2 million+ verified
3Problems Identified
"To improve user experience in browsing image/video content"
Through UX audit and user testing, I identified multiple issues with the current video cover implementation:
- Content Issues: Video content not properly cropped—black edges appeared on many hotel listings
- Sound/Image Problems: No sound on detail page; video playback area too small for comfortable viewing
- Operation Friction: Videos too long with no pause control; 5G environment cues displayed unreasonably
- Technical Bugs: Progress bar not adapted to hotel overview card when sliding; video doesn't blend with reflection below
4Data Analysis
I conducted a deep dive into video performance metrics and user behavior data:
Video Source Analysis
70% of source videos are 16:9 ratio
Need optimized cropping for different screen sizes
Image Ratio Distribution
47.18% are 3:2, 34.98% are 4:3
Multiple formats require adaptive display logic
Engagement Metrics
Video CTR: 4.8% vs Image CTR: 2.0%
Videos significantly outperform static images
Sound Preference
Sound-on CTR: 8.4% vs Muted CTR: 1.1%
Users strongly prefer audio-enabled videos
💡
Key insight: The data showed users want immersive video experiences with sound—contrary to the assumption that muted autoplay was better for UX. This counter-intuitive finding drove our solution.
Design Decision
Video covers as social proof, not decoration
Data showed static images had declining click-through rates, but simply adding video wasn't enough — users needed to see real guest experiences within 3 seconds. I designed video covers to auto-play the most engaging 3-second clip (selected by AI) with a progress indicator, turning passive browsing into active engagement. A/B testing confirmed a 5.32% indirect conversion lift.
5Not every hotel deserves a video
The data said video wins. But Ctrip lists 1.5 million hotels — from a ¥99 Home Inn to a ¥9,000 Aman. Treating them all to the same sound-on autoplay would be using one tool for three completely different buying minds. So the real question wasn't whether to push video. It was who earns it.
Album · 24
Release → opens photo album
Hanting Hotel
Economy
★4.3 · Shanghai · Free cancellation
Queen Room¥189
Twin Room¥209
Image-first. Thumbnail wall, fast swipe, video tucked behind a tap.
Video weight~10%
Guests book in seconds on price — they want to confirm "clean enough," not be sold a mood. Force a video here and you burn bandwidth to interrupt a price comparison.
Release → plays video
Ji Hotel
Upscale
★4.6 · Shanghai Lujiazui
Mixed. Hero photo + one sharp 3-s clip as a tiebreaker.
Video weight~40%
They're comparing 2–3 options and weighing value. A short clip earns its place here — but the photo still does the heavy lifting.
Sound on
Release → hotel highlights
Island Shangri-La
5-Star
★4.9 · Hong Kong · Suites from ¥3,800
Video-led. Full-bleed sound-on cover, imagery plays support.
Video weight~85%
At this price you're not selling a bed, you're selling a feeling. Only motion and sound carry the light, space and atmosphere that justify the splurge.
🎯
This is the part a pure data read would miss. The 4.8% video CTR is a platform average — almost certainly pulled up by the midscale and luxury ends. Splitting by tier stops me over-investing in video where it doesn't pay (economy) and under-investing where it's the whole ballgame (luxury). Same data, sharper spend.
Hotel imagery via Booking.com — shown here as a strategy illustration.
6Design Showcase
Complete analysis and solution design for the hotel cover upgrade:
Overview & Results — 5.32% indirect conversion rate improvement via A/B testing
My Role — wireframing, prototyping, user testing, and A/B experiment design
Problem categorization — Content, Sound/Image, and Operation issues identified
User demand analysis — video/image viewing patterns and crop logic study
7Solutions Delivered
These are the four things I actually shipped — most of the heavy lifting lands on the midscale and luxury tiers above, where video earns its place.
Adaptive Cropping Logic
Smart cropping based on screen size: 16:9 ratio for large screens (60% of users), 2:1 ratio for small screens (40%). Cropping direction prioritizes width, using center-of-gravity detection to preserve key content.
Sound Enhancement
Default sound-on with easy user control. Based on data showing 8.4% CTR with sound vs 1.1% muted, we reversed the previous silent-first approach while respecting user preferences.
Progress Optimization
Redesigned progress bar that adapts to card sliding behavior. Progress indicator now properly syncs with video playback and responds to user swipe gestures.
Content Guidelines
Established new standards for hotel video uploads: recommended ratios, length limits, quality requirements, and content guidelines to ensure consistent user experience.
💭 What I Learned
This project reinforced that assumptions kill design. Everyone "knew" that muted autoplay was the industry standard—but data showed our users were different. Working with a platform serving 400M+ users taught me to let data lead while staying curious about outliers. The 5.32% conversion lift came from a series of small, data-validated improvements—not one big redesign. Sometimes the most impactful design work is fixing what's broken, not inventing what's new.
