Turn your useless paper coupons into your treasure.
Coupond is a mobile app that helps users scan, buy and sell paper coupons, so they can get discounts from the stores that they love. With Coupond you can acquire valid coupons you will actually use, and get rid of the ones you won’t.
The App for Paper Coupon Marketplace
Easy to buy, sell and use.
GOALS:
User/Business Research
User/Business Motivation
User/Business Hypothesis
Valid Coupon Detector Model
Wireframe
Detail Features
Logo Design
Color Scheme
UI Design
User Test
Low Fidelity Prototype
High Fidelity Prototype
DESIGNER:
Ka-Wai Hung
MY ROLE:
Designer
Interviewer
Tester
TOOLS:
Paper & Pencil
InVision
Sketch
Proto.io
Marvel
Photoshop
Illustrator
Indesign
USER GOAL: HAPPY PATH
Based on the research and hypothesis what I have, I started to plan the site map and user flow.
WIREFRAME SKETCH
Homepage
I was thinking of the hierarchy of each section for buyer and seller.
I was thinking of the hierarchy of each section for buyer and seller.
Sell Page
I tried to emphasized the input price box and make the page simpler.
Buy Page
I added the scroll feature for user to help them calculate the true discount including the cost of the coupon based on how much they are going to spend in store.
This feature helps user to reduce the hesitation before they buy the coupon in the app.
Use Page
I enlarged the barcode to help user hand the code to cashier to scan.
I refined the hand sketches in Photoshop, and make a prototype in Marvel.
Try it! ->
WIREFRAME PROTOTYPE
WIREFRAME PROTOTYPE IN INVISION
Try it! ->
SITE MAP
USER FLOW
SCAN FEATURE
Scan feature is able to recognize the information of this coupon if it’s valid. It will package the coupon info into a new code based on my scan process hypothesis.
The user doesn’t need to keep the paper copy anymore.
HOMEPAGE HIERARCHY
The ultimate goal is to make the user to be buyer and also seller to keep it’s retention.
The goal is to make the homepage to have same opportunityfor buyer and seller.
“MY COUPOND” FEATURE (WHERE YOU PUT YOUR COUPON INFO)
“My Coupond” feature in the bottom tap bar contains all the coupon you have.
It has 4 categories which are:
“My Coupond”- Contains all usable coupons.
“Selling List”- Contains all coupons you are selling and been sold. It indicates how much you have listed.
“Expired List”- Contains all expired coupons you have never used. It indicates the date when it expired.
“Used List”- Contains all coupons you have used. It indicates the date when did you use it.
The coupon moves automatically to the certain category when the condition has been triggered. The red bubble as notification indicated the new change in app.
ASSIST FEATURE IN BUY PAGE: REDUCE HESITATION
Coupond was designed for in store coupon app. It needed to be quick, fast and easy to use. I designed the following features to assist user to reduce their hesitation of buying and selling coupons.
The indicator assists you to have an idea when you spend in store with this coupon if you purchase. It helps you calculate the actual save including how much you spend on this coupon.
In this case the coupon costs $2 and you save $30 when you spend $150 in store. The actual save is $28. Below $10 of purchase in store with this coupon, this coupon will be worthless to buy.
ASSIST FEATURE IN SELL PAGE: REDUCE HESITATION
Coupond was designed for in store coupon app. It needed to be quick, fast and easy to use. I designed the following features to assist user to reduce their hesitation of buying and selling coupons.
Green- Sell Fast
Yellow- Moderate
Red- Sell Slow
If the input box is blank or not a number, the “Sell It!” button won’t show. The process can’t be continued. It also shows the average rage of sold price of the same coupon.
USE COUPON PAGE HIERARCHY
I made a very clear use page for user when they hand the code to cashier to scan.
The user is able to see the info of:
Retailer
Coupon Discount Info
Retailer Logo
Barcode
Expired Date
I enlarged the barcode to help user easier to show.
LOGO SKETCHES
I started to think about the name of this app. I sketched a lot for different concepts.
"Coupond": THE NAME OF THIS APP!
Coupond means the pond of coupon.
I made a poll for upper/lower case combination of name to understand what is more make sense for user.
LOGIN PAGE ANIMATION
The dropping confetti represents coupons dropping into the pond which is "Coupond".
USER TEST 1 OF 3 WITH DAVE
Insight:
-Dave expected the selling coupon progress was over when he missed the last step.
-Dave wasn’t sure what what progress he was at because the discription was not really clear.
What I have improved:
-Reduce the steps.
-Add more descriptions to be clear.
USER TEST 2 OF 3 WITH KEVIN
Insight:
- Kevin wasn’t sure the price input box was for the price of coupon or item that he was going to buy.
What I have improved:
-Add more descriptions to be clear.
-Added assist feature to indicate the average price of the specific coupon that users bought.
USER TEST 3 OF 3 WITH LILY
Insight:
- Lily thought the “Search” feature in the bottom tap bar was the feature able to search the coupon that user had, but actually “Search” feature was for the user to and the coupon they wanted.
-Lily wondered if there was any notifcation and history that she was able to track the activities she had done before.
What I have improved:
-Renamed the”Search” feature to be “Find”.
-“My Coupond” feature in the bottom tap bar contains all the coupon you have.
Now it has 4 categories which are:
“My Coupond”- Contains all usable coupons.
“Selling List”- Contains all coupons you are selling and been sold. It indicates how much you have listed.
“Expired List”- Contains all expired coupons you have never used. It indicates the date when it expired.
“Used List”- Contains all coupons you have used. It indicates the date when did you use it.
The coupon moves automatically to the certain categories when the condition has been triggered.
-Added red bubble as notification indicated the new change in app.
LATEST PROTOTYPE
Please try it!
THE NEXT STEP
This app still has a lot of issues can be improved. To be more realistic, I want to do a survey for those important pages: Buy page, sell page and use page. To have a clearer idea of what is friendly design for user.