Case study #1 — Designing Flipp’s Loyalty Card Addition Feature.

About Flipp

Flipp is a digital flyer and coupon app in Canada and the U.S. Flipp enables users to view digital flyers from various stores, clip items to shopping lists and browse digital coupons.

Overview

To use these digital coupons in the U.S, users had to load these coupons on to their loyalty card. Scanning the loyalty card at checkout would then apply all the eligible coupon discounts.

Problem definition

One of the missions of the Utility of Content team was to increase the number of people clipping coupons by 5x. All our tactics were aligned to achieve this goal. Following were the goals for this project

  • How might we reduce friction in the experience?

Hypothesis

  • Adding education on various touchpoints would make it more discoverable.
  • Current experience required users to log in via Google/Facebook to be able to add a loyalty card. This is a blocker and users are dropping off at this stage. We could explore removing the login flow as there is no business risk.
  • Making the flow intuitive, expectation management would encourage users to add their loyalty cards.

Existing flow for adding a loyalty card

Explorations: Wireframes

Based on the inputs, assumptions and constraints I designed the wireframes and user journey, handling edge cases, educational and feedback states.

Wireframes for add loyalty card flow. Users could add their card via card number, phone number, SSO or scanning barcode.

Design review and Visual Design

We reviewed the flow with our MBT (utility of content squad). Next step was to move on to visual design and user testing.

Validation

The design was tested with screened participants. We used usertesting.com to test the prototype by creating a guided test where we asked participants to perform certain tasks and asked them what they felt, expected/didnot expect to see.

  • 5 users who had never used Flipp before, from the U.S, were members of some loyalty program. They could have used competing apps like Checkout51, Ebates, Ibotta, etc.
  • Was the interface intuitive?
  • What were their motivations to add the loyalty card? Was the messaging easy to understand?
  • What was their preferred option to add their card?
  • What benefits did they saw for adding the loyalty card and what was the likely hood of using the feature?
  • What the liked and disliked about the experience?
  • How did Flipp’s experience compare with their existing experience?
  • Users understood the flow and said it fared better than the existing experience within the Flipp app and also when compared with other apps such as Ibotta and other grocery store apps.
  • Users liked that they could know more about signing up for a loyalty card if they didn’t have one.
  • Most users preferred to scan the barcode or enter the phone number.
  • Most users were extremely likely to use this feature as it would eliminate the need to carry their loyalty card on every store visit.
  • “Our keychains would now be lighter. I won’t have to carry all my cards” said one of the users.
  • Almost all users were unhappy with the need to login via social accounts. They said this would turn them away from using it.
  • Users expected to see their loyalty card AND all the clipped coupons.

Proposed forward steps

I presented the findings from the user-test to the team. Based on the inputs from the test, I suggested a few proposed actions which would simplify the flow further.

  • Once we have the capability to enable email signups, we should decouple the login gate from all features. (New project)
  • Identify touchpoints through the app to push for account creation once the value is communicated. E.g. — Ask users to sign up/sign in after they add a loyalty card or favourite a store or clip an item to a shopping list or to save their preferences. (New project)
  • Improve the loyalty card screen showing all clipped coupons along with the loyalty card (New project)

Shipping the final mockups

A home for coupons

After shipping the designs for the loyalty card flow, we took a stab at redesigning the last screen from the above mockups. A home for coupons. We wanted to make it easy for users to access the loyalty card screen, providing value in the content.

  • Fullscreen design for the loyalty card barcode and list of clipped coupons.
  • Potential savings to inform users and entice them to use the feature often.

Results after release

After shipping the new flow, we saw a weekly lift of 7%, the number of users adding loyalty cards and clipping coupons to it. Removing the login from the flow and making it intuitive contributed to the lift.

Designer. Current: Sr. Product Designer @Ola. Prev: Design Lead @Scandid.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store