iOS & Android App Design

My Role

Customer Insights & Ideation

Partnered with mobile product manager and one other UX designer to uncover insights and translate concepts into features that address customer behaviors and motivations.

Experience Strategy & Vision

Created frameworks and prototypes to share the vision, design principles, and content strategy. This helped evangelize ideas, gain alignment, and drive decision making.

Planning & Scope Definition

Defined the product with the product manager and UX designer. I evangelized customer goals and balanced business goals. I prioritized and negotiated features for launch and beyond.

Oversight & Coordination

Collaborated with product managers, engineers, and designers to translate product features for each platform context.

Design Execution & Validation

Designed the app from scratch starting from a style tile and establishing it to a complete style guide including color system, typography, components, and cetera. Along with executing design specs and prototype, also coded parts of Android front-end interface.

Leadership

Designed up and presented to executives, senior leadership team, and many other teams to get alignment and buy-in throughout the project lifecycle.

Background

Coupons.com was built to provide shoppers with manufacturer’s coupons to save money on groceries and household items. Instead of cutting out coupons from newspapers or flyers, shoppers could print coupons from home using coupons.com. With time and technology, things changed.

Print-at-home coupons declined 43% and began to fade into the sunset since 2015.

Customers

More and more customers abandoned their printers in favor of a more convenient, exclusively digital, click-and-save coupon experience. With the rise of smartphones, there was an even more dramatic shift as well as demand from consumers for digital coupons instead of the traditional print coupons.

Retailers

Retailers and brands not only wanted the coupons to be delivered directly to their shoppers’ loyalty cards, but they also wanted to influence shoppers by delivering targeted and personalized coupons and ads to them at the right moments on their mobile devices. Retailers found digital couponing to yield cost savings, ease of delivery, ease of redemption, and an increase in overall revenue.

Business Goal

The golden ruler for any eCommerce business is revenue. Coupons.com needs to integrate digital coupons with the core Print-at-Home experience on mobile app, web and desktop but mobile first. We also need to let users know there are 3 ways to save on grocery now: print, loyalty card & receipt scanning. To increase the revenue, users are the key. Our goal is:

Millions of credentialed users,
activating coupons every month.

More Credentialed Users

Knowing consumer’s PayPal account or loyalty number.

More Frequent Visits

More updated and relevant content for user

Understanding the User

Who is the user?

We seperated our users into three groups: Budget Couponer, High Value Couponer and Convinient Couponer.

How do users shop for groceries?

Brainstorming & Narrow Down

Sketching

All the stakeholders of the app including PMs, designers, and researchers sketched out features that the users might like at each stage (gather, organize, retrieve, and report).

Goal

User Testing & Insights

Method

• Navigation : 3 layouts

• Main screen : 2 versions

• My Coupons : 2 version + Shop mode

• Store page, brand page, category page: Mini pods, basic activation flow

• Overall concept feedback

• Moderated interviews

• 3 in-person, 3 remote

• 5 females, 1 male

• A mix of budget, convinient and high value user groups

Review & Discuss

Collaborated and decided on which features we liked and didn’t like and grouped similar features together.

Narrow Down & Wireframe

After discussions, collaborated with the UX designer to come with different concepts for home screen, pods, navigation, and activation flows.

Look at some of the insights we discovered.

Budget Couponer

“I want to see all the 300 coupons (FOMO!).” 

“300 coupons are overwhelming, let me filter with categories & stores.”

Convinient/High Value Couponer

“How comes I need to pick a store after I clip a coupon, how do I activate it again?”

All Couponers

Final User Flow & Wireframing

Simplified experience which is functional and easy to use.

Style Guide

A first and crucial step for creating an engaging user interface.

User Interface

The next step is to execute the initial ideas and make a product that the users will love.

SPLASH SCREEN

Using full-color photography to demonstrate the brand values: Friendly, Trustworthy and Engaging.

ONBOARDING SCREENS &

SIGN UP PROCESS

Showing the key features to first time users and giving them an opportunity to sign-in/sign-up.

STORE CENTRIC HOME SCREEN

There are two ways to save. In most stores, user can save at checkout and see the actual savings. In other stores, they can submit a photo of their receipts and get cash back.

STORE SCREEN &

CLIP COUPON PROCESS

Using an attractive lifestyle image for each store to create a friendly look and designing the coupon image not only sleek and clean, but also with outstanding readability.

MY COUPONS SCREENS &

SHOP MODE

My coupons screen showing clipped coupons from each store. In shop mode, users can cross off items after they put them in the shopping cart. The dark screen is to save battery life.

MAIN SCREENS PREVIEW

Outcome

Yes. We achieved the goal eventually! The app was released in Jan 2017 and all the metrics indicated great improvements after the launch. The number of credentialed users is increasing steadily MoM. Monthly active user numbers are also encouraging, but we have work ahead of us for it. The app is currently rated 4.7 stars on both app stores.

Other Projects