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.
Flipp enabled its users in the U.S to use digital coupons from various stores such as CVS, Walgreens, Family Dollar, Target, etc. But, in order to use these coupons, users would have to add their loyalty card in the Flipp app. The current experience struggled with discovery, expectation management and accessibility.
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 make adding your loyalty card more discoverable?
- 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.
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.
I created a prototype for the above flow in Invision and we used usertesting.com to validate the design.
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.
Our participants were:
- 5 existing Flipp users from the U.S who had used loyalty coupons in the past.
- 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.
Learning objectives
- Did users understand the task they were performing?
- 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?
Results
- Most users were apprehensive about logging in via Google/Facebook. While they didn’t mind creating an account with Flipp, they wanted an option to sign up via email. The apprehension was mainly due to privacy issues with Google and Facebook.
- 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.
- Remove login from this flow.
- 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.
- Adding a visual indicator with coupon count.
- 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.
