top of page
Screenshot 2023-09-04 194321.png
pub burger.png
pub pay.png

The Grey Fox

ROLE: UX Designer & Researcher

TYPE: Conceptual - course project

DURATION: June 2023 - August 2023

The Product

The brief for this project was to design an "ordering app for a pub". I worked independently and used a user-centric, goal-oriented design methodology to create a mobile app to make a more flexible pub-going experience and maximise sociability.

Challenges

1)

2)

3)

Eliminate time waiting at the bar and more  time socialising.

Make finding appropriate items easier to find for people with dietary restrictions.

Provide a seamless and straightfoward ordering and purchasing experience.

Research

To understand the app I wanted to develop and the people I was designing for, I needed to conduct some research. Qualitative research was the primary data source, consisting of competitive analysis, user interviews and usability studies, which greatly influenced the construction of my personas. I started by asking myself some research questions.

What is the product and who is it for?

What do my primary users need?

How do competitors stand out on the market?

What does a typical user journey look like?

How do users feel about about my competitors products?

As a UX designer in training my research resources were limited when it came to arranging interviews. As a result, I had to employ my personal network to help me gain insights into my target demographic. In addition, user reviews for similar products further illuminated behaviours, motivations and grievances my target demographic has with my competitors, which helped me build my personas.

My target demographic has these characteristics:

  • Anyone at or over the legal drinking age

  • People who go to the pub at least three times a month

While the demographic may seem broad, it helps to promote inclusivity, reduce bias and is representative of the likely user of the app. In reality, an app like this would aim to appeal to as many relevant users as possible to create business.

A user journey map was created to understand and empathise with the motivations and issues when going to the pub. This allowed me to highlight areas of that experience I could improve and channel that into creating my personas. The central purpose of the pub is to socialise. It has been for hundreds of years. I want my app to reduce the friction between the pub and the people you really want to be with.

image.png

Personas

Primary

Name: Danny

Age: 23

Occupation: Student/Waiter

Danny is a busy student who loves to socialise with his friends in the pub after a long day studying for his final exams. The new Grey Fox app will allow him to spend more time listening to his friend's stories and less time waiting at the busy bar.

"Pubs are a great way of winding down after a long day in the library."

Secondary

Name: Sally

Age: 62

Occupation: Receptionist

For Sally, family comes first. This is why she goes to the Grey Fox for their delicious Sunday lunches with her husband and two daughters. She has to adjust her meals due to her coeliac disease and her daughter's dietary restrictions. She would like an easier way to order so she doesn't have to remember everything at the bar.

"Sometimes good food and good company are all you need."

Competitive Analysis

I looked at several companies with a mixture of both direct and indirect competitors in my research, focusing on food and beverage service. The Grey Fox pub app has the opportunity to service a gap in the market that my competitors do not.

The majority of the features found in these products were similar, but the main differences were:

  • Too many screens vs. simplified interaction

  • Indication of unavailable items vs. misleading availability

  • Emphasis on helpful nutritional/allergen information vs. lack thereof

  • Order customisation vs. lack thereof

A key factor that can benefit my design is that I am designing for a single local pub, whilst my competitors are all nationwide franchises. This can decrease the scope of the design by allowing me to create a more bespoke and simplified user experience. For example, not having to choose a specific pub from somewhere in the country.

spoons.png
mcds.png
gk.png
mypub.png

Preparing the journey

I constructed a user flow of what the main user journey would look like when purchasing a drink. This illustrates ways users can interact with the product, as well as allowing us to explore navigation through the lens of user goals. It was imperative to include a table service feature to serve our primary personas' needs. Transparent nutritional/allergen information alongside order customisation fulfils the needs of my secondary user.

Pub user flow.png

Pen & paper

Pen and paper wireframes allow me to brainstorm ideas without the need for extreme detail. The low time and resource cost lets me focus on my creativity and rapid iteration.

Digital Wireframes

20230905_225508.jpg

After some pen-and-paper wireframes and reviewing what was necessary and what could be improved, I began a low-fidelity prototype plotting the same user journey as the previous user flow to nail the underlying UX before applying any visuals. This is my favourite part of the design process. This is where my ideas start to become tangible. While the project's focus is user-centric, I thought it would be beneficial to think a bit more about how the business could use the product. Hence introducing a small space to advertise events/news that may also be of interest to the user. This may help promote the social aspect of the pub. A rewards feature can also be seen as a unique value proposition to keep the drinks and customers flowing!

Lo Fi Wireframe.png

Iteration

I used this low-fi prototype to conduct unmoderated usability tests. Six participants were asked to run through six scenarios and were then prompted to answer a series of questions asking them their thoughts on the process. This should provide enough feedback to use in my next set of iterations. It was important not to take the feedback personally as it's all in service of the product.

I organised my research data in an affinity diagram, which I divided into three main themes that I could prioritise and improve on: Payment, Customisation and Navigation.

pub affinity.jpg
Payment.jpg

Payment

I found most users required more payment options and easier opportunities for future payments. For example, the ability to scan cards and the ability to save card details for future purchases.

Navigation

A hamburger menu was added instead of a horizontal navigation bar at the bottom. This creates less clutter on the bottom of the page, highlighting the action buttons while maintaining multiple entries into the user flow.

navigation.jpg
Customise.jpg

Customisation

Adding filters and flexible customisation options was paramount to creating an experience everyone could enjoy, especially those with dietary requirements.

Hamburgers menu creates less clutter

Payment 1.png
Payment 2.png

More payment options

Faster payments

Customisation 1.png

Challenge 1

Eliminate unnecessary waiting 

Being able to order straight from your table is the primary use case for this product. Users no longer have to wait at a busy bar just for the bartender to choose the guy who shouts loudest. The table reservation feature also reduces the need to wait for one.

Challenge 2

Flexible customisation

People with dietary restrictions or picky taste buds now have the ultimate freedom to select how they want their food. Accessibility promotes better business and inclusion.

Challenge 3

Frictionless payment

The ability to scan cards allows for a rapid checkout. Saving the details promotes even faster subsequent purchases, squashing the barriers between the users and their orders.

imageedit_6_7521489093.gif
imageedit_1_2344492265.gif
imageedit_3_7031255347.gif
imageedit_1_8586171437.gif

While I think I have created a well-developed feature set with a balanced UI and the overall UX is smooth, admittedly, I think the aesthetics could use some more work. I do not come from a graphic design background, but while I can see if something doesn't look quite right, I'm unsure of the steps or tools needed to take it to the next level. I have tried to keep the colours neutral, using images and splashes of colour to highlight essential actions.

pub home.png
pub nav bar.png
pub beer.png
pub custom.png
pub reserve.png
pub drinks.png
pub basket.png
pub checkout.png

The Future

Were the app to be implemented in real life, it would be essential to analyse the business impact of the app; how many downloads does it have? Has it increased revenue?

I would also like to explore accessibility features such as screen reader compatibility, high contrast modes, colour-blind modes and customisable font settings.

Takeaways

While I am typically drawn to the wireframing and prototyping elements of the design process, I found the most crucial aspect of the process to be testing. This allowed me to see things from the user's perspective. It was a humbling experience. It's OK to not get everything right the first time around, especially if these mistakes lead to better solutions for the product and the user.

I had to keep reminding myself to keep designing for the personas I had created; they are my users, and I could not project what I wanted in a product onto my design. In addition, not using the personas would ultimately be a waste of time and resources.

Let's chat

Thank you for reaching out!

bottom of page