Ikea Coupon to Wallet Interactive Ad

User Flow Experience

A Different UI for each Operation System.

Following Google's Material Design, and Apple's Human Interface Guideline's, I designed a different experience for each.

Depending on the users device, the user will either see the Apple iOS buttons to add to their Apple Wallet, or the Google Android buttons to add to their Google Pay. If neither, they will see a button to shop directly on the brand's site.

They will have the option to copy the code to their clipboard, and it will automatically be added to their cart at checkout.

Fig 7. Apple UI

Fig 8. Google Android UI

Fig 9. Fallback UI for when Google and Apple are not relevant

Overview

Our team partnered with Turner Warner Media and Ikea to deliver an interactive social media ad that drove customers from social platforms like Facebook, and Instragram, directly to the brand site by offering them a series of coupon codes. The user can either save the coupon directly to their IOS or Android wallet for later use, or go directly to the brand's page to use the coupon immediately. This user flow met the customer's KPI of driving online sales. 

Role & Duration

Product and UI Design. Execution of specifications.

March - April 2020

Fig 1. Social ad

Advertisement that is presented on Facebook or Instagram promoting the brand. User can select Shop Now to launch coupon experience.  

Fig 2. Coupons page 1/3 

User can swipe left/right to browse the different coupon offers. Top half of page is left free to promote any creative the brand requests.

Fig 3. Coupons page 2/3

The coupon code is stated below each item and offer. User can choose to shop this item now, or save the coupon for later.

Fig 4. iOS Wallet

If user chooses "Save for later",  the coupon will be automatically added to their devices digital wallet. 

either/or

Fig 5. Andriod Wallet

What the user sees if they save for later using an Andriod operated device. 

either/or

Fig 6. Brand's website

If the user chooses to shop now, they will automatically be taken to that item on the brand's website. the coupon code will automatically be entered in their shopping cart for checkout.

Wireframing

Fig 10. Interactive coupon ad - iOS UI.

Fig 13. Apple Wallet integration.

Fig 11. Interactive coupon ad - Google Android UI

Fig 12. Interactive coupon ad - Fallback UI

Fig 14. Google Pay integration.