Card Linked Offer

Project Introduction

When I interned at RetailMeNot, I worked on this project with RetailMeNot's Lab Team where we need to design, implement and test a Native IOS application that called Card linked Offer, in parallel with the existing offer type: online coupon, online sale, in-store coupon. The card linked offer enables user to get the in-store discount or rebates when they load the offer onto their credit card.

Initial Thoughts


We as a group gathered together and conducted the brainstorming session.

User Flow

This is the User flow for card linked offer. Users need to sign in/ Sign up in order to activate the offer. And this process contains several disjoint intersections that could interrupt the users from clicking the coupon.

1.  Entry point: Click through the coupon.
2.  Touch point: see a great offer.


This is the wireframe for Card Linked Offer.

Wireframe-2 CTA

This is the wireframe for Card Linked Offer. This version we focused on different type of CTA (Call To Actions), highlighting their colors.

Design Iteration


This prototype was created as a Native IOS application using Xcode.

Usability Testing

1. Background

2. Break down of participants

We recruited six participants for this study, included 3 RMN customers and 3 Non-RMN customers.

3. What worked well

4. What needs improvement

Design Iteration-2

After conducting the usability testing in the last section, we found there are several pages need improvement. I reflected upon each design decision made during the first design iteration and tried to refine the design choices based on users feedback.

10.1 Redesign for Storepage

Referred RetailMeNot's new IOS design standards
Based on the feedbacks for store page:
1. Card linked offer wasn't noticeable.
2. Naming of the "Card linked offer" led to some confusion.
3. Repetitive Information Filters and Deep hierarchy structure.

I came up with several design changes:
1. Using the dynamic filtering, prioritize tab "In-Store" when we detected users are having the in-store shopping, based on gated GPS & Beacons data.
2. Shallow the information hierarchy. Originally we kept the "Card linked offer" at 3rd level, which made it difficult to get noticed. Now we are using the Stacked Card layouts which put promoting features such as card linked offer to the top of priority queue.

10.2 Redesign for Add Card Page

I came up with several design changes:
1. Benefits of signing up were not clear, especially to new customers who were unfamiliar with RMN.

Getting users to sign up is one of the biggest challenges in the consumer-centric app like RMN. They are treating this app as an utility/tool which they won't generate a sense of loyalty. However, for product features like card linked offer, leading users to sign up is the only way to get the credit card information stored. We must understand that it's very likely users will quit the application when they landed on this page. So it's a trade-off to consider.

2. Add Card page didn't give users a sense of secured.
Since we are using the third party payment library to collect users' credit card information, it didn't overwrite the default
heading style. Users were confused of who are they giving these confidential information to? RMN or merchants?

I made several design modifications:
1. Replace the heading with RMN's branding style. Let the users know they are still in the app and their card's data are collected securely by RMN.
2. Adding the "Encrypt secured" notification on top of the page, to give users a sense of security.
3. Mapping the type of credit card while they are entering the card number.