Flipp is the essential app for weekly shopping. Flipp takes all of the weekly circulars, flyers and coupons from your area and makes it easy to browse and save. The iOS and Android apps are used by 3 million weekly active users and is the preferred app for everyday shopping.

Background

There are many of reasons to love grocery shopping: finding a great deal, picking up your favorite cereal from when you were a kid, it's great. For this project, we set out to address the things people didn't like while shopping and imagined what the ideal grocery trip would look like.

My Contributions

User Experience Design

Interaction Design

Usability Testing

Problem

We talked to a lot of different people about their frustrations while grocery shopping. We looked at what we can do to help people find parking or reduce the lineups, but those things didn't really fit into our mission, which is to help people save time and money on their weekly shopping.

One of the biggest in-store problems that people often have is finding something specific, particularly if they weren’t at their home store. This would leave them feeling frustrated, reluctant to ask an associate and they end up making detours around the store.

The core problem we focused on: I'm at the grocery store... where do I find _____?

Solution

Store Mode

Store Mode is the feature we built that allows users to locate the items within the aisles of the store. It leverages our existing Shopping List feature and seamlessly sorts their current list of items by aisle and allows them to search for items within the aisles.

Left to Right: Store Selection, Store Mode with map, Store Mode with aisle sign

Outcomes

This feature is loved by the people who use it. We've heard a lot of feedback on the app stores and through our app that they have used this to save time in the stores. After the first 3 months, we had over 10,000 stores in US and Canada available and consistently saw over 42,000 people use it weekly.

Process

Initial Design

The original idea that we played with was to simply reorganize the user's shopping list by aisle. This would help users find what they’re looking for in the store but it seemed hard to believe that the data was actually correct.

Initial interaction of reorganizing the user’s shopping list

Incorporating Aisle Data

We were still trying to focus on helping people avoid going back and forth between aisles. We landed on an idea where users to see all the store’s aisle and also be able to access their entire list right on the same screen.

We wireframed and drew out many ways that this could work but ultimately the clearest way to show this interaction was to prototype it.

Open Prototype

Prototype of multi-directional auto scrolling and search for aisle items

Cutting Back

We had initially experimented with auto-scrolling aisle signs (shown in the above prototype: if you scroll the list, the signs scroll along with you), this proved to be way too much motion for the bulk of our users and made things really confusing so we cut it out.

Considerations

User feedback

We added store branding elements (such as map location and logo) that would help connect and build credibility with our users to trust the data they are seeing. During testing, we discovered giving the branding elements priority meant that users did not know they could scroll the aisle signs.

We added an animation that would show the branding elements yet give context.

When the user lands, the motion helps convey the scrollable element

Clearer Microcopy

We ran usability testing and realized that users were in a searching state while in this mode but did not know how they could search. Simply changing the microcopy in the text field to "Where do I find..." instead of "Add Item" made the call to action and intent much clearer to users in this mode.

Before and after of changing microcopy to be more intentional

Giving the users control

In the case that there was incorrect data, we didn’t want to leave users feeling helpless. Instead, we allowed them to report that the item they wanted was not there and where they may have found it.

Aisle correction form

Try it yourself

We are working to continue improving our user's in-store experiences and are constantly adding more supported stores. Check it out yourself and download on iOS and Android.

What I learned

There was a lot of back and forth between design and development because there were so many custom elements to this project. I learned strategies on how to better communicate value to others and have others advocate for your ideas.

How to use Framer. Having only previously dabbled in it, I was able to the spend time to iterate and learn how to properly use it. To make the prototypes mentioned in this case study, there were many tutorials and prototypes from others I had to learn from. The Framer community is great!

Testing with Invision Prototypes. There are many nuances to creating a prototype that feels real to the user, at least to a certain extent. Through a lot of trial and error, I learned strategies on how to better phrase questions and set up prototypes to keep users focused on the task at hand.

Next Project:

Personal Project: Learning Lettering