Suran TierneyAbout

UX Design & Research
Solo Project
 —  
2023UX Case Study — Hotel Booking ProcessAs part of a diploma project with the UX Design Institute, a website was created to provide a user-friendly online booking experience for a new hotel client. The focus was on simplifying the hotel booking process. Utilized the full UX process, including research, analysis, design, prototyping, and wireframing. Created a clickable prototype for user testing and detailed wireframes to enhance design quality. Utilized insights from industry research to guide design choices and enhance user experience. 

All aspects of this project, including research and UX design, have been completed independently. The project is research-based, with a focus on product usability. In a real-world scenario, it would typically transition to UI designers and then developers.  

(This project does not reflect a real-world scenario and is subject to limitations such as course requirements and budget constraints.) 


Research
 —  
Competitive benchmarking  
Online survey  
Usability testingCompetitive benchmarking
This project highlights the importance of research in UX design, emphasizing the need to base design decisions on research insights. It discusses two main research methods: quantitative, focusing on measurable data like numbers, and qualitative, which involves techniques such as surveys and usability tests. 

Assessments were conducted on four major hotel booking websites—The Marker, Flannerys Hotel, Booking.com, and Trivago—to gain insights into their usability. This project aimed to analyze leading websites, identify conventions for emulation, and highlight best implementation practices.

(Treating competitive benchmarking as an assumption could have led to misguided design decisions. It was essential to validate assumptions with thorough research for more accurate insights.)


Research
 —  
Competitive Benchmarking  
Online Survey  
Usability TestingOnline Survey
An online survey investigated user behaviors, needs, and goals, combining quantitative and qualitative data to determine objectives, tasks, desired features, pain points, and navigation patterns on hotel booking websites and apps.

Key findings: 

  • Users highlighted free cancellation as a top aspect of their booking experience.
  • Users frequently come across misleading price information.
  • Users seek a clearer hierarchy of information.



Research
 —  
Competitive Benchmarking  
Online Survey  
Usability TestingUsability Testing
An independent usability test was conducted on Shelbourne and Flannery's hotels, alongside a review of previous tests on Barceló and The Doyle Collection. The study included three participants and assessed four hotel websites in total.

These tests observed user interactions with the websites, identifying thought processes, actions, and areas of difficulty during booking. Before the tests, detailed interviews were conducted to understand users' goals, past booking experiences, and common difficulties they face.

Key findings: 

  • Users want an easier way to filter their search criteria.
  • Add-ons are difficult to find and unclear button headings cause confusion.
  • Certain features can be confusing and aren't explained properly.
  • Payment details lack clarity.


Analysis 
 —
Affinity Diagram 
Customer Journey Map 

Affinity Diagram  
Through the integration of research methods such as surveys, competitive benchmarking, and usability testing, the triangulation approach is employed to ensure accuracy and confidence in the results. This comprehensive method facilitates the results of patterns and common findings.

Organizing all the research data into an affinity diagram aids in structuring the unstructured data. 
Groups identified from the findings included: 

  • Pain points (i.e., Misunderstanding/ Misleading UI)
  • CTA Button 
  • Reviews
  • Filter
  • Calendar Selection
  • Search Bar
  • Price (room rates, add-ons, extras)
  • Hotel offers/ packages
  • Room Summary 
  • Cancellation Feature/ Payment

(During the process, patterns and potential solutions began to emerge, many of which could be seamlessly integrated during the design phase.)

Analysis conclusion: 

  • The structure and flow should be streamlined and simplified. 
  • Relevant and essential information must be displayed to users. 
  • Features or add-ons should be thoroughly explained if included. 
  • There should be no ambiguity regarding the rooms cost.



Analysis
 —
Affinity Diagram 
Customer Journey Map  

Customer Journey Map  
After collecting all data, each step of the user's booking journey was reviewed to identify potential improvements. Each stage was examined for user goals, behaviors, positives, and pain points. Usability test quotes provided additional insights. 

Findings: 

  • Users encountered issues with various aspects of the site, such as the room selection, room page, add-ons, and checkout. 

