top of page

Hotel Website

"FindStay" to "Stay with me"

Studying user journey from a hotel aggregator website to a hotel website

Overview

The purpose of my study was to study and define UX requirements for a hotel desktop website. The target audience is users who visit hotel aggregator websites to compare hotels on prices and other attributes before selecting and completing their booking on the website of the hotel of their choice.

Project Goals
  • To gain key insights into what users are having friction with and what they find the most useful during their journey of booking a stay at a hotel of their choice.

  • To use these findings to factor into the requirements specifications for an intuitive and user-friendly user website. 

Key Learnings Unlocked
  • On an aggregator platform, for the user,  key comparable attributes (like price, proximity to a key location, room size, etc. ) are important to highlight and visually stand out on the web page. 

  • Having a diverse set of user groups (large age span, different countries of residence) helped identify certain skewed feedback and mitigate bias in requirements catering to one specific group of the target audience.

Role

UX Designer to research and specify requirements for a software developer

Project Software and Tools

Figma, Miro, Vengage and Post-it app

Project View

Desktop Version

Duration

6 months

The Process

Research
Analysis
Validate
Design
Prototype
Build
Test

Competitive Benchmarking

Online Survey

Usability Testing

Research

Affinity Diagram

Customer Journey Map

Analysis

User Flow Diagram

Interaction Design

Concept

Design

Medium-Fidelity Prototype

Usability Testing

High-Fidelity Prototype

Wireframe

Concept

Design

Final Thoughts

Research

Research

Competitive Benchmark

Overview

The goal of this project was to identify what competitors are doing to gain insights into how to design a user-friendly hotel desktop website. The website I chose to research is; (1) Sheraton Stockholm (2) Hilton Stockholm Slussen and (3)Radisson Blu Waterfront Hotel Stockholm. These are all direct competitors as hotel websites. I chose these hotels because they are considered and have a rating of 5-star hotels with an international brand name. Lastly, as a travel aggregator, I decided on booking.com.

Objective
  • Understood the user interface conventions I followed.

  • Highlighted best practices that I emulated.

  • Highlighted bad practices that I avoided for future development

Task
  • Aspects of the website that I looked at:

    • Homepage

    • Room selection

    • Hotel Selection

    • Additional Add-ons (optional)

    • Pop-up (optional)

    • Payment page

  • Reviewed each website by taking screenshots and provided commentary on them.

homepage.png
room selection.JPG
Insights

By completing this project, I realized significant features:

  • "Special Requests" option- This is significant because, at the time of reservations, guests may make special requests to make their stay more comfortable, and if guests have forgotten an item at home, generally the hotel will come through to offer it to them.

  • Shuttle Service as an option - It provides an option for the guests for their convenience to offer a shuttle service to the hotel and it gives them the satisfaction that the hotel is taking care of the guests. 

  • Child's age option - If a child is a toddler and requires an extra crib in the guest's room, the hotel can provide that assistance for them. Also, if they require extra care for your young kids, a request can be given to the hotel to seek a nanny to support the child, if required. 

  • Map of the hotel as an option - Maps represent the real world on a much smaller scale. It can help guests travel from one location to another. It helps guests organize information. It helps guests figure out what are the areas around the hotel.

  • Flexible dates for cheap bookings - When the dates are flexible, guests have the flexibility to change or cancel the reservation if plans change. To have that visibility as an option, it provides a wider range of options of dates to select from which makes it convenient for the guests. 

Online Survey

Overview

After the Competitive Benchmarking, I created an online survey to understand users' goals, behaviors, context, and pain points when booking or entering the hotel website.

I had asked closed questions and I was uncovering data with quantitative questions. With that I reached out to people in a large geographic area to gain as many responses as possible to mitigate bias, casting the net wide. I felt that going for a broad sample group, I would receive a variety of different opinions, which I did towards the end.

Objective

Learned and understood more about people who used hotel websites:

  1. What are they trying to do?

  2. What is preventing them from doing it?

  3. What other features they would like to see?

