

iOS & Android App Design

Coupons.com app allows shoppers to access all their grocery coupons right from their phone without ever relying on a printer. User can plan & organize their grocery coupon-ing, at home and in-store.

INTRODUCTION
This project was to create a new mobile app concept for Coupons.com, that will better reflect its new digital paperless coupons – savings and cash back coupons.
Led the design across iOS and Android from the outset of the project in March 2016. Up until April 2018, led the efforts to evolve the app and address user pain-points related to the ‘Plan Shop Save’ experience. The app has won and continues to win several awards:

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
More Digital Coupon Users
Easy onboarding to save digitally: loyalty card coupons and receipt scanning.



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?


Project Vision
Plan – Shop – Save - Repeat, Your Grocery Shopping Companion

Phone # look up &
easy on-boarding

Consumer choice between scanning & card

Clip once,
use at any of my stores

Feed & personalization

Enter store, goes into shop mode (or asks you to)

Scan product bar code to get matching coupons

Free add grocery lists, search, categories (discovering & gathering & organizing)

All brand pages | Only sponsored brand pages | Nothing splashy with brands
Design Process & Time Frame
Design Process

Time Frame

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