Quotes:

  • “I didn’t see anything about paying on arrival or upfront”
  • “...because I wouldn’t bother going thrrough all this hassle, unless it was free cancellations.”


These areas should be prioritized in the hotel booking process design based on the revealed findings. 



Research and Analysis 
 —
Summary Results


Navigation confusion and booking uncertainty: After collecting all data, users encountered challenges with navigation, struggling to find the information they needed and adjust dates and details easily. They also expressed feelings of uncertainty while completing bookings

Unclear descriptions and CTAs: Descriptions and call-to-action (CTA) labels contribute to user confusion and uncertainty during the booking process, potentially hindering their decision-making.

These challenges influenced design decisions focused on enhancing the hotel booking experience.

Design 
 —
Flow Diagram 
Interaction Design - Sketches 
Medium Fidelity Prototype 
Wireframes
Flow Diagram 
In the design stage, the focus was on mapping out the user's journey through the site, starting from the homepage and ending at checkout. Efforts were made to simplify the flow while addressing the pain points identified in previous projects. 

Approaches to meeting user needs:

  • Introducing cancellation options earlier in the process. 
  • Improving access with add-ons by simplifying the process. 

Design
 —
Flow Diagram 
Interaction Design - Sketches 
Medium Fidelity Prototype 
Wireframes 
Interaction Design - Sketches  
Once the user flow was established, the next step was to create sketches. These sketches were rough outlines of how the hotel booking website would look and function. Considering user goals, behaviors, and pain points identified during research. After several attempts, the final sketches were selected. 

Improving the design involved:

  • Adding cancellation options to the room selection page earlier in the process, along with displaying any associated price differences.
  • Simplifying the add-ons process by offering it before checkout, with the option to complete it later.
  • Implementing a clear summary booking sidebar alongside the add-on/payment process pages.
  • Providing a transparent breakdown of prices, rooms, and any additional add-ons. 
  • Ensuring information is clear and concise, especially regarding the cancellation policy and prices.
  • Use clear and transparent wording on buttons and fields. 



Design
 —
Flow Diagram 
Interaction Design - Sketches 
Medium Fidelity Prototype 
Wireframes

Medium Fidelity Prototype The next stage in the process involved prototyping. Once the interaction design was satisfactory, the process began. A medium to high fidelity prototype was chosen because of its ability to convey richer interactions from the user and gather more data and insights. The design underwent further user testing to validate or identify flaws.

Clarity and essential information were crucial aspects of this prototype.
 

(N.B. As this is a prototype, not all prototypes are interactable, however hints are given if needed. It is also important to note that this has been designed with UX in mind and in the real world, the UI would need some tweaking.)


Design
—
Flow Diagram 
Interaction Design - Sketches 
Medium Fidelity Prototype 
Wireframes 
Wireframes The final stage of the UX process involves creating high-quality medium fidelity wireframes for handover documentation intended for developers, and sometimes for UI designers as well. All pages, components, states, and interactions must be thoroughly explained to prevent any guesswork. Below are the final wireframes for hotel booking process.




Project Outcomes
—
 Overall, enhancing the hotel booking experience entailed reimagining the current design to better meet user needs and ensure successful bookings, instilling confidence in their choices. This included prioritizing the early placement of the cancellation policy and streamlining the add-ons process. Clear and concise information aimed to minimize user confusion and streamline task completion, ultimately reducing booking time. These interaction patterns exemplify enhancements to the booking experience, fostering user enjoyment and confidence in their decisions.

However, clearer descriptions in the add-ons tab could have helped users proceed with or skip add-ons more effectively. Moving forward, further iterations on wording will contribute to a smoother experience.

In real-world scenarios, improving the project involves conducting additional usability testing and gathering user feedback to continuously refine the design. This iterative process ensures ongoing improvements based on authentic user experiences. Allocating more resources for additional user research would provide deeper insights. Remaining informed about emerging design trends and communicating clearly with stakeholders ensures alignment between business goals and user needs for success.