CASE STUDY - SNACK SHACK

The Snack Shack App is a fictional mobile app that allows individuals and families to pre-order curated beach foods and snacks by filtering for allergens and children’s meal portions.

Mockup screens of Snack Shack app screens.

My goal as UX Designer for this app project (guided by the Google UX course) was to design a food ordering app that would allow users to easily pre-order food at the beach and filter out specific food allergens and child-sized portions for ease of sharing.

Responsibilities

Success Metrics

Ensure users:

User Research

Interviews were conducted by empathizing with Google-generated users and user insights were drawn from the information collected. One user group of focus were busy parents who were seeking out convenient ways to order food for their families while spending time outdoors.

​Research showed that parents would benefit from child-sized portions as an option for food items, a translation feature for users whose main language isn’t English, and an app that is seamless and easy to use with minimal roadblocks.

Jordan Gill persona; raising my kids and serving my community

Problem Statement

Jordan is a busy, working dad who needs a reliable way to pre-order food for children with dietary restrictions because he wants to enjoy family time without worrying about allergies.

Pain Points

1

Relevant Options

Mobile app menus lack diversity in portion size for diverse needs of users (e.g. children).

2

Language Barrier

English slang can be a barrier for EAL users to understand.


3

Data Input

Mobile apps can be cumbersome and tedious to use.


4

Dietary Needs

Dietary restrictions cannot always be noted on orders.


User Journey Map

As a busy parent, Jordan’s goals are to use a mobile app to easily order child-appropriate sized meals for his children and note dietary restrictions.

User journey map for Jordan describing his user journey as he orders food at the beach.

One improvement opportunitiy could be: in-app map could provide accessible navigation markers for strollers and young children.

Paper Wireframes

During ideation, storyboards and paper wireframes were quickly sketched to develop ideas for the menu screen. Stars indicated chosen elements to use in the refined wireframe. A filter feature and card deck style were selected to optimize ease of browsing for users.

Paper wireframes of menu screen for beachside snack app.

Digital Wireframes

Allergen Filter

Based on user research, one goal was for users to easily filter out food allergens and find child-sized meals. A filter element with pop-up animation was designed to meet this need.

Cart

The cart screen allows users to review their purchase. Food items include allergen/child icons to reinforce they are filtered out of specific meals, or a meal is a child-sized portion.

Digital wireframes for allergen filter and cart screens for Snack Shack app.

Usability Study Findings

Two usability studies were conducted. After Round 1, changes and adjustments were made and a high-fidelity prototype was tested for Round 2.

Round 1 Findings

Round 2 Findings

Mockups after Usability Study 1

Usability studies revealed users needed more clarity around the Translation icon/feature. Many users looked for the feature under profile so it was added there as a secondary location. 

The icon was also switched to include a Translate label and a more globally-recognized translation icon as users didn’t recognize it during the study.

Before and after usability study screens for Language Setting overlay for Snack Shack app.

Mockups after Usability Study 2

A number of insights developed from Usability Study 2 with the Order page. Users wanted the ability to remove items, to see the number of order items, and more pickup time options.

A scrollable date and time picker was added to the prototype.

Before and after usability screens for Snack Shack Cart screen showing improvements made.

Cart was changed to "order" as restaurants typically don't use carts.

Key Mockups

High-fidelity screens of the main user flow: filtering food offerings by allergens and completing an order.

Key mockup screens for Snack Shack showing main user flow.

High-Fidelity Prototype

The final high-fidelity prototype provides a more comprehensive user flow with expanded translation and allergen features, more order screen options, and an address added to the map (one user wanted to see an actual address).

High-fidelity prototype screens showing connection lines for Snack Shack app.
High-fidelity prototype of Snack Shack app user flow showing filter feature.

Snack Shack user flow with filter feature.

Accessibility Considerations

Language Translation

A language translation feature was added to include more users. This feature was placed in 2 locations to improve access for those who prefer to use apps in a different language.

Colour Contrast

Colour contrast was carefully considered to ensure icons, text and elements would provide enough contrast to be legible for
as many users as possible.

Animation Speed

Animations were designed within the 150-500 millisecond timing guidelines to avoid distraction or confusion.

Takeaways

As a preliminary iteration, basic goals have been addressed through a simple interface, and ability to filter by allergens/child portions.

“Kid’s features do make a difference when you’re a parent. Portion sizes are still good and reasonably priced. This would entice parents to make return trips.” - Ryan, usability study participant (father of young children)

​It was really valuable to conduct usability studies to garner feedback and insights from users, particularly around the translation feature. Including a feature like this would improve access for certain language speakers. Hearing from users who have food allergies or who have used other food-ordering apps provided valuable insights and recommendations each iteration stage.

Next Steps