Modern Pub App Mockups

Modern Pub Usability Case Study

*This project was completed through the Google UX certificate program.

Role

UX/UI Designer

Duration

~60 hours

Tools

Figma, Miro

The goal

Design a menu and ordering app for a modern pub that allows users an easy and efficient way to order food when they otherwise wouldn’t have time to prepare or cook.

User research

Surveys were distributed to participants that ordered food online frequently, to people who were most likely to be the target audience for an app like this. All of these participants also considered themselves busy individuals who were often too tired to cook meals.

The user research was helpful in highlighting recurring pain points and frustrations users shared when ordering food through an app. It also pinpointed key features that would be helpful to users if they were included.

Survey questions:

Pain points:

1

No guest checkout option

Users are frustrated when they have to create an account to proceed with their order.

2

Lack of menu item pictures and descriptions

Users are disappointed and confused when there are no pictures of menu items.

3

Lack of payment options

Users want more payment options in addition to just paying with a credit card

Competitive audit

Red Barn Restaurant and Brewery was identified as a direct competitor as it is also a brewery/pub of similar size with the same target audience. The Curragh Irish Pub was also identified as a direct competitor because it also serves the same type of food, and also targets adults. Applebee’s was chosen as an indirect competitor since it serves the same type of American food and offers alcohol, but it appeals mostly to families.

Gaps

  • Require an account to complete a purchase
  • Two of the three competitors did not offer menu item (product) pictures
  • No benefits to creating an account
  • Lack of different payment options

Opportunities

  • Offer incentives for creating an account, such as perks or a loyalty program
  • Include a guest checkout option
  • Offer multiple payment options
  • Include images for menu items with descriptive text

Persona

Modern Pub Persona

Problem statement

Joshua is a busy working individual who needs an quick and simple way to order food because he doesn’t have time to prepare or cook meals after a long day.

User journey map

Modern Pub User Journey Map

Wireframes & low-fidelity prototype

View the prototype ⟶

Usability testing

Users were tested on the low-fi prototype to find out if they can quickly and easily complete orders or run into to any challenges when navigating through the app.

Methodology

Participants were all full-time employees who regularly order food online and are familiar with food ordering apps. Two males and three females, between the ages of 24 and 45.

Unmoderated virtual usability study, participants given introduction and instructions to view the prototype while completing prompts.

Research questions

  • Are users able to quickly and easily complete a food order?
  • Is there any part of the user flow where users get stuck or express frustrations with the app?
  • Is the ordering process difficult or confusing for users?
  • Are users able to understand how to view items in their cart and add/remove items?
  • Are there additional features the users would like to see?

Findings and themes

1

Users expected to see a tip option and delivery fee

"I would want a tipping option, especially for delivery since I want to be able to tip ahead of time and not at the door with the driver."

2

Users are confused about adding items to their cart versus editing

"I don't know why there would be an edit button, I don't know what that means." (Suggests the word customize)

3

Users want a way to add items to their favorites

"How would I favorite an item? I saw an option for favorites in the navigation but I can't find a way to do that on the page. That would be a feature I would like and use."

Affinity diagram

View larger in Miro ⟶

Modern Pub Affinity Diagram in Miro

Updated wirefames

Updated wireframe showing the tip feature added

Added a section on delivery fees and the option to tip in the checkout process

Updated wireframe showing the tip feature added

Added a customize button for each menu option next to a direct add to cart button

Updated wireframe showing the favorites feature added

Added the ability to favorite menu items and made it more prominent

Mockups & high-fidelity prototype

View the prototype ⟶

Conclusion

The high-fidelity prototype addresses the original user pain points, makes additions based on the findings from the usability study, and includes features users deemed important for a menu and ordering app.

Next steps

The app would need to be further fleshed out in terms of additional app features and sections such as the favorites feature as that was something deemed important by users. Additional user testing revolving around the newest iteration of the app would also be beneficial, as the design could be tested now too.

Quotes

"The checkout options kind of account for everything, I wouldn't change anything."

"It was very easy to navigate through the menu. I think the way it is laid out is the best way I have seen so far."

GIF of Modern Pub App User Flow