Optimizing OTA Hotel Imagery with AI and UX Research
Ctrip (Hotel Business Unit) · 2018 · Design Leader
Overview
Hotel images are a customer’s first impression and a key reference when evaluating hotel options. Research shows that, for OTA (Online Travel Agency) customers, image quality is one of the factors influencing booking decisions. As both Design Lead and Project Manager, I audited the in-app hotel imagery to identify quality issues and proposed professional solutions. Collaborating with the AI and image aesthetics teams, we aimed to enhance visual quality and train an AI model to automatically select better images to ultimately driving higher booking conversion rates.
My Role
Platforms
Product
Design Leader
Project Manager
Ctrip Hotel BU
(携程酒店事業部)
Mobile Application
Timeline
2018
Problems
Key User Feedback on Hotel Images:
Users reported that many hotel images were blurry or misleading, making it difficult to assess the property accurately and undermining their booking decisions.
Project Initiation
The UED (User Experience Design) team launched the “Enhancing Hotel Image Experience” initiative, aiming to improve image clarity, efficiency, and aesthetics to deliver a better user experience.
My responsibilities as the Design Leader:
-
Leadership & Coordination: Served as the UED lead for hotel image-related projects, liaising across multiple departments.
-
Strategic Planning: Defined and broke down project objectives into actionable sub-projects, coordinating with hotel operations, product, algorithm, and front-/back-end development teams.
-
Research & Process Design: Conducted competitive analysis to assess strengths and weaknesses in hotel imagery, producing reports and designing an end-to-end, closed-loop process for image experience improvement.
-
Execution & Delivery: Developed rollout plans for the image selection project, aligning technical and product teams, monitoring development progress, and ensuring timely delivery across all stages.
Mapping Hotel Image Usage Scenarios
I began by mapping all touchpoints where hotel images appear in the booking journey. Hotel imagery is present across almost every stage: including search results pages, hotel list pages, hotel detail pages, and review pages. Images occupy a significant share of screen real estate: multi-image sliders in the header take up 45%, room type overlays 28%, and the “View Official Images” click-through accounts for 43%.
User Click Data Analysis
(Sensitive data are masked)
I collaborated with the back-end team to collect weekly average image click data across different pages, including dedicated image view pages. By analyzing click patterns, I inferred user behaviors and identified potential issues and unmet needs.
Detail Page: Header Images Clicks
-
Header Image Carousel: 12,000 clicks (16% of total page clicks)
-
Image Page Entry: 12,000 clicks (4.3% of total page clicks)
Insight: The higher engagement with the carousel over the image gallery entry suggests that users have a strong intent to view images but prefer the shortest viewing path — swiping through the header carousel rather than taking an extra step into the full gallery.
Room Type Images
-
Image Page Entry: 12,000 clicks (4.3% of total page clicks)
-
Sub-Room Overlay Images: 12,000 clicks (10.4% of total page clicks)
Insight: Similarly, users prefer viewing images directly within the current context rather than navigating away to a separate gallery page.
Hotel Image List Page
-
Official Images: 12,000 clicks (0.65% of total page clicks)
-
User-Generated Images: 12,000 clicks (5.2% of total page clicks)
Image Filter Tags Click Rates
-
Room: 12,000 clicks (5.8%)
-
Exterior: 12,000 clicks (2.0%)
-
Public Areas: 12,000 clicks (1.7%)
-
Dining: 12,000 clicks (0.89%)
-
Others: 12,000 clicks (0.78%)
-
All Official Images: 12,000 clicks (0.47%)
-
Expanded Room Images: 12,000 clicks (0.45%)
Insight: The highest click rates are for “Room” and “Exterior” filters, suggesting these should be prioritized in quick filter options.
Click to view larger image: 12,000 clicks (35.7%)
Insight:
-
Video and image content cannot be swiped interchangeably, causing an inconsistent and less smooth experience.
-
Excessive images push high-quality ones to later positions, reducing their visibility.
Competitive Analysis
To benchmark and inform the design, I analyzed leading domestic hotel booking apps including Booking.com, Fliggy, Qunar, Meituan, Dianping, and Tongcheng. This comparative study focused on how these platforms present hotel images, manage image quality, and facilitate user interaction with visuals. The insights gained helped identify industry best practices and highlight opportunities for differentiation in our app’s hotel image experience.
Detail Page Header Images
-
Display 4 square thumbnails with horizontal scroll.
-
Pros:
-
Square aspect ratio preserves full image content.
-
All images can be previewed on the detail page.
-
-
Cons:
-
Horizontal scrolling can be costly in interaction effort.
-
Limited total number of images shown.
-
Small thumbnails reduce visibility.
-
Photo Gallery Page
-
Experimented with different image sizes and designs
-
Pros:
-
Black background offers a premium visual experience.
-
Immersive pure-image view without categories or filters.
-
-
Cons:
-
Lack of categorization and sorting increases browsing cost.
-
-
Insight: Adding image categories and changing filter interaction to a horizontal scroll bar saves top space and exposes more images.
Room Type Images
-
4:3 aspect ratio for room images offers the best cropping and viewing experience.
View Large Image Page
-
Quick category filters provided at the bottom allow fast switching between image types during large image browsing.
User Research Report Analysis
High-Star vs. Low-Star Hotel Users
In this context, high-star users refer to customers who book premium hotels typically rated 4 stars and above, expecting high service and quality standards. Low-star users are those booking budget or economy hotels, generally rated below 4 stars, where cost sensitivity and practical concerns are higher.
Image Source: Ctrip Hotel User Research Department
Key Findings
High-star users show slightly less focus on hotel images compared to low-star users.
High-Star Hotels:
-
Benefit from price and star rating guarantees.
-
Feature high-quality images often taken by professional photographers, typically sourced from standardized image libraries.
Low-Star Hotels:
-
Frequently have discrepancies between actual conditions and hotel descriptions, increasing users’ reliance on images to verify reality.
-
Exhibit inconsistent image quality due to variable merchant uploads, negatively affecting booking volumes.
OKR Framework for Addressing Hotel Image Challenges
After analyzing data, technology, current status, competitors, and user flows, I identified three main problem areas in hotel imagery: image quality, image usage, and backend upload experience. I then created an OKR (Objectives and Key Results) framework to clearly define goals, prioritize tasks, and schedule deliverables. This structured approach helped align cross-functional teams and ensured timely progress throughout the project lifecycle.
OKR (Objectives and Key Results) framework
O = Objective: Improve the quality of hotel image
O' = Sub-objective: image quality, image usage, and backend upload experience
Overall Image Experience Improvements
Basic Image Display Improvements
Increased image width on list pages from 200px to 220px.
Adding Subcategories to “All Images” Tab
-
Adjusted image aspect ratios in the app to minimize automatic cropping and preserve original proportions without sacrificing content visibility.
-
Increased image width on list pages from 200px to 220px.
-
Raised room-type overlay header height from 340px to 428px, maintaining space for detailed room information below.
Gallery Page Visual Optimization
-
Collaborated with visual designers to enhance the gallery’s overall aesthetic.
-
Strengthened subcategory styling for clearer differentiation between image types.
-
Changed background to pure white for improved image clarity.
-
Optimized spacing between images to better separate and distinguish them.
Resolution Enhancement
By scraping data and comparing image resolutions against competitors, we found that some hotel images had lower resolution. Collaborating with front-end developers, we improved the image display resolution across the app without compromising page load speed or responsiveness. Benchmarking against competitors and validating internally within the design team, the visual improvement was clearly noticeable on the App.
Raised room-type overlay header height from 340px to 428px, maintaining space for detailed room information below.
Other Design Strategies
After auditing the hotel image experience, I addressed and resolved multiple other interaction flaws that required improvements, all of which have been deployed:
Collaboration with Hotel Image AI Algorithm Team
To quickly enhance the quality of hotel images, I partnered with the AI algorithm team to leverage machine learning for more efficient selection of high-quality hotel photos. Together, we developed and trained four image optimization algorithms to address existing image issues.
My Responsibilities in providing the aesthetic standards and curated image samples for machine training :
-
Provided aesthetic standards and curated image samples for machine training.
-
Led the UED team in validating and accepting the algorithm outputs.
-
Coordinated with the algorithm team to review results and discuss further optimization.
Analyzes image sharpness and focus to quantify visual clarity, helping filter out blurry or low-quality photos.
Evaluates image quality based on color harmony, composition, and content distribution to score overall visual appeal.
Enhances images following standardized criteria to improve visual quality while preserving the original authenticity and aesthetic feel.
Calculates the image’s focal point and crops based on this focus rather than the default center, ensuring important content remains visible
Image Algorithms
Impacts & Outcomes
After one week of A/B testing the new design, I compared click data from domestic and overseas users and collected qualitative feedback from users around me. Based on these insights, I iteratively optimized the visual and interaction design to improve the solution.
1. Aesthetic Scoring Algorithm boosted conversion rates: ↑+0.69% for domestic hotel bookings, ↑+3.31% for overseas hotel bookings.
2. Image Beautification: Processed 21 million room-type images, covering 3.37 million room types across 950,000 hotels.
3. User Engagement: Increased overall hotel image click-through rate by ↑35–38%
4. Scalable Application: Applied the new algorithms and UX optimizations across all scenarios, including room image sorting, hotel cover photo selection, hotel videos, and room image enhancement.
Conclusion
Design Leadership & Project Management
As both the Design Lead and Project Manager, I guided the project from initial research and problem definition to design execution, rollout planning, and performance tracking. I aligned multiple stakeholders across UED, product, hotel operations, and engineering, ensuring smooth coordination, on-time delivery, and a consistent design vision throughout the process.
AI Collaboration & Innovation
Collaborating closely with the AI algorithm team, I defined aesthetic criteria, provided curated image datasets for model training, and led the validation process. By combining UX-driven insights with AI capabilities, we built algorithms for clarity scoring, aesthetic evaluation, image enhancement, and content-aware cropping, ultimately improving image quality, user trust, and booking conversions.