SnackPass is a subscription-based, snacking app that's helping reduce food waste providing meals to charities in Chicago. With the $10/month that users are paying, it helps by moving leftover meals, from participating restaurants to, charities.
My team was tasked to create high-fidelity screens for a native mobile app that focuses on:
- young, working professionals
- being used during break times at work
- social impact from using the app
*Zero Percent is the company that's picking up these leftover meals and delivering to the charities. To cover the costs of picking up the meals and delivering them, they created SnackPass.
Variety, discovery, convenience. These were some of the keywords that the client shared, when asked to describe the experience of using SnackPass. With these, our team researched and explored other companies that fit these keywords; this included companies like ClassPass, Netflix, WeWork and Starbucks.
Style Tile 1
Our client had noted that blue and orange were his preferred colors.
- Blue for trustworthy
- Orange for optimism
This style tile was my take on it and giving it a bold look and keeping it simple.
Style Tile 2
Because there's a social aspect to this app, this style tile reflected more of the infographics and numerics, as seen in apps like FitBit.
With softer colors, I went for the more playful feel that can also be engaging with the big infographics.
Style Tile 3
For a more modern style, I explored the usage of neutral colors, mixed with the blue and orange the our client requested. This kind of style was inspired from app like WeWork.
After presenting these 3 style tiles, the key feedbacks were:
- Style tile 1 - Liked the bold colors of the blue and orange. Also liked the clean and simple layout of the snacks.
- Style tile 2 - Liked the playfulness of it, but didn't like the emphasis on the numbers.
- Style tile 3 - Layout of the snack cards are great.
Displaying snacks (list view) - I designed snack cards that have a big visual of the snack, along with the essential informations and the CTA's.
- Users would be using this app during their breaks at work, so snacks that are nearby would be important.
- From having a hand-full of people test, "Claim" was the primary CTA for them, which is why it's placed on the right side. (I initially had it on the left side, and people would almost tap "Gift" because they assumed that "Claim" was there.
Displaying snacks (map view) - To keep it MVP, when users would select a location, the same snack card seen in "list" view would pop-up because it's visually familiar to them. Also, this makes it easier for the developers, since they wouldn't have to create a new visual card.
Impact page - As a design team, we agreed that the Impact page should be visually different. And the significant content in this page would be:
- overall user account summary (months enrolled, meals rescued, and charities aided)
- monthly snack history
- monthly charities impacted
Notifying users of low or no quantity and closed stores - Some pain points that were brought up were:
- What happens when there's low or no snacks available?
- What happens when the stores are closing soon or are closed?
And how do we best solve this, so that the users would keep claiming their snacks. My approach was to be upfront about it with the users. By being transparent and giving the users the notification, they would be more accepting that the snack that they wanted or the store that they were about to visit might not be available/open for the day.
The InVision Prototype can be found here.
With the time constraint of this project, it was difficult to keep a Minimal Viable Product (MVP) mindset. While the end goal is to pass off a visual design with a style tile that the client can take and build from, I found myself wanting to create more to capture the variations of interactions and experiences for the users.
With this design, SnackPass can test it to gather real data, which helps them to make decisions for their next round of design iterations.
Future considerations for SnackPass to test:
- Are the information on the snack cards enough for the users to successfully claim snacks
- Could some information be omitted? Are there other information that's needed?
- What would motivate the users to gift snacks, which would help grow SnackPass
- Is there a need for rewards for gifting snacks? Does the app need to remind users of their impact?