Store Page Redemption Modal

Project Introduction

Create a delightful cross-platform experience between responsive web and mobile (I focus more on mobile web) for RetailMeNot users to check out valid coupon code and sale on the coupon redemption page and explore if we can convert more users by adding new product features like product promotion, deal alerts and notification for app downloading. The user should feel comfortable through the entire coupon code checkout flow and discover the benefits of trying new product features. Also plan for usability testing session for the primary use cases on redemption page.

My Role

I worked as the UX Designer on this project with two other UX Designers, Avani Miriyala, Jim Thomas, a product manager Zachry Fragapane and the core business engineering team. I took part in the whole sprint lasting for two months from initial project launch, brainstorming, use cases and flow analysis, to several design iterations with feedback, and planned the final usability testing session.

Scenario

It's the core use case for RetailMeNot Mobile app. You need to buy a toaster and you decide to go to Target to purchase. You don’t want to pay full price so you decide to search on your mobile device to see if Target has any good coupons available. You decide to Google for “Target promo codes”...

Opportunities

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.

Wireframe

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.

Mapping of User's Mental Model and IA

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.