top of page

ux case study

UX Design Institute Student Project | 2021 | User Experience Design

design brief summary

The client is a new hotel who is looking to create an online booking experience that is simple, accessible, and based on a deep understanding of their target users.

The task is to design a new website for the client, specifically focusing on the hotel booking process: how users search for and book hotel rooms online.  The end goal is to develop a clickable prototype based on medium fidelity wireframes that can be tested with users.


Below are the different research methods that I used to gather data as inputs to the project


Reviewed in detail direct and indirect competitors to:

  • Learn how best-in-class hotel websites solve the problems I was trying to solve

  • Understand the conventions that should be followed

  • Highlight best practices to emulate


Asked survey participants about their goals when using websites and apps relevant to hotel website bookings: what they are trying to do, whether anything is preventing them from doing it, and what other features they would like to see


Developed a test script, conducted, and recorded several usability tests to: 

  • Learn about the context of use of people that use websites or apps: what are they trying to do, who are they with, where are they, what devices are they using?

  • Learn about the goals and behaviours of customers when booking booking flights, hotels stays, or rental cars



Led an affinity diagram exercise to sift through the information gathered during the above research projects and document observations. 

I used the observations to develop key insights to be used as inputs into the design phase.

Image of the developed affinity diagram


Using the key insights from the Affinity Diagram, I charted a Customer Journey Map (CJM) detailing the current customer process from when they find and select a hotel through completing the booking process. As part of the CJM, I identified the user context, goals, behaviors, pain points, and positive experience elements.

Image of the developed customer journey map



Taking the Customer Journey Map, I created a Customer Flow Diagram to define the screen states and navigation the user would experience through the new website design 

Interaction Design.png

Screen sketches depicting the customer flow from the homepage through room booking


Building on the flow diagram created, I sketched the screens and screen states for users flowing through the site addressing the issues and user goals identified in my research and analysis

Part 1 of an Interaction Flow diagram, identifying screen states and user navigation


Using Figma, I turned the hand-drawn wireframes into a mid-fi wireframes and created an accompanying detailed document containing all the necessary detail a developer would need to build the application accurately

Sample from wireframe document depicting and describing the Room Detail Overlay wireframe

bottom of page