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.
research
Below are the different research methods that I used to gather data as inputs to the project
COMPETITIVE BENCHMARKS
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
ONLINE SURVEY
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
USABILITY STUDIES
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
analysis
AFFINITY DIAGRAM
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
CUSTOMER JOURNEY MAP
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
design
CUSTOMER FLOW
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
Screen sketches depicting the customer flow from the homepage through room booking
INTERACTION DESIGN
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
WIREFRAMES
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