Price Transparency (2 sprints)

During Q2 2021, I undertook a project focusing on price transparency. As the product designer, my role involved exploring and defining the problem through research, ideating various solutions, and designing the UX and UI specifications.

Discover the Problem

The project originated from a real issue raised by users – they complained about the price increases during the checkout process: It’s a business decision to make our offers appear cheaper at first by displaying "Base per night" rates on the search results page without including taxes. However, this approach often led to unpleasant experiences for our users, as the full price was only revealed during the checkout process.

To better understand the problem, I delved into real user feedback from various sources, such as app reviews and previous research. Additionally, I explored competitor pricing strategies, where most of them indicated whether the price includes or excludes taxes and fees on the search results page. Considering pricing as a key differentiator for Agoda, striking the right balance between transparency and competitive pricing became a significant challenge for this project.

During the discovery stage, I came across an insightful report from the Nielsen Norman Group. The report emphasized the importance of disclosing extra costs to users at an early stage of their booking journey. It highlighted that the pain caused by unexpected charges on the checkout page is something users are likely to remember for a long time.

Define the Problem

To define the problem more clearly, we conducted quick online user testing on Usertesting.com. Participants were given a scenario to search for a hotel under a budget, providing us with valuable insights into their journey. Most participants did not tap on the currency icon to check the price display settings, while some used the budget filter to find hotels within their budget. However, many participants continued to go back and forth between the search result page and the final checkout page to confirm the real final price and ensure it was within their budget.

Develop the Solutions

Based on our observations and the report from Nielsen Norman Group, I identified two key opportunities at crucial moments in the user journey:

Decide and Deliver the Solution

After careful consideration and evaluation, the product owner agreed that the banner option had the most potential. The banner was clear and prominent, and appeared only in certain scenarios. It was easy to implement and showed high impact when evaluated these ideas on a 2x2 matrix.

Impact

We conducted A/B testing for the banner idea, and it resulted in a significant win on both iOS and Android platforms. The number of bookings increased, and more users started exploring the price display settings. Furthermore, the version with the banner showed a better conversion rate of bookings.

The implementation of price transparency not only improved user trust and satisfaction but also contributed to increased bookings and better business outcomes.

Search Result Page Redesign (3 Quarters)

It was an epic project with many product owners and designers involved. My role primarily focused on UX framework, collaborating with the design system team to create new components, and iterating the UX and UI design based on data.

Problem: Information Overload

The search results page suffered from an excess of different promotions and messages from various teams, including pricing, content, VIP, and Cashback teams. This chaos resulted in lengthy property cards, with extreme cases showing only one card on the page.

The primary goal of the page was to enable users to browse and compare properties quickly, and prior data indicated that shorter cards led to better conversion rates. Therefore, we hypothesized that displaying the right amount of relevant information on structured cards would lead to increased bookings.

Discover the Problem

I analyzed how competitors structured their cards, with a specific focus on the amount of information and the number of badges. It was evident that [company name] had the most badges, and the worst part was that these badges were designed in different colors. In contrast, most competitors had only 1 to 2 badges on a card, using unified colors for grouping.

Working with the product lead, we reduced the color usage and created the first draft. During remote user testing on usertesting.com, some feedback included: "There are too many white spaces." Additionally, it became evident that our users were accustomed to finding deals based on specific colors, such as green badges indicating breakfast included.

Based on this insight, we experimented with different layouts. Knowing that users primarily look at the price or photo when browsing cards, we decided to optimize the layout and eye flow by placing badges on the photos. Additionally, we planned to group badges and reward messages by colors rather than removing colors entirely.

Define a Framework

To address the problem, I collaborated with a senior designer to query data for potential removable items and ran negative tests with the product owner. Additionally, I conducted an online survey to understand users' expectations better. Key findings from the research included:

Using this insight, I designed a display rule where rewards were organized by the reward amount, with the largest reward displayed prominently.

Develop the Solutions

Applying the new design, I ensured that the framework covered all relevant aspects. The side-by-side comparison showed that the new design featured larger photos, unified colors, and shorter cards, aligning with our goals in every case.

A second round of user testing was conducted for the new version. While the amount of information improved, users reported potential issues with finding information and scrolling through photos. This may result in more visits to the property page for additional details. We decided to closely monitor this data and iterate on the design accordingly to enhance the user experience further.

Deliver the Solutions

The dev team proposed a phased approach to implementation to manage risks, so I created M1, M2, and M3 versions accordingly. Throughout the process, we closely monitored the data for each version until we arrived at the final version, M3.

Define Success Metrics

We used two metrics to gauge success:

We tracked the micro-conversion changes on each funnel through this diagram. The red bar represents decreasing, and the green bar represents increasing:

Iterate the Design

Continuing with the iterative process, we analyzed data from M1 to M3. Interestingly, the new design worked better for Android users, resulting in decreased property page visits. However, iOS users seemed to visit the property page more, possibly due to hiding too much information. We kept iterating until we achieved the desired results.

M3 to M4 Iteration

Further data analysis indicated that iOS users scrolled less on photos, leading us to revert to the previous photo layout. We also moved the conversion-focused badge closer to the price section to improve the business metric. To gather more feedback on the new design proposal, I created a new prototype that was tested on usertesting.com. The results provided valuable insights and validated the benefits of the new design.

Kept Iterating

In the M4 version, we successfully achieved the desired micro conversion and observed an increase in bookings on Android. While the iOS experiment was still ongoing, I made further design adjustments based on user feedback. To address the issue of photos being stitched together, I enlarged the second photo and adjusted the margins. Additionally, I introduced new designs to reveal more information, helping users compare hotels and make decisions faster.

One idea involves an interaction design where, as the user scrolls through the photos, additional information and promotions are revealed. This approach assumes that when users are actively scrolling through photos, they are likely interested in that particular hotel, making it an opportune moment to display more details and promotions.

Final Design

The outcome featured a clear information architecture and sufficient data for efficient decision-making, as proven by the data.

Besides redesigning the property card, I took on the task of revamping other components on the search result pages, including carousels, headers, filter bars, banners, floating buttons, and navigation. Additionally, I addressed several UX issues in the project. For example, I defined the guidelines for banners to prevent stacking banners. Moreover, I introduced a fixed filter bar and contextual inline filters to reduce clutter and avoid the overload of filters.

Key Things I Learned

• Balancing Business and Users: Learning how to strike a balance between business goals and user requirements through iterative design and experimentation.

• Enhancing Communication: Effective communicated with a range of stakeholders and ensured the alignment and collaboration in a significant project.

• Design Exploration: Working within a large design team gave me the opportunities to experiment with diverse UI approaches, organize the documentation of design files, and explore in responsive design for revamping Agoda's website.

Discover more of my design projects:

Voucher Service Design, Revamping a complex internal system and creating a new B2B web portal.

Newspectives, From concept to creation, developing an innovative product from scratch.