UX/UI Design

Introduction

Users often find it challenging to compare options, complete bookings quickly, or find relevant information on hotel booking platforms. This study aims to address these challenges to streamline the booking process.

Goal:
Improve the usability and efficiency of the booking process, increase user satisfaction, and boost the booking conversion rate.

Scope:
Focus on the user journey from searching for a hotel to completing the booking.

Research objectives

• Identify usability issues during the hotel search, comparison, and booking process.
• Understand user needs, preferences, and pain points when selecting a hotel.
• Discover barriers to completing the booking (e.g., unclear pricing, navigation issues).

Research

Online survey:

I send out a survey to understand user motivations. The following provides an overview of the survey findings.

• Booking.com is the most used website/app. It was mentioned in 5 of the 10 answers.
  • Other websites were Socialdeal, Zuiderduin, Google, TUI, and Voordeeluitjes.

• Common reasons for visiting the website:
  • Looking if there is a room available
  • Looking at how late you can check in
  • Looking for more info about the hotel
  • Looking for discounts and offers
  • Looking for hotels in a certain area
  • Orientation for possible vacation locations
  • Orientation for possible vacation, house, hotel.
  • Booking a vacation /accommodation

• 3 people could not complete their task that day.
  • They didn’t find what they were looking for
  • They had a reflection period – booked a week later
  • Really bad UI

• What the users would change on the app or website:
  • Make the UI, information and content clearer, calmer and better organized on the website.
    • Often the interface is not very clear or difficult to find on the website. Could certainly be displayed more clearly or prominently.
    • Booking.com is sometimes a bit confusing because there is so much in the overview.
    • Make it clearer in terms of content. Sometimes too much, less relevant information and/or duplicate information is shown.
    • Better UX, clearer what you see, calmer design.
    • The website contains many information blocks and promotions, which give a busy impression. It would look nicer and calmer if these elements were a little less present and better organized
  • Costs that are now charged by Booking.com are not reasonable.
  • Be clearer about additional costs.
  • I would add a ‘favorite filter’ in which all filters that I use as standard are saved and are included when choosing an accommodation/room
  • Adding a number of filters such as a specific part of a country

Benchmark Analysis

I analyzed UX patterns and features from competitors like Booking.com, Van der Valk and Ibis hotels.

• There are quite a lot of similarities between hotel booking websites with small variations between them. 
• On most websites, the search bar is visible above the fold of the page for direct access.
• The basic functional calendar is quite standard everywhere although Booking.com does some interesting stuff by showing two months instead of one. Ibis Hotels has an interesting way to show how many days and nights you’re booking.
• A mental model that surfaced is that for selecting guests you often have adults and children as options as well as the amount of rooms.

Usability test

To better understand user behaviors, needs, and pain points on a hotel booking website, I conducted an online usability test with Zoom and observed a user as they attempted to complete tasks on it.

Usability test note-taking:

To gather additional insights, I also observed and took detailed notes on two usability tests conducted by others. Below is a small example of the usability test notes I took during the sessions.

Analysis

Affinity diagram

After gathering all the research data, I created an affinity diagram to organize and group recurring themes, revealing key patterns and insights.

Customer journey map

I then transformed these insights into a customer journey map, visualizing the user’s experience, pain points, and opportunities for improvement.

Key Insights:

This research provides a strong foundation for moving into the concept and design stages. Below are the key insights that will guide these phases. The customer journey map should be taken into account as well.

• Location Awareness: Users prefer seeing where hotels are located in relation to nearby landmarks and attractions.
• Visual Appeal: Users value clear pictures of the hotel, including rooms, the restaurant, and facilities, to form a better impression of the property.
• Breakfast Information: Users appreciate knowing whether breakfast is included, as this can influence their decision.
• Room Transparency: Users prefer multiple, clear photos of the room to estimate its size and avoid feeling misled by the hotel.
• Comparison Simplicity: Users want an easy-to-read overview of hotel options and prices for quick comparison.
• Calendar Efficiency: The option to view two months on the calendar helps users quickly select dates further in the future.
• Streamlined Booking: Users prefer completing the entire booking process before adding optional extras, like upgrades or activities.
• Clear Summary: Users want a clear summary of their selections before proceeding to payment to avoid confusion about what’s included in the final price

For this project, I redesigned the Kruidvat product page for beauty products with different color variations.

The Challenge

At Kruidvat, they sell a lot of beauty products. We see many products from one product line with different color variations within the beauty range. How can we entice the customer to put multiple colors of lipsticks in his/her shopping cart?

Must have:

• Providing incentives/enticement to the user to place lipstick in their basket
• Phone web page demo in Figma

Should have:

