SunnySide
Beachside Snack App
Project Overview
SunnySide is a to-go order app for a beachside snack shack in Honolulu, HI, which helps hungry beachgoers quickly and easily order and pick up tasty and nutritious beach-side snacks & drinks, so they can get back to playing in the sun.
Project Duration:
8 months
The Product:
The Problem
There are few nutritious & tasty snack options available beach-side.
Beachgoers want to re-fuel in a healthy way (but splurge a little too) without standing in line, so they can keep enjoying their fun at the beach!
The Goal
To create an easy-to-use app that allows beachgoers to order and pick up delicious & nutritious options, so their fun in the sun is not interrupted.
My Role:
UX Researcher & Designer
Responsibilities
User Research
Wireframing
Prototyping
User Testing
Understanding the User
User Research
Personas
Problem Statements
User Journey Maps
Primary Research: User Research Summary
I conducted qualitative research interviewing 5 participants, in order to understand the problems beachgoers face.
I anticipated that users would be interested in junk food and alcoholic beverages, but quickly discovered that target users need:
-
Refreshing & delicious food and drink items to fuel, hydrate, and entice the senses
-
Local specialties, responsibly sourced items, “claims” and nutritional facts
-
A seamless and intuitive ordering experience
User Research: Pain Points
1
Nutritious Offerings
Users care about identifiers such as nutritional content, local and local specialty food, responsible sourcing, and claims like Vegan, Gluten Free, etc.
2
Intuitive Design
Design must be simple and easy to use with an easy
check-out process
3
Accessibility
Design must be accessible
4
Clarity
Pick-up instructions must be clear
User Personas Example: Alizay
Problem Statement
Alizay is a health-minded and tech savvy user
who needs nutritious options because it’s important to them to eat mindfully.
User Journey Map
Alizay’s goals are to find healthy food options, experience a smooth ordering process, find an accessible walkable path and make sure her order is correct at pick up.
Understanding
the Landscape
Competative Audit
Primary Research: Competitive Audit Summary
The competitive audit report of the Waikiki Beach area (where the snack shack would be based) revealed:
-
very few beachside snack shops exist
-
only 1 had nutritious items
-
none had a to-go order app
Competitive Audit
Competitive audit goal: Compare the overall experience of each competitor’s site including general information, first impressions, interaction, visual design and content with the focus on the users' ordering experience.
SunnySide
Competitor 3
Competitor 1
Competitor 2
Image: Exerpt from the full audit
Starting the Design
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Paper Wireframes
Goals: create a home screen design that is
-
easy to shop
-
visually appealing
-
intuitive to use
Digital Wireframes: Cart
Goal: make existing selections simple to spot, review and add/remove items seamlessly
Cart summary lets the user know the exact details of what they added to their cart before check out
Keep Browsing and You Might Like allow the user seamlessly to continue adding more items to cart and give ideas of things to try
Digital Wireframes: Confirmation
Goals: include the following on the confirmation page:
-
clear and concise text the order was received
-
when and where it can be picked up
-
a tone of excitement while the user waits for their food
Casual friendly tone to help put user in a positive mood for their upcoming order
Confirmation text to let user know order is received
Details about the order pick up to help user expectations
Low-Fidelity Prototype
Link to low-fidelity prototype
The main user flow:
home--menu item--cart--checkout--order summary--payment--confirmation--home
.jpg)
Usability Studies: Study 1 (Lo Fi) & Study 2 (Hi Fi)
Research Questions
Q1: Determine if users can complete core tasks within the prototype of the snack ordering app.
Q2: Determine if the app is difficult or easy to use.
Participants
Study 1
2 males, 2 females, and one nonbinary individual, between the ages of 20 and 75. 1 participant is a person with a cognitive disability.
Study 2
2 males, 2 females, and one nonbinary individual, between the ages of 20 and 75. 1 participant is a person with a visual disability.
Methodology
Length: 10-15 minute sessions
Location: conducted remotely
Format: moderated usability study
Objective: Users were asked to complete tasks in a low fidelity, and later in high fidelity prototype to evaluate usability of the product.
Usability Studies: Findings
Round 1
ASAP vs. LATER scheduling was necessary but confusing to most users
All users disliked filling out payment information
Most users found issues on the profile screen
1
2
3
Round 2
Users wanted to pick their own date/time in the scheduling portion
Users felt it would be beneficial to see a screen progress bar
The text and icons need to be enlarged for optimized accessibility
1
2
3
Refining the Design
Mockups
Hi-fidelity prototype
Accessibility
Mockups: Scheduling
Before
the scheduling screen was a bit muddled
After
the usability study helped clarify simple and straightforward selections for scheduling
Before
After
.jpg)
.jpg)
Mockups: Item Added
Before
there was no clear indication item was added to cart, besides taking user to cart
After
notification and success message clarified the action
Before
After
Mockups: Home Screen
Before
Search bar was unnecessary for such a curated small menu;
Images and descriptions were hard to read.
After
Larger item descriptions, affixed navigation bars when scrolling, larger text.
Before
After
Accessibility Considerations
Principles of inclusive design were used in order to make the design visually accessible including high contrast color schemes and large font sizes
1
2
The Figma Prototype is accessible in Beta mode via supported screen readers
3
CTA buttons are made large to allow for easy touch points for people with limited motor functions
Going Forward
Takeaways
Next Steps
Takeaways
Impact:
Users successfully navigated the Hi-Fi prototype and expressed that the design was easy to use, sharing that it would be useful to them it in real life.
Quotes:
"I think it's great. It's fairly easy and makes sense. I would definitely use it in real life."
"I would definitely use this, especially if there were cocktails that you can order"
"Yeah, I would use it in real life if it
was a place I already wanted to go to."
“Last time I was at the beach… it felt like a chore to put on my shoes and go wait in line, so this idea appeals to me".
"I think it's great. Especially if it's right there on the beach!"
What I learned
Stand Out Findings:
users want the check out process to be as quick and easy as possible and strongly dislike filling in fields like
credit card info
users really appreciated seeing nutritional facts information, a clear list of ingredients and allergens
item reviews by other customers are a vital consideration for users when deciding what to order
users would prefer the option for the food to be delivered to them on the beach but still considered pick up a better alternative than placing the order in person
while healthy food is a priority, having guilty pleasure items was very welcomed by most users
Next Steps
As a next step, users seemed to think that delivery to them would be even better, so research on how to best make beachside delivery an easy experience is reccomended
1
2
More user flows can be built out to fully simulate the app experience
3
More research can be done to better understand user’s dietary restrictions and how to best navigate these in the ordering flow
_edited.jpg)