Welcome to Stocked.
Stocked, a mobile app built to get your coffee order right.
Our focus is to make finding alternative milks easily accessible and discoverable for everyone.
Whether you’re at home, on a work trip or exploring a new neighborhood, we’ve got your needs covered.
Role
Solo UX/UI Designer
Tools
Figma, Overflow, AI
Date
January - February 2020
The problem
Coffee drinkers look forward to their morning cup of coffee to signal the start of their day, they fix their drink to their liking with the staple milks offered at the bar, cream, skim and whole milk.
For non-dairy drinkers, the experience of the coffee run comes with hardships and though dairy-free milk options are available, people have a hard time easily locating them.
Key insights
Conducting the 1:1 interviews surfaced key trends that helped me better understand
the process of the coffee run for people with allergies and personal dietary restrictions.
Expectations
-
With alternative milk options becoming increasingly more popular, people's expectations have increased as well.
-
People expect certain beverages to be offered at coffee shops and become frustrated when their needs are not a priority for an establishment.
" I don’t understand why this cafe doesn’t offer almond milk by now, especially when the cafe
a few blocks away does "
Location
-
When traveling for work or leisure, people have a hard time finding what they need in a location they are not familiar with. People want an easy to locate solution.
-
When with friends or co-workers, it is difficult to find a location that fits everyones needs. Someone always ends up settling.
" When I’m away for work or traveling, its hard to easily find what I want in a place I am not familiar with "
Time
-
People find a lot of food apps to be overwhelming by offering too many features. People struggle to find what they need in a timely manner.
-
At a coffee shop, alternative milks are often in the fridge and not visible at the bar. Asking the the front staff takes up too much time and customers feel like a burden.
" Relying on the current apps to inform me on what dairy products are available at a cafe takes a lot of searching "
Price
-
Alternative milks are usually offered at a steep additional price. Even if an alternative milk is an option, many customers opt out due to the additional cost.
-
Users with dairy restrictions find themselves settling for something they don’t want due to the added expense, while those who drink dairy pay the standard price.
"Settling for a beverage I don't want is a common occurrence. Either a cafe doesn’t have what I need or the additional cost is too high "
Hypothesis
I suspect that people with dairy allergies or dietary preferences would benefit from a service that is specifically built to help them plan, organize and keep track of alternative milk options no matter where they are.
How might we
-
Make alternative milk more accessible to those who need it.
-
Improve the amount of time it takes people to locate alternative milks in their area.
-
Make people feel confident in finding the alternative milk they need no matter where they are.
-
Drive attention to businesses that care about alternative milk drinkers.
Research
5 Recruits | 3 women, 2 men Ages 23 - 40
All recruits have allergies or dairy preferences
Research goals
The people:
-
Learn about people who have dairy allergies and dairy restrictions.
-
Understand how people feel about their dairy restrictions and the availability of products outside their home.
The experience:
-
Discover how people find locations that offer the alternative milks they need.
-
Learn about the coffee run experience, what are the highs and lows for people with dairy allergies or dietary restrictions.
The business:
-
Understand how businesses cater to their non-dairy customers.
Who am I designing for?
After synthesizing data from the initial 1:1 interviews, it became apparent that people who drink alternative milks fell into two distinct categories. I decided to shift my design thinking to cover both user types.
Persona 1
People with allergies, they drink alternative milks out of necessity.
Persona 2
People who are health and environmentally conscious and prefer to drink alternative milks. These users do not have allergies.
Challenge:
-
How do I offer solutions that fit both users needs?
-
How similar are their needs?
Meet our personas
1.
Meet Lucas,
He has a dairy allergy and wants to easily find locations that offer alternative milks at little or no additional cost.
2.
Meet Molly,
She prefers to drink alternative milks because of the environment.
Pivot #2
While differentiating the two users of Stocked, I felt it was important to bring attention to the different contexts that surround the coffee run.
Both users are constantly looking for locations where they can meet friends or host a work meeting. Our users want to find locations that offer alternative milks that fit everyones needs while also fitting certain location needs.
-
Ambiance
-
Wifi
-
Work friendly (meetings and laptops)
-
Date location
Challenge: How do I offer a solution to this edge case, while keeping the focus on the happy flow.
Competitor analysis insights
Taking into consideration both users and what is currently on the market, I realized there is an opportunity to create an edited alternative milk search app, focusing on cafe's and coffee shops through crowd sourcing.
I wanted to include features from current apps and re-design them as a simplified and effective solution for alternative milk drinkers.
User Flows
I began drafting user flows in order to anticipate different
scenarios our users may face during different stages of the
coffee run.
Happy Flow - Users create a new search, browse locations and select a destination based on their needs and reviews from others users.
Advanced Filters - Users are able to filter by price, food options and Nice to have options ie. laptop friendly.
Saved Locations - Users have an opportunity to collect locations they love for easy access at a later time.
Selecting the MVP
Dot map method
Priority matrix
Dot map method
In order to prioritize features that would best benefit our users, I used the dot map method.
I created a list of potential features based on common trends found during the 1:1 interviews. From that list, I had our recruits vote on what five features would best help them complete the task at hand: Locating alternative milks and completing the coffee run.
Next, I created a priority matrix to display all the features voted on by our recruits. The goal was to clearly communicate which features would be built first and which features would be sidelined until data was collected to support them.
Paper prototypes
Sketching quick designs allowed for quick feedback from our users.
I was able to locate initial points of friction and explore possible design solutions.
User feedback
"The results page is too busy"
"The use of a milk carton illustration is a fun element, can there be more icons?"
"I love that you can save locations"
"Is there a map view feature?"
"Can the advanced features be hidden to save on space?"
"Can the milk availability be more
prominent on the results page"
Lo-fi designs
Based on the feedback I received from the paper prototypes
I developed the below lo-fi designs to further explore solutions for the final design.
Challenge: It was difficult designing an app that was similar to competitors, but much more simplified and edited. I was committed to keeping the process familiar, while creating a layout that was new and modern.
"Is there a feature that allows me to search by distance, rating, etc?"
"This layout resembles yelp, I would be more inclined to
use an app that offers a different layout and experience"
Explore ways for users to
quickly navigate through the
location page without relying
only on scrolling. Users want a fast way to navigate through the page.
Users appreciate that the advanced filters did not take focus away from the main search.
Users are confused by the Location type filter. "Is this filter the same as the main page filter? Could this information live in one area?"
"Will there be an onboarding process? I like being introduced to features to avoid confusion"
Users had a hard time being visually led through the design. Note: Explore different layouts.
"How do I un-save a location?"
"How necessary is specifying the location type? This feature feels like a step too many"
"I usually grab coffee at a coffee shop or cafe. I don't need all these location options"
" How do I add photos? Is this feature available somewhere else?"
Hi-fi designs
Final screens for Version 1. Focusing on three key steps for our users.
Search, Explore, and Discover.
Search
Users create a Search based on their non-dairy needs and the location of their choosing.
The page displays the five most common alternative milks, if there is an option that does not fit their needs, users can use the add button to add more options.
Explore
Here, users Explore the results page for locations that suit their needs.
Users can select a location, create an advanced search, and view results using a list or map view.
Discover
.png)
Users Discover locations that they love.
They can read reviews, add reviews and add locations to their loved page.
Onboarding
Easy app discovery for new users
The goal was to create an intuitive and visually appealing onboarding process that would hold our users attention after the apps initial download.
The onboarding consists of 5 key slides. Users are prompted to swipe left for a walkthrough of features the app offers.
A skip option is available and located at the bottom right corner for users who wish to get right to searching.
Prototype link
Check out the proto
Success metrics
-
Satisfaction - Both users expressed that they would find the app beneficial on trips and even at home. New coffee shops open up frequently.
-
Completion rate - Users became more comfortable with the apps navigation with each iteration.
-
Promotion - A majority of users expressed they would recommend the app to others if built.
Next steps
-
Due to Covid, taking Stocked into the real world has been difficult.
I would love to observe users:
1. Search for a coffee shop
2. Decide on a coffee shop
3. Get directions
4. Order their beverage.
-
Investigate the need for a secondary user, allowing business owners to claim their establishment.
-
How might we create partnerships with popular alternative milk brands to generate a profit for the app.
Questions
-
How many times a month do users access the app?
-
How often do users create new searches?
-
How often do users save locations?
-
How does the app fare in low population areas.