• An aesthetically pleasing design creates a positive response in people’s brains and leads them to believe the design actually works better. (https://lawsofux.com/aesthetic-usability-effect/)

Won’t have

• Shopping cart pages
• Buy process pages
• Tablet, PC or other device web pages

User research

Key insights from user research.

• Opportunity: The Lipstick Effect. This phenomenon gets its name from the increased lipstick sales during times of economic distress like recessions. Lipstick sales rise during these times as consumers cut back on large purchases and instead splurge on smaller, more affordable luxury items that increase their happiness. (https://mailchimp.com/resources/lipstick-effect/)
• The majority of women own at least 10 lipsticks at any given time and are willing to spend up to $20 on a lipstick purchase (https://salesfuel.com/76-teens-purchasing-lipstick/)

Competitor analysis

Key insights from competitor analysis.

I looked at the Douglas, Bol. and Beauty Bay e-commerce web versions.

• Color indications aside from the photography can be seen on all websites
• A horizontal overview of the colors is also a common practice
• A dropdown menu with color options is what the customer encounters everywhere
  

Designs

First of all, I designed some low fidelity prototypes of the current website and two possible solutions. This gave me a good feel for the information the user can or cannot see and interact with.

Taking into account the different stakeholders I decided to show three routes to improve on this subject.

Option 1: Quick fix
This option consists of adding the color of the lipstick to the existing dropdown menu.
The location of the color choice has also been moved from the bottom to the top of the card with the add-to-basket button (voeg toe). This is done so we can link the color with the photography. Here we are applying the Law of Proximity. Objects that are near, or proximate to each other, tend to be grouped together. Proximity helps users understand and organize information faster and more efficiently. That way the user can quickly try out more lipsticks and decide on the one they want to buy.

Option 2: Competitors
For option 2 I looked at the competitors. Here we also applied the dropdown menu with colors but I added an additional horizontal color bar. We are using existing mental models here. We are applying Jacob’s Law. Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

People in general process images faster than text. By having a horizontal bar it takes fewer clicks to switch to a different color. The user also immediately sees more colors they might be interested in.

Option 3: Call to action
For the last option, I focused on the call the action. What is it we want the customer to do? That is adding lipstick to their basket. We need to make this as easy and accessible as possible. I changed the following things:

• I made the call to action button visible above the fold so it’s always in the view of the customer.
• The most important button/action (add) has a larger red surface and thus stands out more.
• The search bar at the top of the page has been removed so that customers do not leave the page instead of buying the product.
• This version only uses the horizontal color bar and does not have the dropdown. This way you create even more overview on the product page. And the aforementioned benefits still apply.
  This however does need to be tested with the customer base because Kruidvat has such a diverse group of customers. Everyone must be able to understand this. If that’s not the case another option might be better.

Depending on the budget and resources of the stakeholders you could improve the product page with one of these options.
My advice would be to apply the changes of option 3.

Learnings

• I think you can apply the call to action principles to more situations. I will take this with me on future projects. I think it’s always important to ask yourself what does the user want to achieve in this moment and how can we make that as easy as possible for them. And don’t be afraid to remove options that deter them from it.
• Sometimes existing mental models might not be your/my preferred way to design things in an esthetic sense but it’s more important the users can focus on their task rather than on learning new models.

Date: May 2024

In this dynamic UX project, the focus is to improve the online table reservation experience, ensuring seamless navigation, heightened user satisfaction, and an overall delightful interaction for burger enthusiasts. The goal is to create an intuitive, visually appealing, and efficient platform that caters to users from diverse backgrounds and preferences.

The goal was also to ensure a seamless experience across various devices, including desktops, tablets, and mobile phones, and prioritize responsive design principles to accommodate users accessing the platform from different devices and screen sizes.

Date: February 2019

At X-Ingredient, I immersed myself in the exciting and emerging world of Virtual Reality (VR), which was still relatively new in 2018. My focus was on exploring UI/UX possibilities and refining how controllers were explained within the VR3D environment tool. The aim was to enhance the user experience for a supermarket research project.

Key Contributions:

1. In-Depth UI Exploration: Delving into the not-yet-defined territories of UI design in virtual reality, I researched and explored possibilities to create interfaces that blend functionality and immersion.

2. Controller Explanations: Understanding the significance of user interaction, I worked on crafting intuitive controller explanations, ensuring users seamlessly navigate the VR environment with a clear understanding of the available functionalities.

3. Prototyping for Validation: To bring my UI/UX concepts to life, I developed a prototype that served as a tangible testing ground. This allowed me to validate ideas, iterate swiftly, and fine-tune designs.

Date: June, 2018

I worked on the user experience and user interface of the browser game Erectus vs Sapiens during my time with Maata Games. I was part of the team that was developing version 2 of the browser game Erectus vs Sapiens. The challenge was to not only enhance the visual appeal but also ensure a seamless transition between the original browser version and the new mobile version and to incorporate new gameplay elements. 

Disclaimer: The images shown do not represent the final version of the game.

Date: 2016, 2017