Jun 2020 – Jul 2021 | Interaction, UI design, Prototyping, Testing | Booking.com
Overview
Streamline the Wishlist experience to facilitate users’ decision-making process
Although Wishlist is well-positioned to help our users to plan their trips, multiple problems have been identified: unable to save / view preferred properties easily, friction in managing the Wishlist and difficult to compare options. These issues were tackled to enable users to better engage with our service, which is aligned with the organisation’s focus on the growth of users’ engagement rate.
The aim of the project was to provide a seamless experience and facilitate the decision-making process. We launched a series of designs and produced a few promising results. More users understand the value of Wishlist (# of Wishlist new users +8.57% and the interaction + 48.4%) and more of them use Wishlist to make a decision. (# of users use Wishlist to book properties + 9.11%)
My role
- Working with the product manager and the data analyst to define users’ problems, priorities, and performance metrics
- Creating wireframe, mock-ups, and prototypes for design stories
- Facilitating design workshops and design critique to collect feedback and ideas
- Conducting user research, including user journey mapping, competitor study, heuristic evaluation, and usability testing to understand the problems
- Collaborating with other vertical product teams to enable Wishlist-related features
- Delivering design specs and style guide for implementation.
- Measuring and validating the design through AB testing and analysing the results for iteration
*The team consisted of 1 product designer (myself), 1 product manager, six developers (2 iOS, 2 Android, and 2 backend), 1 data analyst, and 1 copywriter.
How did we get from problem to solution?
Discover the problems
Friction in shortlisting and comparing saved options
I conducted qualitative research (heuristic evaluation, competitor study, and UX dogfooding) and referenced the data analysis. I mapped the findings to the experience map in order to identify the needs and obtain a holistic view of users’ problems.
Users’ main needs from the Wishlist are shortlisting and the ability to compare properties in the planning and comparing stages when looking for accommodations. However, these were not satisfied according to the research.
Here are the 3 main user problems identified via the experience mapping.
- Unable to save and view preferred properties easily for future planning
The save action was not easily discoverable. Only 20% of the users saved a hotel to the Wishlist. And the entry point of the Wishlist was hidden from users, which resulted in its low usage rate. - Friction in managing the Wishlist
Users could not intuitively find, rename, delete and move lists, and the logic behind the save action varied across platforms, which greatly confused users when planning the trip between the web and the app. - Difficult to compare options
It was difficult for users to compare options and make a choice due to the limited information and ineffective information display inside the Wishlist. Only 1.8% of users booked accommodation from the Wishlist.
Define user segments
Focus on the user segments that could bring impacts
Users who’ve used or intend to use the Wishlist are usually travellers planning ahead. We defined these user segments according to their engagement level with the Wishlist and mapped the problems that stopped users from developing a deeper level of engagement.
Based on the growth potential, Wishlist intent users, users who’ve saved and another segment for users who’ve both saved & viewed options are the targeted groups.
Define the focus and success
Focus on the problems that prevent our targeted users from developing a deeper level of engagement with the Wishlist
We decided to tackle the following:
- Wishlist intent users – Unable to save and view preferred properties easily for future planning
- Users who’ve saved options – Friction in managing the Wishlist
- Users who’ve saved and viewed options – Difficult to compare options
Prioritise mobile app
Prioritise the mobile app as app reservations have constituted the highest portion of Wishlist bookings.
Measure success with metrics
Our aim is to streamline users’ experience from planning to booking stages, which aligns with the company-wide strategy to be the No.1 place for people to plan their upcoming trips.
In order to better measure our impact on the improvement, the team decided on the following metrics;
- User engagement: more customers engage with Wishlist
Improve the Wishlist experience by having more customers come back to view and manage the saved properties. - Business performance: increase Wishlist share of bookings
More users book the saved properties in the long term within a non-inferior threshold of short-term business conversion. - User satisfaction: customers are satisfied with our changes
Delight customers by improving satisfaction based on a quarterly survey.
Identify challenges
Empowered but also limited by the legacy
Multiple teams had worked on different features around or within the Wishlist. Although we could learn from many findings, we identified the impact of the legacy before getting into the ideation stage.
There was UX debt in every Wishlist funnel
We found several conflicts and inconsistencies. The previous teams had built these features to mainly drive conversion and had not considered the holistic experience. Hence, I conducted a UX audit of each platform and reviewed it with the team to prioritise our focus.
Tech refactoring occurred in parallel with planning the product features
Having planned the product features, the developers decided to refactor the legacy code to improve the infrastructure. Although this helped the scalability in the long run, it further complicated the product planning. Any overlap between design stories and tech improvement in the same area would cost extra implementation effort, and was likely to cause conflicts. In order to minimise this, the team had multiple discussions to align the priority and coordinate the projects based on the roadmaps.
Ideate
Brainstorm solutions, think big
With a clear priority and users’ problems in mind, I facilitated a series of workshops with the team to brainstorm solutions. There were many great ideas, which were summarised into one concept.
Wishlist should serve as a track keeper and offer the following:
- Enable users to shortlist their preferences
- Help users to resume from where they left off
- Provide informative content for users to compare options
Conceptualise the ideas
We mapped the ideas to each phase of the journey to ensure that our solutions were relevant to users. I then developed a design vision based on the solutions and respective ideas, and presented the wireframes / flow charts to the design community for feedback. Then, I reviewed the feedback and revised the design accordingly after several rounds of design critiques.
Design solutions
To solve the friction in shortlisting and comparing saved options, the Wishlist serves as a track keeper that
enables users to shortlist their preferences, helps them resume from where they left off and allows them to compare options with informative content.
The aim of these solutions is to streamline the Wishlist experience to facilitate users’ decision-making process.
The following are the highlighted features in the Wishlist design vision.
Guide new users to explore the Wishlist
Provide recommended lists for new users to explore the Wishlist.
Expand Wishlist touch points in the search journey
Enable users to save the properties smoothly and easily access the Wishlist.
Promote the value of the Wishlist
Prompt users to save properties during the search process when their intention is detected.
Provide timely editing to efficiently organise the Wishlist
Allow users to move or create a new list for their saved properties.
Present recently-saved options in a list
Help users to pick up where they left off.
Offer consistent cross-platform Wishlist experience
Make info and interaction consistent between the web / the app to reduce the gap across platforms.
Provide informative content and efficient tools in the list details
Reinforce relevant content and add the kind that helps users to make an easy comparison.
Notify price and availability changes from the Wishlist
Inform users of price and availability updates about the saved properties after they subscribe to them.
Offer a compact view to compare all saved properties
Display the key information of properties side-by-side to help users to make an easy comparison.
Before and After
What has been improved?
The following is a side-by-side comparison of the old and new key screens.
List view
Compared to the old design, users can
- resume their tasks easily by viewing their recently-saved options.
- find the relevant actions (rename, delete and share) more easily by tapping the overflow menu in the list.
Edit upon saving
Compared to the old design, users can
- remain in the context by seeing the underlying content.
- be more flexible to come back and forth between the editing sheet and the page.
Detail page
Compared to the old design, users can
- navigate the page more easily by seeing a clear information hierarchy.
- compare the options more easily using tools like sort and compare.
- be less overwhelmed by the high density of the information.
Validate concepts
Positive feedback, but much to be iterated
I created interactive prototypes and conducted a few unmoderated and moderated tests to determine if our ideas worked before the development.
This enabled us to determine if the concepts were misaligned with users’ expectations in order to influence the design and product direction at an early stage.
The test participants were positive about the planned changes to the Wishlist. The feedback enhanced our confidence to keep building on the validated ideas.
It’s very tidy, and it can actually help me to find the hotels I previously saved quicker.
Love the view because it’s so compact!
However, we also identified a few underlying problems and brought them to the team to re-evaluate the scope.
Although I see the benefit of it, I don’t really think it’s providing much more information, so maybe you should build on it.
I feel like it’s not that easy to understand that bit.
After the testing, we prioritised these ideas based on the users’ feedback. Then I started to break down the design vision to multiple users’ stories.
Implementation
Bring vision to reality
We broke down the design vision into a series of users’ stories. We defined the hypothesis and metrics for each story to determine if it could achieve our expected outcome.
After we reached an agreement with the team, I created detailed specs in Figma and reviewed them with the UX community & the developers for feedback and revision.
At the same time, I updated the Wishlist-specific patterns / key screens as a single source of truth. This enabled everyone to keep up to date regarding every feature and other vertical teams were able to use it when working on the Wishlist-related feature.
Results
Improve the usability of the Wishlist and bring the value to the business
We released a few features and ran the AB testing to observe if these ideas had a positive impact on users.
8 key product features were launched on the app, desktop web and mobile web, and the results were promising.
More users understand the value of Wishlist
The number of new Wishlist users had increased by 8.57%.
Streamline the Wishlist management process
The number of users who had successfully moved a property to a different list had increased by 7.02%.
More users make a decision via Wishlist
The number of users using Wishlist to book a property had increased by 9.11%.
My Wishlist journey ended in July, 2021 and the team switched to different topics due to the strategic change.
Although we had not launched all our planned features, we had learnt a great deal. This experience enriches our next journey and keeps us moving forward to bring value to customers and businesses.
Learning
Strengthen the foundation
The foundation should be strengthened before developing advanced features. Many teams had built features on top of Wishlist and disregarded the fact that its basic functions were broken, which brought more conflict.
Prioritise
Although we found multiple aspects of issues, we managed to narrow those down to three focuses and deprioritise others based on the overarching strategy from the organisation and the impact we could deliver.
Have a vision ahead and keep iterating it
I came up with a high-level design as a head start. It helped me communicate with the stakeholders efficiently and motivated me to think ahead. I was able to iterate it based on the restriction and feedback given by the team and the community.