Challenge Statement
In 2019, Culture Trip had started offering bookable accommodation on their website and app. In 2020, they wanted to brave the world of selling experiences too. This felt like a fitting move considering the quirky nature of the company. They had plenty of inventory ready to sell to the user, but no way of showing it on the product. Which posed the design question...
How might we showcase all necessary information about an experience on our app in a way which entices users to easily book with us? This project has a particular focus on the item page of an experience itself.
Benchmarking
Before jumping straight into design, I begun investigating how others were tackling this relatively new market. I'd carried out a competitor analysis on a range of apps, and jotted down the fields they had exposed on their experience pages in order to get a better understanding of the structure we could offer.
Benchmarking on experience item pages were carried out on Get Your Guide, Trip Advisor, Airbnb, Klook and With Locals. Common fields and whether they had sticky availability components were noted.
Listing Common Features
After the competitor audit was complete, I'd listed the common fields prevalent in all competitors, as well as the quirky, 'nice touch' fields we could also consider later down the line after MVP.
Ordering the Page: Card Sorting
Benchmarking helped me to decipher the sections I believed should be on the experience page, however I still felt unclear on the order these sections should be in. Therefore, my colleague and I set up a paper card sorting exercise to determine a correct order. We cut up different sections and asked eight users to organise the page in the way that makes most sense to them. The results were then analysed to determine where each section lived on the page.
Chopped up pages which users restructured as they pleased in an order which suited them
Common Themes
Despite the order of elements being slightly different across all participants, there were some emerging themes to take away:
• Roll some headings into one to avoid a lengthy page
• Reviews are important, but don't have to be completely exposed
• Practical elements like price and availability should live together and could be sticky
Understanding User Journeys
As well as designing a functioning experience item page, it was important to look at exactly how users could discover these. Myself and the product manager mapped out all the possible routes to an experience for web and app, and highlighted opportunity areas we could then work on later down the line to create a seamless end-to-end user journey.
These journeys changed depending on the user mindset – are they looking to be inspired? Have they booked a hotel? Do they have a destination in mind?
A journey mapping session between the product manager and I on the possible routes a user could take to end up on an experience item page
Example of user journeys which changed depending on mindset and intention
Designing the Experience Item Page
We already had an item page template live on the app for places to stay. I wanted the product to have a consistent feel, therefore a lot of the UI such as iconography, typography, sizing and spacing remained the same as places to stay. However, the availability picker (selecting dates, people and a time to do the experience) required closer design thinking, as this was a brand new component that had the ability to become complex.
Visually aligning our hotel item pages and our new experience item pages
Designing the Availability Picker
Due to the way our data was returned, a user had to input a date and number of people going in order to generate available times to select for the experience. This meant the order we asked for their availability was already predetermined. All three pieces of data needed to be input before the user could proceed to book, and edge cases – such as what happened if a user exited the process half way through – needed to be carefully considered.
Step 1: User selects date which opens up date picker
Step 2: User selects people going on the experience
Step 3: User selects time to do experience (this data is returned after the previous two selections have been made)
Step 4: User is auto scrolled to whole component for overview, and 'Book Now' CTA is enabled
The Sticky Bar
Benchmarking had also shown a sticky bar at the bottom of the screen was a popular way of keeping the booking CTA in sight. I had designed this in mind with changing copy on the call to action buttons according to which stage of the availability process the user was at.
1. Start of process: User has not engaged with availability picker at all
2. When a user has input dates, the call to action changes to 'Who's Going?'
3. After inputting dates and people, call to action reads 'Select Time'
4. When user has finished the process
Development
After running the designs by the iOS & Android developers, we took a two phased approach to building this due to its complexity. Phase one is currently underway (July 2020), and phase two is soon to follow!
Phase one (MVP): A 'step-in-step-out' approach. This means that rather than taking the user through the process with the overlay continuously up, once a user makes a selection and moves onto the next step, it closes back down again. I had reservations with this, so did some rapid user testing online. Thankfully it had no issues 🎉
Phase two: The ideal design solution shown above ☝️
A quick prototype put together in Figma to demonstrate the phase one 'step-in-step-out' flow
Next Steps & Involvement
Next steps: To launch the phase two build and analyse any data around drop offs and clicks on the page to see where we can improve the process.
Involvement: Main design lead. Close collaboration with app developers, fellow product design team and product manager.
