Hotel Booking Website
__

Designing a Seamless Hotel Booking Experience.

At the UX Design Institute, I designed a user-centric mobile app/website for hotel booking, following a comprehensive UX process. The goal was to streamline booking with a seamless and intuitive experience.

I conducted thorough research, crafted journey maps, and applied various UX techniques, resulting in a visually appealing, user-friendly platform. This project showcases my ability to apply UX principles and create compelling digital experiences.

Client
UX Design Institute

Tools
Adobe Creative
Figma
Dovetail

My role
In charge of the entire UX design process, from initial research to the creation of
high-fidelity prototypes.

Design challenge

Design and develop a simple and accessible online booking experience for a hotel's target users. Conduct research to gain insights into user preferences and pain points, and use these insights
to create a user-centric design that caters to diverse users.

Consider the overall user experience, including visual design and messaging, and ensure
a streamlined booking process with easy navigation and clear instructions.

Design Process
__

The structure

The UX design process involves Research, Define, Design, Prototype, and Validate. It includes gathering user insights, defining scope, creating a user-friendly design, developing a prototype, and testing with users for success.

Research
__

Notetaking

Note-taking is essential in UX design, aiding organization, progress tracking, and informed decision-making. From four usability tests with two users, I categorized notes into four themes: behavior, positive interaction, pain points, and suggestions. I also considered timestamps, facial expressions, and context to create a user-centric design.

First step of note-taking is writing everything down on paper.

A digital note-taking PDF spread: Step two involves filling a table and categorizing into four themes, with dots serving as affordances indicating theme locations on the screen.

Key findings and insights

Most common options are missed by forehand

Preferred options at the start: breakfast, pay at arrival, and free cancellation

User is lost in the process

Overall visibility is crucial. Users need to know their progress, options, choices, and costs. For instance, a graphical calendar with daily rates can help improve understanding.

User is looking for reviews to base decision

Reviews are crucial for decision-making and trust-building.

Pictures are a great first impression

Photos significantly impact the experience, enhancing trust when they align with the story or expectation. Fewer photos can make users feel the hotel is hiding something. The room detail page on this website differs in quality from the website's introduction.

Visual elements

Visual elements greatly assist users and are expected (e.g., calendar, map).

Cognitive overload

Excessive options, scrolling, navigation, and filters on the screen cause user frustration. Users prefer clarity over overwhelming choices.

Software should make you feel safe

The software/website lacks a summary, causing user confidence issues due to a lack of process tracking.

Interruption of the flow

An interruption of the flow (pain point), creates an undercurrent in the whole process.

Technical issues

Page loading speed significantly affects user patience and process completion.

Best deal, but not in your face

Users seek the best deal: luxury at a good price.

Affinity Diagram

My recent UX design project utilized an affinity diagram to categorize user research data, prioritize insights, and develop a user-centric design. It demonstrates my proficiency in user research and affinity diagram technique for impactful UX solutions.

Collaborative Insights: Navigating the Affinity Diagram Process. Partnering up in an engaging workshop to structure information and map paths of understanding.

View Miroboard

The post-collaboration Miro board captures our harmonized tapestry of insights and interconnections.

A Glimpse into One of the Miro Board Pages

Things To
Consider And
To Structure

During my journey, I discovered various insights, stumbled upon questions, and encountered diverse organizational approaches. Intriguing perspectives emerged, including the impact of COVID policies and how personality manifests during research.

Customer Journey / Empathy map

After note-taking, I created a customer journey map/empathy map to gain deeper insights into user behavior, including flow, goals, emotions, thoughts, steps, and phases.

Phases: comparison, decision, and purchase

Our customer journey map reveals ways to improve decision-making, comparison, and purchase phases, resulting in an enhanced website user experience and flow.

These findings revealed user pain points and areas needing improvement for an enhanced assistance plan overview experience.

Design
__

Flow Diagram

After comprehensively understanding the customer journey through our detailed map, we created a flow diagram. It visually represents the user experience, mapping steps, interactions, and decision points in the system.

Wireframe
sketches

Wireframes are UX blueprints, mapping interactions and user flows dynamically. Yellow highlights denote interaction hotspots, bringing the user journey to life in my sketches.

New-Drawing-2-Copy-4-Copy-Copy-Copy_concept-2

New-Drawing-2-Copy-4-Copy-Copy-Copy_concept

Mid-Fidelity
Prototype

The goal was a user-centric platform simplifying hotel bookings with an intuitive, seamless experience. I used a structured approach, conducting research, creating journey maps, and applying UX techniques for a user-friendly, visually appealing solution.

Cher van Tol — UX Designer with
a multidisciplinary background

Based in The Hague
E. hello@chervantol.nl

Hotel Booking Website__

Design Process __