The project’s goal was to design the accommodation booking flow for a hotel website only in desktop resolution, following every step of the design thinking process.

Competitive analysis

First, I took a look at three different sites that offer this type of service among others, and I did a competitive analysis. This helped me get familiar with the most commonly used layouts and flows involved in the whole accommodation booking process while getting a glimpse of the users’ mental model.

Usability testing

To begin to understand the issues users might face when booking their stay online, I conducted usability tests for two of these websites and took notes which would help me in the next phase.

Affinity diagram

Then I put together all those notes in an affinity diagram. I grouped them according to the steps or tasks users were trying to accomplish. This helped me structure the data in a manageable way. The resulting steps were six: Finding Hotel, Selecting Hotel, Finding Room, Selecting Room, Extras, and Checkout Process.

Customer journey map

To understand aspects of the journey that needed to be fixed as a priority, I created a customer journey map showing each stage of the booking process as defined previously in the Affinity Diagram but seen from the user's perspective and focused on their Goals, Behaviour, Context, and Pain Points.

Flow diagram

From there I elaborated a flow diagram to better define the optimal flow for users to complete their main tasks.

Wireframes

I created wireframes from scratch, from paper and pen to a fully working prototype. I included annotations to make it easier for others to understand the intended interactions and also to ensure the highest fidelity when translating it into code allowing developers to focus on development while preventing them having to make design decisions.

Prototype

I invite you to see the prototype here.