UX/UI Case Study: SNACKER Digital Menu - Roland Richard Toth (rolipok.design) User experience design, User interface design, Graphics

CASe STUDY: SNACKER

CASE STUDY

SNACKER

A digital menu for all screens to let people order easy and fast during their relaxation at the pool bar.

Capstone project — Google UX design course

Role

UX/UI design

Duration

July, 2022

Sector

Hospitality, Wellness, Online shopping

Background

The Poolside Snacker (TPS) is a fictional* brand and shop in the UK, it was created as part of my Google UX design course as my second project. I was tasked to create a fully responsive website, what serves a digital menu for a poolside snack bar.

*TPS has been created as a result of a made up snack bar. Some information has been made up strictly for this project, some information convey real data. Hyperlinks are not linked to existing websites and applications.

The mission

My task was during this project work (Google UX/UI course) that to design a device agnostic digital menu for a (non-real) poolside snack shop.

The problem:

Guests at a poolside bar usually do not want their relaxation disturbed. They do not like queueing for a simple drink or a sandwich. They need a simple and easy to use digital platform to place orders.

As there are many digital menus on the market already for more larger bars, shops, and restaurants, there were not too many unanswered questions, I just had to jump in to the work.

The goal:

I tried put my prime focus on responsivity to make sure the menu stays easy to browse on all screen sizes. As this menu is for a small snack bar, the other main goal was that to minimize complexity and maximize the average speed of user flow for a single online order.

My responsibilities:

Research
‍
Wireframing

Prototyping
‍
Conducting usability studies
‍
Accounting for accessibility
‍
Information architecture

Iterations on design

Responsive design

DESIGN PROCESS

Empathise

RESEARCH

My user research was aiming to help creating simple and user friendly digital menu. During the study I was trying to understand the most important and necessary elements needed to be included in the design, also to see and analyse the most common paint points my target user group experiences using similar digital menus and online ordering platforms .

The biggest part of my research was conducted online, reading up to date statistics, reviews and online forums. I have gathered the most practical and useful information by reading countless reviews over similar products I intended to design. It was very important to filter the research material considering the specific notes of the business this menu is being designed for.

Insights on initial research

pain points on placing an online order

One important pain point is that users often place an order for something what is not on stock at that moment in the restaurant. The user feels he or she lost time and gets disappointed.

Possible pain point on the client (user) and server side as well, when information needs to be repeated, as simply people just forget things. Following is a good example:

Client (user) : “Can I have the same salad I had yesterday? I don`t remember it’s name” server (e.g. waiter) : “I’m sorry Sir, I did not work yesterday, I could not tell what you had.”

Many of the digital menu boards are overfull with information. Users would not like to feel wasting time with an order, hardly finding what they want or taking up much of their time when they try to pay online.

DESIGN PROCESS

Define & Ideate

UNDERSTANDING THE USER

Persona

Name: Maria T.

Age: 37
Education: University of Leeds -
Research and Innovation
Hometown: Leeds, UK
Family: single
Occupation: financial researcher

‍Goals:
‍have simple and easy to browse digital menu on hand for quick orders

‍‍Frustrations:
‍she doesn't like to browse long over a menu, she likes quick and up to date solutions for online payments

Problem statement:

Maria is a financial researcher, working online during her travels, who needs an easy to browse and use digital menu for ordering because she wants to stay time efficient.

User journey

ACTION

TASK LIST

FEELING ADJECTIVE

IMPROVEMENT OPPORTUNITIES

find a quiet spot around the pool/wellness area

- look around for poolside bars
- identify the one with quiet spots

- excited

- better advertise of the bar with more signs

book a lounge

- contact the bar
- book a nice spot

- hopeful
- satisfied

- make it possible to book online, not just in person or over the phone

find their online menu

- take my booked spot and check their online menu
- check ordering options and platform availabilities (mobile/tablet laptop)

- confused
- excited

- more digital displays with the menu

- try to create an online account for ordering

- overwhelmed
- relieved

- make the registration site quick and easy to complete

place an order in short time

- check how fast and difficult it is to place an online order
- order a drink and some snack

- relieved
- curious

- make simple, bald menus with product photos

pay simple, online

- pay with Paypal if possible

- anxious
- satisfied

- make more payment options
- indicate clearly the final sum and the "payment done" status
- make a clear system/map for marking tables and spots for serving the online order

Information architecture

The menu has a hierarchical navigation system, although more specifically it is the mixture of that and the matrix navigation, as I wanted to make sure that from every page the user easily can jump to other categories without having to go back the homepage first.

Accessibility considerations

Language: I consider to make one more version of the menu in Spanish language

Also importantly, planning to make the menu available for keyboard navigation and design the content for screen reader accessibility

DESIGN PROCESS

Prototype

DESIGN

Ideation on paper

Digital wireframes, low-fid prototypes

Desktop initial version - basic user flow:

Main page > Register/Login > Main Page > Snakcs > Select > Select amount > Confirm > Go to checkout

DESIGN PROCESS

Test & Reiterate

USABILITY STUDY

Unmoderated - Online - 5 participants

Participants were asked to accomplish 2 tasks. The main task was to complete the main user flow above.
After gathering and organising observations, the most important findings are:

3 out of 5 participants was missing additional navigation buttons
3 out of 5 participants had problem with finding a product
2 out of 5 participants experienced difficulties during the checkout process

I added the extra navigation buttons:

MOCKUPS

Mobile screens

Mockups for larger screens

CONCLUSIONS

What I learned:

I have learned again the importance of the usability study, and more, the importance of it`s correct analysis how much able to guide the design towards a great solution of accessibility, usability, usefulness.

Next steps:

If there was more time I would:

conduct more usability studies, reiterate on the design based on the insights
improve the menu with filters / additional categories, so the user can find quicker certain meals, e.g. vegetarian, sugar free, nut free.

Impact:

This is a menu for a non existing snack bar, with the hope that the design can be used for a similar, existing project.

THANK YOU FOR YOUR TIME!

Interested in working with me?

Let's connect: rolipok@icloud.com

CASe STUDY: SNACKER