Food Pickup

Gamifying

I contracted with Snackpass (Y Combinator '18), a food pickup app,  to explore the design of key product features.

Tools

↗   Figma
↗   After Effects
↗   Photoshop

Skills

↗   Motion Design
↗   Concept Prototyping
↗   Visual Design

Deliverable

An overhauled Fonts panel experience with new hover states & microinteractions to clarify how to successfully navigate and configure typographic settings.

The Ask

Understand how users work with the fonts panel, identify areas to optimize, and redesign the end-to-end experience of managing fonts on a site.

The Ask

Referencing the in-house designer’s original designs, create an intuitive experience for the discounts tab, party flow, and trending list.

Deliverable

This project was a close working relationship with the CEO and CPO, widely exploring a few unique problem spaces. These deliverables were meant to be provocative explorations that could then be adapted and refined by their in-house designer.

Clarify hierarchy and browsing experience for the Discounts page and Rewards page.

Explore ways for users to start group orders with friends to unlock discounts.

Explore ways to feature trending products on the home page, linking to a full list.

Snackpass

Snackpass is a social food pickup app gaining traction on college campuses across the U.S. Snackpass's ethos is playful to its core, turning digital food pickup experiences into a fun social experience to share with friends.

↗   TechCrunch  Snackpass snags $21 million to let your friends earn free takeout
↗   Andreesen Horowitz  Why we're investing in Snackpass
↗   Business Insider Snackpass wants to be the Venmo of food ordering appas

Click to skip to section

Discounts Flow

Original designs

In order to better align its app with its product verticals, Snackpass was reorganizing its page structure to include a new “Discounts” tab.

The designer had already taken an initial stab at the tab, and I was tasked with continuing these explorations and pushing the boundaries of Snackpass’s signature playfulness. I was also asked to explore a few other flows, outlined below.

It’s important to note that as a contracter, my role here was to create quick, exploratory comps to inspire the team. This was not a traditional iterative design process, so much as a “guerilla” style churnout.

In addition to the Discounts tab, the team wanted to attach their prexeisting reward cards page to the tab. I saw opportunities within both panels to clarify key actions.

Redesign

I focused my redesign on cleaning up the hierarchy of these screens, clearly indicating to users the purpose of the page and what actions they can take.

Updates

I added in a few functonal features to the discounts page and proposed a few fun interaction patterns, such as an animated header and even interactive discount cards.

1.    Added animated header
2.    Redesigned menu
3.    Added map and sort
4.    Redesigned list item cards
5.    Designed new menu and tab icons

Updates

I focused my updates for the "My Free Stuff" page on simplifying the rewards system UI and ensuring that reward cards are scalable by stacking the cards and expanding on tap.

1.    Simplified, collapsible rewards list
2.    Allowed rewards cards to stack for scalability

Experimental Discounts

The CPO requested that the interactions feel "Snapchat-esque," so I experimented with different ways of interacting with discounts in fun and unexpected ways.

Animated Headers

I also had some fun animating a few whimsical headers featuring Snackpass's classic chick.

Party Flow

Original designs

The Snackpass team was also on the verge of launching a feature called “Party” which allows users to participate in group orders that result in a discounted price. The details of the flow were not yet solidified, but I was asked to explore ways in which we could implement this.

I was given a screen that their designer had already designed to work off of. Overall, the approach felt a bit clunky and unscalable.

Redesign

In my redesign I imagined “party” as an indicator on the top of the card. When a user clicks on the icon, they can view additional info related to the party.

1.  Party icon shows amount of users need to complete party.
2.  Pop-up surfaces party info without cluttering home screen.
3.  Countdown appears at the bottom of the screen
4.  Discount is added to the receipt.
5.  Banner at the top indicates group status.

How do we seamlessly tie together
the home and discount page?

Redesign

In my redesign I wanted to make the transition from carousel to list to be as seamless as possible, feeling like a single unified experience.

1. Redesigned name pills
I added pills behind the labels to improve legibility- particularly on lighter images.

2. Icons
I added and simplified the badges on the cards.

3. Modal
I added “View More” at the very end of the carousel and positioned the list so that the transition feels as smooth as possible.


Conclusion

This project was so fun to work on! The Snackpass team is incredibly agile and design-focused, so it was a pleasure to jam with them on creating some fun experiences. The back-and-forth needs-based process that drove this project was also an entirely unique experience and completely different than the process that normally drives my work.