The brief story of designing a price comparison site for hotels.

I gonna show you how can I work on the following task.

The core objective of the task:

Providing a solution to enable the user to choose their desired hotel/accommodations based on the price as well as usual filters among all options offered by different services.

The process

I started with understanding user needs and investigating the problem and user barriers. Then I draw a wireframe of the idea, before designing high fidelity interface.

I’d like to share a solution, but please keep in mind that the article may not cover all the steps from start to finish.

The Problem

Most people try to find the best price for accommodations before finalizing their booking. The seeking process can be time-consuming and boring. The problem is wasting time and no guarantee to get the result at the best price.

Note: To identify the problem, you have to know more about our users. As a designer, you should prepare/use insights about different aspects of a user’s needs and conduct some surveys/research based on a user-centric design approach such as user persona, user journey map and etc.

If you need to present a unique idea very shortly, you can rely on the benchmark results, your taste in designing, and your current knowledge. Present your idea in low fidelity form. After the first wave of positive feedback about your idea, spent your time to prove the idea, ideally.

The solution

The price comparison product can enable a user to find the best deal among a lot of different accommodations and a bunch of pricing for each of them.

The best deal will be defined not only based on the price but also should cover the entire aspect of the user’s needs. Therefore, the solution is collecting options (crawling or using APIs) from all accommodations providers according to user needs (price, location, user satisfaction rate, etc) and sorting them all together for choosing by the user.

After choosing the desired deal, We should redirect the user to the provider/supplier for finalizing the booking process and assure the user about the price by guaranteeing that we discovered the most affordable option for the user’s need.

User Navigation and information architecture

The following user flow shows you the process of booking the accommodation via using the price comparison service. Obviously, just the first three steps will happen on our website and the other steps are on the accommodation provider side after redirection. Hence, we going to draw wireframes and design more details.

Note: There is a BIG difference between price comparison sites like Trivago and OTA services like Booking or Airbnb, etc.

In Trivago users can’t go for direct booking. They can just find their desired deal and go-to provider for finalizing the booking process. On the other hand, in booking.com or Airbnb.com users can find the desired accommodation and book it instantly.

The wireframe

The first part of the wireframe pointed to the home page. The home page contains some trust generator elements, a search widget, relevant accommodation content based on location and browsing history, etc. The core functionality is the Search widget.

We should identify user needs based on entered information in the search widget and show search results besides filter and sorting options. Users should be able to change search metrics on this page.

The third page is the details page. In this view, all of the accommodation detail should be shown according to the user’s needs order.

The architecture of the presented information will affect the booking conversion rate, time-on-page, and many other major KPIs as well. The main CTA(Book button) will redirect the user to the accommodation provider for finalizing the booking process.

Reviewing the mobile-first design

Because of limitations, let me skip some steps and jump to the final design. The design for the responsive web pages should be mobile-first, So I start designing on mobile views.

In the mobile view, we have no enough space to show all fields of the search widget at the same time, so the user can see the applied configuration and have access to modify the search by a tap on the search bar.

As you have seen, the search widget will transform into full mode and enable the user to modify each field simply.

The main purpose of designing such a product is to enable users to compare different accommodations and choose the right one. In order to fulfill this need, I considered showing the many useful information about each hotel on the hotel list page. If any of the hotels on the list attract the user, the next step would be to check the details on the PDP (product details page).

In the following, I tried to simply show you what users will see on the details page:

The information on each hotel on details page is categorized into the following major segments:

• Fundamental information
• Guest feedback
• User review
• Amenities
• Hotel Description
• Map
• Hotel Surroundings & directions

Each segment shows the necessary information at a glance and has a CTA named “see more” to show more details.

The main call to action of the page is the “book” button. As I mentioned, the product should collect all prices of the same hotel/accommodation offered by different service providers. Hence, I considered that the “book” button has to redirect the user to the final booking page on the service that has the most competitive offer. BTW, there is a side link for those that need to check the all offers personally.

The desktop design

The structure of the design comes from the mobile view and is just expanded by injecting some more necessary information.

There is a full-width card view + some extra space that is used for showing advertisements.

Conclusion

We have to remember that, one of the biggest parts of the design cycle is the evaluation.

Most of the time, we should have true insights before releasing the changes by usability test, survey, and A/b test, etc. Furthermore, Gathering data by defining KPIs is very important but it needs to have an analytical mindset and pay attention to the following matters:

• User/traffic flow
• Lead and conversion rates of core functionalities,
• Major and minor KPIs

Thank you for your time.