FULL VERSION
SNAPPY VERSION

Designing delightful food pickup experiences

Role
Duration
Tools
Skills

Contract Designer
September 2017  -  June 2018
Sketch, Adobe AfterEffects
iOS Design, Low-fi Wireframing, High-Fi Prototyping, User Research, Animation

Background

Created by Yalies, Snackpass is a Y Combinator-backed app that connects students to local discounts. With over 10,000 users across Berkeley, Harvard, Yale, and Brown, Snackpass is transforming mobile food orders into a fun, social, and effortless experience.

As a designer for Snackpass, I helped to bring new features to life, streamline UX, and work with the co-founders to solidify a fun, fresh, and clean brand presence.

Earlier this year, I guided a redesign initiative, intended to explore areas for UX optimization, visual engagement, and interface simplification.

Anticipating their release on two new campuses on the East Coast, Snackpass wanted to turn a fresh eye to their current interface, inspecting areas of potential improvement, especially in regards to their UX, which was entirely designed by the founder and developer.

The impetus for this redesign initiative was Snackpass's launch in Providence to 5,000 new users. Upon launch, the Snackpass team encountered a wide range of user complaints, primarily revolving around their confusion surrounding how Snackpass functioned and how it was different from the endless amount of food apps that already exist.

User Research

Before I began envisioning my own improvements for the app, I conducted user studies to better understand what users liked about the current design and what they desired for the new version. Snackpass is a widely used app on campus, so gathering qualitative data was a fairly straightforward task. I reached out to approximately ~50 users from a diverse set of campus groups.

Conversations with users left me with a valuable set of information with which to move forward. Comments ranged from visual suggestions to major feature overhauls:

_

"More graphics. Fun page loaders would liven up the app and align with its playful vibe."

"A 'I forgot my password' option on the log-in page."

"We need a better search bar!"

"A better way to browse through food options."

Comparative Research

For my initial sketches, I downloaded about ten different delivery/food related apps in order to observe their design strengths and weaknesses. I paid particularly close attention to the navigation experience of each app and cross-comparing ease of use with Snackpass's current user experience.

My top takeaways were:

(1) Advanced search filters are extremely helpful for users who are using the app without specific restaurants in mind. The majority of users we talked to used Snackpass to discover new deals based off of a set of criteria, rather than find deals at a particular locale.

(2) The home page should be split into navigable collections to better facilitate restaurant discovery. The home page should also be the first tab in the menu.

(3) Having a "bag" tab is extremely helpful for logging multiple orders from different restaurants. Having a log of past orders is also a agenerally helpful feature to have available in the app.

Updated Home Screen

The Snackpass home page has a "Featured" deck and general list of deals available for pickup, delivery, and catering. The layout is clean and easily navigable, but users have limited opportunities to discover new restaurants. Snackpass has significant data related to each restaurant and displays some of this data on the app (such as the number of "likes" by general users and friends ). Unfortunately this data is not easily accessible for users. Users can see which friends are "fans" of certain menu items, but this information is only visible once the user is viewing a restaurant's menu page.

I wanted to create a centralized hub of collections for restaurant and menu item recommendations. The most intuitive place to locate this hub was the home page. Similar in format to the "Featured" section of the original app, I created collections that ranged from "Hot New Deals" to "Popular with Friends" to "Nearby."

Filterable Categories

In order to facilitate a more flexible discovery process, I added a search filter. The search filter will update collections with new criteria, such as product metrics, dietary restrictions and order type.

I struggled with the design of this filter because there are so many possible restrictions that are possible. I could have made this significantly more complex due to the sheer number of preferences that are possible. Some apps, for example, allow you to filter for prices at $, $$, $$$, or $$$$. Rather than include this level of detail, I opted for simplified options. In the case of product price, I added a " Cheapest" category on the assumption that most users will not be filtering for highest prices.

Versatile Search

