SEARCH & DISCOVERY
Product Design
Agoda accommodations teams noticed the majority of their users who are searching and discovering properties where not optimally gaining an experience that let them compare properties to make a choice easily that met their hospitality requirements. They wanted to easily compare properties during the search and discovery page without ping pong between property detail pages which could help them save time and match them with their accommodation requirements faster and more efficiently.
ROLE
Drove the strategy in driving the UX team to align with business goals
Partnered with tech to understand technical constraints & cost to understand ROI return.
Worked with research team to understand pain points & ping pong flow while users made a booking
- DESIGNERS: 2 Sr UX Designers, 1 UI Designer
- UX RESEARCH: UX Researcher
- PRODUCT MANAGER: 2 Product Managers
- DEVELOPERS: 3 iOS, 2 Android
UX CHALLENGES & BUSINESS GOALS
Product Design
Agoda accommodations teams noticed the majority of their users who are searching and discovering properties where not optimally gaining an experience that let them compare properties to make a choice easily that met their hospitality requirements. They wanted to easily compare properties during the search and discovery page without ping pong between property detail pages which could help them save time and match them with their accommodation requirements faster and more efficiently.
UX CHALLENGES
Based on our North Star design for the property cards on our search results page and from the design used by several competitors, these solutions will move the property image from the left side of the property card to be on top for all users that land on the property results page with the aim of give a better view of the property as the image will be full width & not cropped & entice the user to select the property & continue to the property page. We expect to see an increase in property page landings as users will want to investigate the property further. We’ll know this from seeing an increase in page landings and possible property card taps.
UX GOALS
If we are to increase interaction on the search results page we have to ensure showing photos with optimized ordering to help users learn more about the property & hence have more confident in staying the property.
Acceptance criteria
If we are to increase interaction on the search results page we have to ensure showing photos with optimized ordering to help users learn more about the property & hence have more confident in staying the property.
BUSINESS GOALS
Acceptance criteria
Show one highest quality score property photo in each category in the order of these categories
Rationale
Simpler UX & reduce ping pong booking effort
Tracking
Image thumbnails hover & scroll engagement
Top 10 single room photo categories of photos being viewed & experiments A/B
Driving users from search & to property to booking form (A VS B PV diff & %)
Increased conversions
PAIN POINT OF CURRENT CARD
THINGS WE NEED TO FIX?
Multiple rounds of design iteration, testing with users, presenting to stakeholders allowed us to iterate on each component and establish the solution that was scalable, highly converting & user friendly.
SCALEABILITY
Our current cards did not scale well for other business products or offering we offered at Agoda. We had recently expanded into offering non hotel accommodations like homes, townhomes etc and our card structure did not scale to accommodate the additional content.
PING PONG
The current card structure lacked showing enough content to help users make their decision easier when choosing their accommodation. Users often would ping pong between the results page and property page which often caused users to be frustrated and bounce all together from Agoda.
Stretched Image
With the expansion of product teams adding additional content to our current card we would see the main property image scale and stretch and only show a sliver of the image which drove no value for the user to make a decision on there booking.
Content Mangement
With the additional content on the card the current layout made the content fight for attention and hierarchy. The card created visual density & lacked a easy readability for users to understand the content & compare between properties.
WHAT ARE SOLVING FOR?
RESEARCH PLAN
Agoda accommodations teams noticed the majority of their users who are searching and discovering properties where not optimally gaining an experience that let them compare properties to make a choice easily that met their hospitality requirements. They wanted to easily compare properties during the search and discovery page without ping pong between property detail pages which could help them save time and match them with their accommodation requirements faster and more efficiently.
RESEARCH OBJECTIVE
We partnered with the research team to understand how we can carry our winning experiments from our desktop site to our native app. We wanted to understand user behavior between both platforms during the search & discovery phase. We needed data to validate our design changes to ensure the cost associated with the build would deliver a ROI.
- Desktop vs App experience for users
- Qualitative and quantitative research
- Looking for prior experiments
- Competitive Analysis
- Prioritize our roadmap based key research
RESEARCH PLAN
We partnered with the research team to understand how we can carry our winning experiments from our desktop site to our native app. We wanted to understand user behavior between both platforms during the search & discovery phase. We needed data to validate our design changes to ensure the cost associated with the build would deliver a ROI.
- Desktop vs App experience for users
- Qualitative and quantitative research
- Looking for prior experiments
- Competitive Analysis
- Prioritize our roadmap based key research
KEY FINDINGS
Acceptance criteria
Show one highest quality score property photo in each category in the order of these categories
Rationale
Simpler UX & reduce ping pong booking effort
Tracking
Image thumbnails hover & scroll engagement
Top 10 single room photo categories of photos being viewed & experiments A/B
Driving users from search & to property to booking form (A VS B PV diff & %)
Increased conversions
INDUSTRY BENCHMARKING
HOTEL INDUSTRY
Agoda accommodations teams noticed the majority of their users who are searching and discovering properties where not optimally gaining an experience that let them compare properties to make a choice easily that met their hospitality requirements. They wanted to easily compare properties during the search and discovery page without ping pong between property detail pages which could help them save time and match them with their accommodation requirements faster and more efficiently.
EXPEDIA
We looked at our competitors like Expedia to discover how there card heights were shorter and they displayed a horizontal image to really sell the hero image of the property.
MAKE MY TRIP
Make my trip based out of India also had a horizontal image with a carousel to display their image gallery. It helped users make their decisions earlier in the funnel.
AIRBNB
Airnbnb followed Make my trip card style which included a horizontal image with carousel component to help users make their decision earlier in the funnel as well.
HOTEL TONIGHT
Hotel tonight displayed only one large image but the hero image had a bigger impact on users to really showcase the property primary selling point.
USER BEHAVIOR
APP NATIVE USAGE
We looked at how services like Facebook and Instagram have set the behavior in the way user consumes travel content visually. Agoda accommodations teams noticed the majority of their users who are searching and discovering properties where not optimally gaining an experience that let them compare properties to make a choice easily that met their hospitality requirements. They wanted to easily compare properties during the search and discovery page without ping pong between property detail pages which could help them save time and match them with their accommodation requirements faster and more efficiently.
UBER EATS
We looked at competitors outside the hotels space and looked at Uber Eats. Uber eats also has tons of content and the food shots were all large and enticing to users to click.
Insta stories on instagram allowed users to quickly interact with stories thru a a carousel without going to a 2ndary page or having friction as they scroll the page.
GOOGLE MAPS
Google maps also has a mosaic slider to help users get quick highlights of the property without scrolling or clicking to a image gallery.
NETFLIX
Netflix is the star of carousels and they really allows users to quickly engage with different categories without switching pages or disrupting the flow of scrolling.
RESEARCH & BENCHMARKING
APP NATIVE USAGE
We looked at how services like Facebook and Instagram have set the behavior in the way user consumes travel content visually. Agoda accommodations teams noticed the majority of their users who are searching and discovering properties where not optimally gaining an experience that let them compare properties to make a choice easily that met their hospitality requirements. They wanted to easily compare properties during the search and discovery page without ping pong between property detail pages which could help them save time and match them with their accommodation requirements faster and more efficiently.
KEY INSIGHTS
The key insight from the research team was they understood bookers we’re frustrated with the ping pong between the search page and property page to learn more about the property if it met their accommodation needs. The current process of searching the right accommodation was slow, frustrating and lacked transparency and a native experience to the app.
KEY FINDINGS
- Desktop vs App experience for users
- Qualitative and quantitative research
- Looking for prior experiments
- Competitive Analysis
- Prioritize our roadmap based key research
QUANTITATIVE RESEARCH
Based on research insights it was important for us to present to our stakeholders prior data that validated the booker needs and how it would correlate into experiments moving forward.
VALIDATE PRIMARY NEEDS
Acceptance criteria
Does content consistency between app & web matter?
Rationale
Was the primary reason for the ping pong on app due due to high bounce rate & multiple visits to the app.
Tracking
If we created a better UX experience would users prefer to book on app vs desktop?
VALIDATE PROPOSITON
Based on key learnings and insights it was very crucial to create a experience that didn’t create more friction, confusion but instead helped our users make an easier decision with transparency on what property they were booking and ensuring they had enough context of the property to make a decision they felt was value for their money.
Easy of use:
We heard from our guest that the ping pong effect when choosing between properties was frustrating to find relevant content and required to much time. We needed to design a solution that provided relevant content to make the booking decision easier.
Trust & Consistency:
We learned from our insights that we needed to provide hotel highlights & content in a efficient way which users could absorb and make quick decisions on their bookings. The solutions needed to display content consistent visually and also drive trust.
Scalability for the business:
Due to the scale of our product org and investments in new teams like Agoda Homes, Pricing, Reviews and other programs it was crucial to create a framework that worked for all teams vs just a single product.
EXPLORATIONS
Gallery & Content
Multiple rounds of design iteration, testing with users, presenting to stakeholders allowed us to iterate on each component and establish the solution that was scalable, highly converting & user friendly.Multiple rounds of design iteration, testing with users, presenting to stakeholders allowed us to iterate on each component and establish the solution that was scalable, highly converting & user friendly.Multiple rounds of design iteration, testing with users, presenting to stakeholders allowed us to iterate on each component and establish the solution that was scalable, highly converting & user friendly.
NEW CARD DESIGN
CARD & PHOTO GALLERY
WHAT WE SOLVED
Drove the strategy in driving the UX team to align with business goals
Partnered with tech to understand technical constraints & cost to understand ROI return.
Worked with research team to understand pain points & ping pong flow while users made a booking
Drove the strategy in driving the UX team to align with business goals
Partnered with tech to understand technical constraints & cost to understand ROI return.
Worked with research team to understand pain points & ping pong flow while users made a booking
KEY FINDINGS
- Desktop vs App experience for users
- Qualitative and quantitative research
- Looking for prior experiments
- Competitive Analysis
- Prioritize our roadmap based key research
DESIGNS
APP REDESIGN CARDS
Below are the final card solutions that team successfully implemented and contributed to higher conversions and reduce ping pong flow for users.Below are the final card solutions that team successfully implemented and contributed to higher conversions and reduce ping pong flow for users.Below are the final card solutions that team successfully implemented and contributed to higher conversions and reduce ping pong flow for users.Below are the final card solutions that team successfully implemented and contributed to higher conversions and reduce ping pong flow for users.
OLD CARD
Based on our North Star design for the property cards on our search results page and from the design used by several competitors, these solutions will move the property image from the left side of the property card to be on top for all users that land on the
NEW CARD DESIGN
Based on our North Star design for the property cards on our search results page and from the design used by several competitors, these solutions will move the property image from the left side of the property card to be on top for all users that land on the
SCALABLE SOLUTIONS
ACCOMMODATE BUSINESSES
The new layout was scalable to other products at Agoda like Agoda Homes, China Market, Ground Transportation. Below are the examples of how we applied the same solution to other products. The new layout was scalable to other products at Agoda like Agoda Homes, China Market, Ground Transportation. Below are the examples of how we applied the same solution to other products.
AGODA HOMES
As accommodations business grew from just hotels to homes, our platform needed to accommodate the new content & information to users. We needed a card that could highlight homes & the space to users to help them differentiate between hotels & homes.
FAMILY BOOKINGS
Agoda has many different traveler types and one of them is family travelers. Often family travelers are confused and not sure if the space will accommodate their kids. We need the card to display for contented to drive content that could highlight family rooms for users.
HOTEL PRICE INCLUDES
Often users are confused and unaware of the price includes certain benefits & if the price is inclusive with whats displayed. Our Pm’s wanted a way to message price includes on certain properties where benefits were important to specific booker types and regions.
CHINA MARKET
With Agoda being a global company with bookers around the world we needed to ensure that new card style could accommodate both english and foreign languages. One of most important regions was the China market and we need to create a card that could accommodate regional content.
MIDDLE EAST MARKET
With Agoda being a global company with bookers around the world we needed to ensure that new card style could accommodate both english and middle east languages that read left to right. Our new card style was able to be flexible for both markets and worked well for the middle east market.
VIETNAM
With Agoda being a global company with bookers around the world we needed to ensure that new card style could accommodate different currency that are both short and long in total price. Vietnam Dong was consider into our design to ensure that pricing could be displayed effectively and transparent to users.
RESULTS
FINAL SOLUTION & RESULTS
We successfully launched the new experience to the guest in February of 2020. With a successful A/B experiment we were able to see a clear correlation of users engaging with the new experience & content which also lead to user trust, validation and higher conversions and reduce ping pong effect.
ENGAGEMENT
Based on the new design we saw a 58% increase in engagement with the carousel. Those who engaged with the carousel also converted 19% higher when landing on the property page to payment page.
- 58% engagement with carousel
- 19% increase in coversion
CONVERSION
Based on the new design we saw a 58% increase in engagement with the carousel. Those who engaged with the carousel also converted 19% higher when landing on the property page to payment page.
- 58% engagement with carousel
- 19% increase in coversion
SCALABILTY
Our new designs were able to accommodate for all business verticals and expansion into future markets. We were able to accommodate homes, local regional markets, different languages.
- Supports Homes & Villas
- Language & regional support
CONTENT GENERATION
The carousel allowed to increase experimentation for product managers and also provided a better framework for UX designers to showcase the new content we were acquiring from user generated content.