Product Overview:

The loyalty system provides mobile and web loyalty management to SMB and large sized merchants. Through the Loyalty programs the user is able to collect points, earn rewards and redeem offers.
The following solution have been built for a customer.
Points based:
Points for registering (Red Lobster App)
Points per check-in by scanning a bar code and having the merchant notify CardFree (Red Lobster)
Points per purchase (Dunkin' App)
Rewards for points:
Configurable points threshold to get reward (Red Lobster App)
Reward is a configurable offer that is redeemed at checkout: (Dunkin', Red Lobster App)
Discount on bill subtotal (Dunkin', Mobile App)
Free item
Fixed amount
Code user can show the cashier/waitstaff to collect reward (Red Lobster)
When awarded (Red Lobster)
Reminder x days before expiry (Red Lobster)
Automatic expiry of unused rewards (All)
Blackout times Rewards can be configured to be used only on certain days and/or certain hours (All)
DMA based offer availability, where DMA determined by nearest store according to user’s reported location. (Dunkin')

ROLE UX, UI, VISUAL DESIGNER
TOOLS SKETCH, INVISION, HTML/CSS PROTOTYPING, ABSTRACT
TEAM MYSELF, PROJECT MANAGER, ENGINEERING TEAM, EXECUTIVE TEAM
TARGET PLATFORMS MOBILE (IOS,AOS), WEB

MAPPING AND IDEATION FOR LOYALTY FLOW
graphic Earning a reward.

1. A user on the mobile app submits an order, scans a code, or gets offers.

graphic Points

2. The user is able to see points progress.

3. The user achieves points threshold.

4. Reward is earned.

graphic Reward

5. The user can see reward details.

6. The user chooses reward to be redeemed.

7. The user redeems reward in store or on the app.

8. Reward is redeemed.


WIREFRAMING
Loyalty system wireframes for Red Lobster.

For Red Lobster we designed a progress points bar that gets charged every time the user scans a QR code on their check at the table. The user then earns rewards that are redeemabled at the restaurant by showing the a unique code to the staff.

Loyalty flow overview wires

On the second round of wireframing some UI elements were define as per client needs.

wires wires wires

UX/UI COMPONENTS

After a couple rounds playing with the concept we decided the progress bar is more intuitive to the user. The rewards tab in the tab bar indicates the user they have rewards available.

wires wires Loyalty redesign in progress, in the redesign we are polishing the UI to have a more beach feeling to it, the core UX and UI are still defined within the framework. wires wires

wires For Dunkin's loyalty in the mobile app.

For the Dunkin' user we have solved Loyalty in a semilar approach, the user is able to see the points progress on the home screen and is able to see when rewards have been earned with badging on the progress bar.
In Perks screen the user is able to see Offers and Rewards, both are redeemable at the store or by adding it to a mobile order through the Order-Ahead flow.

wires wires