UX Design
Solving problems with user-centric designs
About me
Passionate about unraveling the psychology behind user behavior, and understanding what drives interaction.
Through research and a keen eye for user-centric solutions, I strive to create seamless experiences with every click, tap, and swipe.
“...user experience is what it feels like to use a product, system or service.”
A desktop-focused hotel booking site researched and prototyped for a diploma.
I've recently completed my Professional Diploma in UX Design with the UX Design Institute. This diploma, overseen by the Industry Advisory Council, and credit-rated by Glasgow Caledonian University.
The diploma takes the form of a start to finish UX project, entailing research, analysis, concept and design work, prototyping and handover.
For my project, I chose to develop a hotel-booking mobile-focused app.
The Problem
My task was to research and design a booking website or app for one of three industries: hotels, flights, or car rentals. I wanted to expand my experience and knowledge in desktop sites first and chose a hotel booking website.
I gathered research in these ways: competitive benchmarking and usability tests. This research was then analysed using an affinity diagram and a customer journey map.
The analysed data revealed pain points in two areas: the initial user search for hotels and the transparency of price breakdowns - in particular add-ons which was displayed late in the booking process.
The Solution
The final outcomes of this project were the creation of a high-fidelity interactive prototype for the desktop website and an annotated wireframe for handover.
My goals were to address the issues with the user search and the clarity of the booking price in the website.
For the search, I aimed to make the search filters simple and intuitive, ensuring the booking calendar aligned with existing mental models.
Regarding the clarity of hotel prices, I made this a prominent feature within the relevant elements using visual hierarchy and UI colour theory.
These two outcomes formed the 'design block' of the diploma, earning me a mark of 82% and positive feedback.
My Design Process
Competitive Benchmarking
My initial assignment was to research the market leaders in hotel booking. The project's brief required a comparison between two competitors. I chose to examine a market leader, Booking.com, and a lesser known site, lekkeslaap.co.za. I evaluated both websites based on four criteria: home page, search and results, hotel details, and booking form. My observations were categorized as 'good', 'bad', and 'expected'. The findings were then incorporated into the affinity diagram.
Case study - Hotel Booking Website
In my third research task, I was to observe usability testing on two existing desktop hotel booking sites to pinpoint potential pain points aiming to validate some of my earlier observations.
I received two pre-recorded usability tests of two different users that covered: Barcelo and The Doyle Collection.
The subsequent notes from these tests began to highlight additional user pain points:
-
Incorrect results from location searches
-
Unintuitive date selection process
-
Lack of clarity in pricing
All these findings were integrated into the affinity diagram.
Closer look at Pain Points
Main themes (not all) appearing after observing users testing website.
-
Confusing landing page - in particular search bar.
-
Search function related to specific options - finding a hotel near the beach with difficulty. “I’d have to read through them all”.
-
Hotel list - list of hotel options do not appear, rather one hotel only.
-
Room description - too much text to scroll through when reading room description. Especially finding specific info such as breakfast.
-
Add-on options show too late - after searching dates, selecting room options, breakfast only then shows up. User looked frustrated, preference for add-on options to show earlier.
-
Overall experience - “The breakfast after I clicked was a bit annoying” - “I wouldn’t have noticed the double bed until that (being prompted) which was a bit weird”.
-
Asked about what she expected to see: “Transportation, towels included or cleaning”.
"Would have liked to see check in and check out earlier."
Affinity Diagram after Useability Testing & Note Taking
Customer Journey Map
Journey Steps:
• Behaviors/Actions - what does the customer do. What information did they look for.
• Pain points - what does the customer want to achieve or avoid.
• Quotes - what they said.
• Mental Models - what the user expects to happen based on experience.
• Customer Feeling - what is the customer feeling.
Journey Categories:
• Searching Hotel
• The Room Search
• Location/Add-on
• Booking
User Journey
The initial task in the project's concept phase was to outline a high-level user flow for the new website.
This flow was selected based on insights from the competitive benchmark and usability tests, along with mental models identified during the analysis phase.
Once finalised, it served as the foundation for the 'sketching' portion of the course.
Wireframe
The subsequent task in the concept phase was to sketch the entire user flow from the previous stage. This step was aimed at quickly forming a clear idea of the layout for each screen state and iterating on the content noted in the flow diagram.
My primary focuses were the functionality of date selection in the calendar and maintaining clarity of price.
Sketching the screens in this manner enabled me to produce multiple iterations rapidly, providing a solid foundation for wireframing.
Prototype
The first task in the design phase of my diploma was to convert my sketches into high-fidelity wireframes and a prototype.
I chose to use Figma for this task due to its robust tools, functionality, and current prominence in the industry.
After completing the prototype, I conducted a usability test to determine if the main pain points had been addressed.
The user found the calendar easy to understand and use, and they also noted that the price was clear and straightforward throughout the process.
As part of the course, I was not required to develop the wireframes beyond a high-fidelity level.
Annotations
The final task in the design phase of my diploma project was to annotate my wireframe for handoff to a development team in a waterfall method.
I had several options for this task and chose to add comments directly to the Figma file, as this offered a more collaborative approach.
Conclusions
The goals for this project and the diploma were for me to learn both the theory and practice of user experience and successfully apply them to a comprehensive case study. At each stage, my work was reviewed by UX professionals to ensure I was ready to move forward.
I learned how to conduct competitive benchmarks, user interviews, and usability tests. Additionally, I learned to analyse research data using affinity diagrams, customer journey maps, and empathy maps. From this analysed data, I drew conclusions to create user flow diagrams, preliminary sketches, annotated wireframes, and prototypes.
For the design phase of the course (prototype and annotated wireframe), I received a mark of 82% and the following comments:
"Nice work on applying the principle of progressive disclosure throughout. Screen Layout + Design: Excellent work! Very professional looking and well considered screen layout. Your design is logical with clear visual hierarchy."