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.
My goal as UX Designer for this app project 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
Empathize with users
Conduct competitive audit
Wireframing
Prototyping
Conduct usability test
Synthesize information
Low and high-fidelity mockups
Iterate on designs
Success Metrics
Ensure users:
experience an app that is easy to navigate
are able to easily filter foods by allergens/child-sized portions
are offered an accessible language translation feature
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.
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.
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.
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.
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
Users need more written/visual cues around filters and how they work.
More clarity around the Language icon with text and/or the same option in an alternate location would benefit users.
More clarifying properties around navigation and the grey boxes would enhance the workflow of the app.
Round 2 Findings
Users need expanded features for the order list and pick-up times.
App would benefit from more comprehensive branding and copy.
Best location for translation feature depends on multiple factors.
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.
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.
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.
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).
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
App could be developed further to offer an audio/tactile alert to inform users when their food is ready for pick-up.
Feedback prompt could be built into the app to elicit user feedback around any challenges they might be encountering.
Some users questioned if the first screen was necessary. Further testing could indicate whether or not the home screen is a necessary screen.