Participants
  • Age Range: 13-85 years old

  • Responses: 66

  • Location: Thailand, Malaysia, USA, Singapore, Canada, UK, Sweden & India

Distribution Channels
  • Survey Tool: Google Form

  • Means of platforms: Facebook, WhatsApp, Instagram & LinkedIn

  • Quantity of Questions: 10

  • Time to complete survey (average): 2 Minutes

  • Time Frame: 17th - 22nd March 2021 (1 week)

survey 1.JPG
survey 2.JPG
Insights

After receiving my Online Survey results, I realized what I should focus on in my desktop website.

 

Here are some of the summarized insights from the survey:

  • From 8% to 10% of the users wanted language, airport pick food service online, customer support, etc. to be more focused

  • From 15% to 20% of the users wanted clear images, clearer prices of promotions, deals, offer, etc., to be more focused

  • The majority, 47% of the user's wanted a more user-friendly/overall structure of the website

Usability Test

Overview

Usability testing is the most powerful tool a UX researcher has. It allowed me to gain rich insights directly from the user. These insights inform my design decisions, helped me make a better product.
This project brought me through setting up, moderating, and recording a usability test. I conducted a comparative usability test with 2 participants virtually on two websites (agoda.com and booking.com). The usability tests are handwritten by me below:

NOTES.jpg

Click on the image for a magnified view

Objective
  • Learned about the user context: 

  1. What are they trying to do

  2. Who are they with, where are they

  3. What devices are they using?

  • Learned about the goals and behaviors of customers when booking hotels stays

  • Build my skills, experience, and confidence in usability testing

  • Learned how to conduct depth interviews and draw insights from users, another critical skill to learn

My Role

I was the moderator.  

  • Welcomed the participant

  • Informed what they are doing here

  • Explained the setup of the virtual test

  • Reminded the participant to "think aloud"

  • Provided the tasks for the participant to follow for both the websites

  • Asked the questions throughout the test

If you have the time, click on the video to view the full session (59 minutes)

Insights

The challenge I faced during the Usability Test was asking the right questions at the right time. I could not inform the participant what to do next or where to click next as they needed to think aloud and explain the process they were going through themselves.

To surpass my challenges, I needed to read my script aloud to myself and try it on my sister as a practice round. After going through it myself, I understood better how to conduct the test.

To mitigate bias, I had set expectations and processes for the participants to follow, and I made sure they were clear with what they had to do before beginning the session. The participants did understand what I was saying, but I was still asked repeated questions during the session. So I could say that there is still room for.

Analysis

Analysis

Affinity Diagram

Overview

To successfully run an affinity diagram session is a significant skill for a UX professional. This project allowed me to sort through large volumes of data and get to the root of my findings.
For this project, I reviewed all of the research from my previous work and created an affinity diagram to represent what I have learned so far. This project helped me with further analysis and design decisions.

Objective
  • Reviewed my research, and took notes. I used those notes to create an affinity diagram

  • Learned how to put structure on qualitative research data

  • Understood the power of collaborative analysis

Thought Process

I first started by handwriting all my notes. I also had support from a friend to help view things from a different angle. 

post it.png
Started by taking notes on post it notes
post it2.png
Categorized my notes from different research method. Each color represents the different research methods 
post 5.JPG
Categorized my notes from different research methods 
Digitalized notes

I realized it would be better and faster and easier if I digitalized them instead, so I did. I transferred my post-it notes (handwritten) to digitally.

Digital mobile application: “Post-it”

Final result

The finished affinity diagram shows the positives and negatives and users’ dialogues within each category. Each background color is showing different sections of the divided parts.

Program for creating the finished affinity diagram: Venngage.

post 4.JPG
I re-arranged my handwritten notes on to the "Post-it" notes mobile app digitally
final.JPG
For the final affinity diagram I used a different program to arrange all the categories together

