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
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.
Fig 5. Andriod Wallet
What the user sees if they save for later using an Andriod operated device.
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.
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.