Store Page Redemption Modal

Project Introduction

Creating a delightful experience for valid coupons check-out on the coupon redemption page and exploring around higher conversion prompts like offering premium product promotions, notifying users with relevant deal offers and app downloading. The user should feel comfortable throughout the entire coupon code checkout process and is able to discover the benefits of trying new product features. I also took the lead in planning for usability testing sessions and writing up benchmark tasks.

My Role

I worked as UX Designer in this project, collaborated with a PM, two UX Designers and the core business engineering team. I was involved in the entire design process for two months, some of the milestones include project kick-off, brainstorming session, use cases and flow analysis, design iterations with feedback incorporated and validated the design variations through usability testings.


As a shopper, user A needs to buy a toaster and she decided to purchase on She wondered if there is any way to find discount code so she started searching on her mobile phone to see if Target has any good coupons available.


Redemption Modal is the core business of RMN, which converts lots of users to other retail stores such as Target, Macy. But as company grows, there are more and more products features/contents to be added such as "Downloading the app", "Promotion to similar products" which could help the company in terms of monetization and user acquisition. How could we improve the overall user experience of using redemption modal, while create more product opportunities?
* Most RMN (RetailMeNot) users come to the site only for the "coupon", usually they won't spend too much time BROWSING, but instead just SEARCHING for a particular piece of information.

Information Architecture

This is the information architecture for the existing store page redemption modal. All of these are arranged paralleled, without prioritizing the most important information for checking out a coupon code. We as a team had lots of debates about which kind of information to prioritize, some people thought it's important to show coupon and check out CTA, but there are some people said maybe by adding new product features like survey, app downloading, and product promotions we can convert more users. As a UX Designer, I think it's super important to be a user advocate considering about use cases and user flow.

Sketch & Brainstorming

1. Quickly sketch out what the main content should appear on the screen.
2. Consider the hierarchy and structure of the content.


After rapidly sketching out some initial ideas, I prefer to create the wireframes. By dragging different size of rectangles, I can quickly separate the screen into different parts, with each part contained some relevant content. Also at this stage, I use different colors to differentiate system information such as filter and tabs, CTA (Call to Action) and coupon information.

Design Iterations

"Best design solutions come from multiple reiterations"

I always believe in design iteration. After each design iteration, I always try to get some feedbacks from other people, designers, engineers and product managers. I like the fact that everybody has a unique perspective approaching certain design problems and altogether they led me to a better design solution.

Mental Model and Information Architecture

After several design iterations and tried to place content on different position of the page, we felt there isn't a criteria for deciding which layout to use. I decided to rethink of user's need, users' mental model and possible information architecture.
As you can see, below is the comparison between three of them.
In terms of users' need, all RetailMeNot's users come to the app to get the coupon code. They expect to find the relevant coupon code and leave. If you look at the mental model flow, all the questions asked are helping them to identifying if a coupon is valid or not, if this coupon can be used at this store.

Usability Testing

1. Background

1. What worked well

1. What needs improvement

Design Reiteration

At first, I thought designing for the store page redemption modal was fairly easy, since it's just designing for one page. But after the usability testing, I found that users have certain expectation of what kind of information they should be given on this page to help them use the coupon code.

"Organizing content based on users' mental model"

Redesign for Coupon Card

Referred RetailMeNot's new mobile web design standards
Coupon card is the first focus of most users when they landed on this page. They usually ask questions like:
1. What is this coupon code?
2. In which store can the coupon be used?
3. Is this a coupon code I need / interested in?

To match with their mental model, I used the three horizontal grid layouts to display "store information", "coupon's header", "Action towards the coupon" to give them the most helpful information.

Redesign for Coupon Status Bar

From the usability testing, we found that users thought any information about coupon's current status is very helpful. It saved a lot of their time to figure out if they need to click the coupon. Also, they said it was very annoying when they spent lots of time reading how to use the coupon but it turned out it wasn't working. So I decided to separate the coupon status from the coupon area and show three most helpful information about the status of a coupon based on their relevance.
1. Success rate.
2. Number of people used this coupon.
3. Verification by RetailMeNot.

Redesign for First-fold

"No one scrolled"

If you look at the previous discussion about designing for first fold. People usually have different opinions about what kind of information should be displayed on the first fold. Our product managers would like to add new products features like "Downloading the app" CTA, other related products promotion since they could greatly lift the conversion rate. But as a UX Designer, I always feel that satisfying users need always should be the first priority.

1. "What is the coupon?" --- Coupon card
2. "Is this coupon code working?" --- Coupon status bar
3. "How do I use it" --- CTA
4. "What else do I need" --- Further actions

Below the CTA area to copy the code, I used the "Three-tabs" bar to show further actions since I found these three pieces of content are paralleled based on specific user's task. Some users would like to help others by commenting below, some prefer to read the details, while others might need to send the coupon to other devices.