Click on the image for a clear and completed affinity diagram

Insights

The importance of collaboration with someone else makes a big difference. This is because it gives another perspective to things which strengthens the task even more. 

Lessons Learned: It would make an impact if there were a group of people working on this together. It might take a long time but some of the notes could have been better minimalized and maybe categorized better.  

Customer Journey Map (CJM)

Overview

I built on the work I did in the affinity diagram by putting even more structure on the analysis of my research data. The customer journey map is a valuable technique to learn. 

Objective
  • Created one customer journey map

  • Learned how to translate research data into a structured document. I categorized my CJM by having goals, behaviors, mental models, positives & negatives. I have also highlighted dialogues in yellow.

  • The tool used for creating the customer journey map: PowerPoint

cmj.png

Click on the image for a clear view of the customer journey map

Insights

It turns out that the overall user's journey was leaning more towards neutral emotions in the booking and selection process. Neutral emotions don't it's bad or good but they can be changed to a positive note. 

This project made it clear to me that there are a lot of things that can be changed and I need my design to be trustworthy to change the neutral emotions to positive ones. 

Concept

Concept

User Flow Diagram

Overview

My overall objective was to fix the issues I’ve uncovered during my research, which have been highlighted in my affinity diagram and customer journey map.
In this project, I defined a high-level flow for my desktop website. I focused on one flow, that is, one primary use case. This project was to ensure that I first understood how users will flow through my design.

Objective
  • Defined the high-level booking flow for my new hotel website 

  • Addressed all the issues highlighted in my customer journey map

  • Layed the groundwork on which I built my designs
    for my upcoming projects

Flow Diagram FINAL.png

Click on the image for a clear project view

Insights

After testing out multiple interactions, I finally concluded with the one that aimed to have the lesser clicks and steps while keeping it informative and understandable at every stage. Towards the end of the task, as I was satisfied with the structure and flow. I started designing screen by screen. 

Interaction Diagram

Overview

I learned the importance of designing effective workflows, which allow users to complete tasks like registration, onboarding, and sign-in. I had introduced complex forms and payment flows, along with techniques to improve user trust in my design.

Objective
  • Created a user interaction design

  • I adapted my website design based on users' needs and feelings from my previous projects.

  • Tools I used to create this project: handcraft; color pencils, rulers, pen, pencil, different sized and colored papers & post-it notes

ID.png

Click on the image to view the complete project

Insights

Once again, my objective was to focus on understanding and feelings from the previous projects that led me to this design I created. The important factors were clarity for each of the screens and navigation flow to proceed to the next screen.

While browsing through Google and YouTube I got the inspiration to create a simulation interaction that gives the shadow and elevation effects. Although it took a lot of time for me to make this, I enjoyed the process. 

Design

Design

Medium-Fidelity Prototype 

Overview

I created a medium-fidelity prototype for my hotel website. I had already defined much of the solution with my flow diagrams and sketches. Now I've added more detail in the form of interactivity while also learning some powerful tools along the way.

Objective
  • Built a medium-fidelity prototype that followed the guidelines in the course

  • Made sure that the prototype contained enough details and interactivity to test the high-level flow, screen layouts, text, and simple interactions

  • Learned how to use popular prototyping tools

  • Program software: Figma

Insights

Being able to create my hotel website was something new altogether. The thought of me designing my site was something I had never imagined before. I have to admit it took some time to grasp and understand the method, and once I got the hang of it, I enjoyed it. 

After completing my medium-fidelity prototype, I shared my project with people working in the IT world and people who understand and know how to create a website. I received feedback from them, and I was so grateful for that. 

I also share my prototype with those who are not related to the IT world. I did that because I wanted to understand if they found it easy to navigate, user-friendly, and information. I received feedback from them too, and I was able to adjust my website accordingly. 

Usability Testing

Overview

Usability testing is the most powerful tool a UX researcher has. This project brought me through setting up, moderating, and recording a usability test. I conducted a usability test on my medium-fidelity prototype.

