Tha Dogg House

Creating the experience that represents the heart of the community and stays as a manifesto of it

After the biggest challenge that all the hospitality industry had to face during the Government restrictions, on 15 April 2021 a new idea was taking place in Fradshom, Cheshier. 

I was called to create a new website for the new Bar, which that born as a solution to stay in business to one of the iconic social/art hub pub in town.

 

Logo THADOGGHOUSE.png

Tha’ Dogg House is Frodsham’s first outside venue providing street food, drinks, and vibes!

The challenge was a perfect storm for a UX research case, I was digging into the emotional behavior for socializing again after a long period of time.

Case of Study

New bar wants to create a website to have a presence online.

Simple

Accessible

Understanding of their target users.

Task

Design a new website for desktop.

Informative and interactive.

Goal 

Design and build a online website that can be tested with users.

The tools

Survey Monkey

Figma

Miro

WIX.COM

Duration

10 days

My Role

UX Researcher / UX Designer. Web desing

The Process
UX Desing Process

Research

Benchmark analysis 

Interviews

Online Survey

Analysis 

Affinity diagram

Customer Journey Map

Design

Low-Fi sketches

User Flow/booking flow

Prototyping 

Bring it to life

Web Design

Design Specifications

Web design 

The Challenge

Identify the motivations of the customers to go bar to the public venues after long periods of lockdown. How to integrate the soul of the community with a new concept bar.

I looked at how other bars, top of the industry, solve this problem (benchmark), I performed usability tests, applied Online surveys, and master the note-taking techniques for this research case.

I used that information to focus my research and ultimately improve the quality of my designs.

Goal #1: Design and build a clickable prototype that can be tested with users, along with a detailed set of wireframes.

Goal #2: Create a design that has the intention of resolve the issues around the pain points identified in the research and analysis.

Project Goals
 
Research

Learning about our customers

Bar Entrance
Benchmark analysis.png

BENCHMARK ANALYSIS

Top leaders of the industry, Benchmark analysis:

Survey TDH.png

ONLINE SURVEY

50 Users respond to an online survey

USABILITY TEST.png

USABILITY TEST

3 Usability test / Note-taking

BENCHMARK ANALYSIS

What are the best practices of the industry?

As a starting point, I reviewed Hotels-related websites to see what they’re doing well that I can emulate when it comes to designing my own room booking process. Most of the websites were Hotels, but I was also interested to see if I can learn anything from other types of booking platforms, such as Booking.com.

During my benchmark research, I came to realise that for a relatively simple task as finding and booking a room, many different solutions exist across Hotels websites. This made me wonder how users are interacting with the different booking experiences and I kicked off my user research to understand their needs and pain points better.

Survey.jpg
Survey TDH.png

ONLINE SURVEY

How do you feel about visiting a pub just after the lockdown?

To learn more about the goals of people that use hotels websites and apps, I created an online survey. Ideally, I would have placed this survey on a Hotels website to intercept people as they’re using the software. In this case, I sent the survey to friends and colleagues instead (who have used an Hotel website within the past 6 months).

Key findings:

  • The primary user goal is to research book a room, followed by check rates and the hotel information.

  • Value for money is the most important factor when booking a room

  • Users want to find clear information about the hotel and the conditions.

Usability Test.png

INTERVIEWS & USABILITY TESTS

Confusion, distrust and mistakes -
the common themes of booking a room

To dive deeper into understanding hotels customers’ mental models and behaviours, I conducted in-depth user interviews, followed by comparative usability testing sessions. During the sessions, users completed the same room booking tasks on two different Hotel websites.

It was surprising to see that none of the participants had a straightforward booking experience. Even people who are frequent travelers struggled with some of the steps along the way. Although their pain points and frustrations were different, they were all related to selecting the right type of room and fare type and booking conditions.

Data from the different research sources

 

Analysis

Key insights form the researched data

Usability Test (data)
Benchmark   (data)
Survey (data)
Note Taking (data)
Affinity diagrams
Journey Map
Identify Patterns

"A perfect formulation of the problem is already half of its solution" David Hilbert

AFFINITY DIAGRAM 

Screen Shot 2021-08-18 at 15.12.56.png
Brainstorming ideas, analyzing the data, and driving consensus. 

Understanding the problem
through collaborative analysis

Having a good amount of data from my user research allowed me to collaborate with a fellow UX designer to get to the root of my findings. During the affinity diagram session, we worked together to put structure on the large volume of qualitative data from my research.