Snackpass also lacks an easy way to browse through specific categories of food. If a user is craving a salad or Mexican, there is no convenient way to search through nearby restaurants which offer this kind of food. This was a major area of inconvenience for all users, so I sought to find an effortless solution.

I ended up nesting a secondary category menu in the search bar. When the search bar is tapped, users are immediately taken to a categories screen. This is a speedy way to browse through collections of food based off of ethnic origin, type of food offered, establishment, etc.

Animated Loaders - Pushing Playfulness

One of Snackpass's most playful features is the ability for users to "hatch" eggs with friends. If you send enough gifts to a friend your egg will hatch into a chick, which you can name and collect.

Currently, this chick feature is fairly limited. Chicks can be viewed on your friend's profile, but they cannot be accessed elsewhere, and users have little incentive to view or interact with their chicks.

In my redesign I reimagined the way in which chicks are utilized throughout the app. Most notably I included a chick which talks to users from the home page. This chick interacts with the user in playful ways customized to the time of day and the user's consumption habits. Some examples of this interaction can be seen below.

I also attempted to liven up the app through playful motion design. Reacting to user feedback, I animated a couple food-related page loaders.  I haven't had much animation experience, but these were incredibly fun to create--so fun, in fact, that more loaders are in the making, including a sushi roll, melting ice cream, and a bowl of noodles.

Checkout User Flow

Another primary feature I added in my redesign was a "Bag" page in the menu bar. Currently, Snackpass's purchase userflow only allows checkout for purchases from a single merchant. Many similar food apps fall into a similar predicament. Adding orders from several vendors to a single cart can be tricky to negotiate in terms of UX, so checkout is restricted to a single vendor.

I added the bag icon to track items that are currently in the user's cart. At the moment, Snackpass users cannot keep track of the items in their cart if they exit the restaurant's landing page. Users also have no way of knowing the progress of their orders, except for a single text message alerting them of an estimated time of completion. This leaves little room for delays or other shifts in progress.

The bag dashboard allows for users to flexibly track not only their current orders, but also pending and past orders. Items can easily be edited or removed from a cart. While the current design lacks an "order history" section, my redesign allows for users to browse through their past orders in detail. From here, complaints, refund requests, and other comments can be handled on an order-specific basis.

Profile

Currently, public Snackpass profiles function primarily as activity logs. The number of chicks hatched with "best friends" appear next to their names, but there is no way to view more detailed information, such as their names. The personal profile page records rewards cards, discounts, and referral cards.

For my redesign, I wanted to expand the element of gamification that had already been planted by the concept of hatching chicks with friends and Snackpass's general commitment to playful user experiences.

I reimagined profiles as showcases for in-app achievements. I expanded the presence of chicks in both personal and public profiles, using this space to showcase chicks as forms of achievement rather than as random supplementary features. Users are drawn to experiences that feel personal to them. I felt that the names of a user's chicks should be public to make the experience of visiting profiles more dynamic and interesting.

Additional features I added to the Snackpass profile dashboard included "Stats" and "Recent Activity." Adding statistics and colorful chick displays meant elevating profiles into achievement logs. Achievements can further be indicated by title rankings, seen below (i.e. "Moody Foodie" and "Taste Bud").

Conclusion

The rapid pace of this team and the team's openness to exploring playful UI's made this project a lot of fun to work on. In the end, this redesign was presented to the team and taken into consideration, though a UI refresh has been tabled for the near future. It was still an informative design exercise, however, and I'm grateful to have had the opportunity to closely examine this UI and discover ways in which to expand its functionality.

Designing delightful food pickup experiences

Role
Duration
Tools
Skills

Contract Designer
September 2017  -  June 2018
Sketch, Adobe AfterEffects
iOS Design, Low-fi Wireframing, High-Fi Prototyping, User Research, Animation

Background

User Research

Comparitive Research

Updated Home Page

Filterable Categories

Versatile Search

Pushing Playfulness

Checkout User Flow

Profile