Objective
  • Around 2-5 users helped me in providing good feedback and comments on my design.

  • I applied all the details and minor issues that were indicated.

Before
After
LF-1JPG.JPG
HF-1.JPG

The feedback here was to have lesser text as it makes the page look too much / overloaded with text.

Before
After
Hotel Website.JPG
HF2.JPG

The feedback was about the layout and once again too much information in that one row. The "BOOK NOW" was located at a fixed position on the right side when scrolling up and down. This page makes it better for users to be able to book wherever they are on the page.

Before
After
Thank You page.JPG
Thank you page.JPG

The feedback was first to have a "Thank You" page which was not there before and that made this a concluding impact on my website. Also to switch the last two lines at the bottom, because the user's by the end of the page can see that a confirmation email has been sent. 

Insights

There were some issues with my first attempt, and after the usability testing, I managed to implement those feedback on my website. The inputs made me happy because this only made my website looks as good as it is. 

However, I still believe there is still room for improvement.

High-Fidelity Prototype

Overview

High-fidelity prototypes are computer-based and usually allow realistic (mouse-keyboard) user interactions. I created a high-fidelity prototype for my hotel website. Now I've added more detail in the form of interactivity to be as close as possible as a representation of the user interface.

Objective
  • Built a high-fidelity prototype

  • Aimed more towards being pixel-perfect imitations of the final product without code. For example, colors, gradients, shadows, images, and graphics along with typography – basically everything I'd see in my final website

  • Program software: Figma

Insights

When I created my medium-fidelity prototype, I had the correct layout and structure. So for my high-fidelity prototype, it was easy to turn it more into a live website by placing images. I had to go through the procedure of thinking about the size, shapes and for some of the screens, I needed to re-think how to make it more presentable, visually appealing, detailed all interface elements, spacing, and graphics. Towards the end, it turned out as I liked. There is room for more growth, but I am happy with the result.

Wireframe

Overview

In this project, I created wireframes for my hotel desktop app. I defined the extra details that developers need to build my hotel website accurately.

Objective
  • Created a set of wireframes

  • Made sure the wireframes contained all the necessary detail a developer would need to build the website application accurately

Insights

After this wireframe project, I had my IT software developers friends take a look at my work, and they also provided me with some additional inputs on how to make sure to be detailed. For example, how and what terms to use when explaining in the project. The main focus was to make sure the developers understand what and how I wanted my interactions to be for my website. Is it a fixed position animation or what will happen if this button is pressed, etc?

Understanding all the details, I wanted to connect to the developer to learn more. I would have loved the developer's feedback on my own created site. I know that one day I will get the opportunity to receive it and make better progress!

Final Thoughts

Final Thoughts

This was one of the first UX Design projects I started working on. At first, I was a bit confused with how to begin and where to start or thought how would this research help me and how etc.? I had so many questions in mind. But as I went through the process, each project, each step of the way through the help of different mentors and examples of projects I saw, I managed to understand and work through the process. 

I was working in the hotel industry for several years and so I thought this would be a good start as a UX Design project. My initial thought was to start building upon only a hotel website but as the process went on without realizing I was working upon creating a hotel aggregator which led to a hotel website. I kept this process and I found the flow quite nice and so decided to keep it this way. 

The process led me through a lot of new findings and new challenges each time. I did not realize every step of the way would be interlinked to a website creation I built. 

I realized that everything I did from the beginning, starting with research and seeking support from friends or mentors had different impacts on my entire process of creating this one website. The main key takeaway here is to make notes of any ideas that come to mind and understand that every idea or thought from different perspectives makes a big impact on the project. Every opinion matters as it will only benefit your project now or in the future. 

Next time I would maybe have a few more participants for my usability tests so I can be more confident when it comes to guiding or creating expectations through the process while comparing 2/3 websites. I would create some of my website pages to have a little more of a different layout, in terms of creativity. 

bottom of page