On this board, we’ve gathered the goals and mental models of users, as well as their behaviors, pain points, and positive feedback. In order to understand the directions I would need to take with my design, we arranged the data in categories that reflect each step a user would usually take during a booking process:

  • Motivations

  • Planning

  • Browsing site

  • Hotel INformation

  • Evaluation

  • Selection Process

  • Add On's

  • Payment

CUSTOMER JOURNEY MAP

Leaks in a reservoir of goodwill

Building on the affinity diagram findings, I created a user journey map to put even more structure on my research data. This allowed me to visualize the problem areas of the existing user journey:

  • Understanding the Hotel information can be too complicated

  • Selecting a room option can be confusing

  • Add Onz can be overwhelming

 

It became clear to me that users are expecting to see a clear answer to their search, but instead, they are presented with too much information and too many options to consider which causes confusion and frustration.

During the room selection process, their primary goal is to find the best value for money and that they are not missing any opportunity. Users want to feel in control.

The Information Architecture is key to help the users to reach the information they are looking for quickly and navigate them smoothly through the process.

Any Add On or extras should be relevant to the user and well described. 

Customer Journey map final.jpg

With a customer journey map, we highlight aspects of the journey that need to be fixed as a priority

The design process will incorporate patterns of positive experiences and resolve areas where pain points were identified.
Any interaction of users with the design must complete a task or micro task that helps them achieve their goals and contemplate their behavior.

Key Insights

 

GOALS
 

​PROCESS FLOW 

  • Not relevant results in search

  • Up-Selling feeling, extra steps

  • No Standard payment flow

SCREEN DESIGN 

  • Too much scrolling, not easy to find information

  • No clear booking cancellation policies

  • Too many options without a clear difference 

  • Personal information concerns 

POSITIVE EXPERIENCES

PROCESS FLOW

  • Quick and Easy Process

  • Be in control of the process

SCREEN DESIGN 

  • Clear booking condition from the start

  • Only relevant information display

  • Visual process & HD Images

  • Ratings / Reviews

  • Deals = Value for money

PAIN POINTS
 

​PROCESS FLOW 

  • Not relevant results in search

  • Up-Selling feeling, extra steps

  • No Standard payment flow

​SCREEN DESIGN 

  • Too much scrolling, not easy to find information

  • No clear booking cancellation policies

  • Too many options without a clear difference 

  • Personal information concerns 

BEHAVIOUR 

PROCESS FLOW

  • Desktop flow is prefered vs mobile 

  • Most users will discuss / compared and/or share the information before booking.

 

SCREEN DESIGN 

  • Enough images to get a good understanding of the option.

 

Design  

User Flow & Scketches (Low-Fi prototyps) 

User Flow
Primary USE CASE: User booking a room

Before I design screens,I have to step back and consider the structure of your software and how you want users to flow through it. 

flow low
 

As I started to define the low-fi user flow for my primary use case, It became clear that I need to simplify the information required in each step of the user, have a clear proposal and statutes of each screen in the process.

Users want to feel in control, have all the relevant information telling a story so each step should be predictable and perceivable.

OBJECTIVE

 

To minimize the number of sreens the user needs to go through in the process and utilize the different "states" of each sreen (e.g. payment information and contact information in the same Payment Page)

Use of smart defaults (e.g.  1 room, 2 guest) to minimize the amount of actions and a quicker flow

Digital affordances like "one calendar displayed", that stays open until both dates (arrival/departure) are selected to predict the next step.

Linear flow with the use of constraints that limit the alternatives of modifying data, such as slecting dates after choosing the room. 

Flowchart_edited.jpg
Sketches / Low-Fi Prototypes

With the primary user flow defined,I started to capture my ideas by sketching low-fidelity screens
using pen and paper.

prototype labels

By the use of paper prototyping technique we can analyze and determine:

  • Key user interactions such as pop-up windows, drop-down menus, calendar display. It became very useful to determine the right size of the calendar, after many iterations.

  • Elevations and shadows. Shadows show surface edges, surface overlap, and the degree of elevation.

  • Opacity shows surface edges and overlap, but not the degree of elevation.

 

Prototyping

Bringing sketches to life

Once I had a visual direction for the website layout, I started to add more details and precisions to the sketches by turning them into mid-fidelity screens. On these screens, I included elements that directly address user goals, needs, frustrations, while incorporating common design patterns seen on other hotels websites.