Flipp

Coupons

Helping people save money on
things they buy often.

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

In 2016, Flipp was able to secure an exclusive deal with P&G to integrate their coupons into the Flipp app. This gave us an opportunity to redesign our entire coupon feature and to better integrate their content.

My Contributions

  • Strategy
  • Product Management
  • User Experience Design
  • Interaction Design
  • Usability Testing
  • The Feature

    Before and After

    These are some of the improvements that we made to our old design:

    1. Hierarchy: emphasizing premium material while showing more content
    2. Better categorization: users are able to better digest content
    3. Breadth: supports many types of coupons and filtering for our power users

    Before and after of the Coupon tab

    Coupon Details

    Users can easily distinguish which stores the coupon applies to and are educated along the way to getting their rebate.

    Coupon details screen and rebate tutorial

    Account

    Users can easily manage their rebate balance, cards and receipts through their account screen.

    Account tab

    Problem

    The problem was that the Rebate process is complicated and takes many steps to complete. Our focus was to keep it simple and to educate the user along the way so they would not get frustrated or confused. This is how the flow ended up:

    Journey map showing the rebate flow

    Principles

    Coupons were not new to Flipp. We already had Loyalty Card and Printable coupons in our app. The challenge would be integrating three very different types of content together in one space.

    To provide an outstanding product experience, we focused on these principles:

    1. Simplicity - Taking multiple inherently complex workflow and simplifying them for our broad user base.
    2. Clarity - Clear messaging to set and maintain user expectations.
    3. Responsiveness - Consistently provide feedback to the user to build trust.

    Getting feedback

    Over the course of the project, we conducted usability testing sessions with over 40 users. My role was to create the test plan, run the tests and to synthesize the feedback into actionable insights.

    Some people were saying

    One of our big findings was that users did not need as much educating as we had initially thought. The result was that we scaled back on tutorials and focused on making the flow and UI simple.

    Simplified Design

    We took this insight and was able to simplify the three screens below (verification process) and reduced it to one.

    Left: Initial design consisting of, retailer selection, two-step gateway and rebate selection
    Right: Simplified design showing only relevant retailers and rebate selection

    Simplified Flow

    Reducing those three steps into one meant that the happy path for our users now looked like this:

    Simplified rebate workflow

    Considerations

    Coupon Thumbnail

    We created a layout that could handle countless combinations of variables like sale story, coupon types, product images, states and other business requirements. We kept the thumbnails minimal so we could show more coupons within a view without being too noisy.

    Left: A snippet of the detail page of a coupon (once you tap into a thumbnail)
    Right: Multiple permutations of the coupon thumbnail

    Telling brand stories

    A big part of Flipp is helping retailers and brands tell their stories. We created premium merchandising opportunities (banners and feature pages) for brands that would put their messaging front and center.

    Premium banners and feature pages on multiple device sizes

    To scale this process, I was able to create templates so the respective brand teams could have full creative control of their own brand stories.

    Template and artwork example for feature page

    Try it yourself

    This project launches May 1st, 2018 in the US. This will be launching in Canada later in the year.

    This is just the beginning! Like with any new product, we are continually iterating to make the experience better.

    Check it out yourself, download on iOS or Android.


    What I learned

    Things are never perfect; working under external deadlines puts immense pressure on your team, which really forces you to prioritize and make sacrifices in order to be successful.

    Clarity and over-communication is crucial, especially when many systems and many teams are involved. It is important to have several touch points where people can be looped in on changes and issues can be addressed.

    Especially for large projects, it’s important to react to testing and feedback immediately and not let it brew throughout the project, it will come back to haunt you in the end.

    I learned how to manage an invision prototype with 106 screens while 19 developer people were constantly using it for reference.


    Next Project:

    Case Study: In-Store Experience