AIR MILES Receipts

BMO - AIR MILES

AIR MILES Receipts

Project Summary

I was brought in to work on a subsection of the AIR MILES app: AIR MILES Receipts. Specifically the flow that allows for collectors to submit an inquiry for potentially missed Bonus Miles. This was an enhancement project meaning that I wasn't starting from scratch, but rather, was looking for ways to improve the experience while including all of the new asks presented by the Product Owner and Stakeholders.

Project Length

1 Month

Role

UX Designer

What is AIR MILES Receipts?

Before talking about the flow I worked on specifically, let me give you a quick primer on AIR MILES Receipts and how it works.

AIR MILES Receipts sits within the AIR MILES App and is used to scan grocery store receipts (from valid grocery stores) using your phone's camera, which then tries to match the products found with the current products on offer.

When it has been determined that your receipt meets all the criteria, including products purchased matching current offers, the collector is rewarded with Bonus Miles.

The Ask

One major part of the experience as a whole is the ability for a collector to tell AIR MILES that they feel the initial scan of their receipt didn't pick up something and they are entitled to Bonus Miles in some way. This is the Submit an Inquiry Flow.

Original Flow

Here is the original flow. The MVP that was slated to launch first.

Iteration

Here is what one of the iterations looked like before I was added to the project.

Enhancements

Here are the enhancements stakeholders wanted to make to the iteration.

Include the ability for collectors to view their scanned receipt during the flow

Include full details of offers: How many Miles they are worth and their full descriptions

Include an option to make an open request for offers not on the list that collectors think they missed

Find a way around having many open text fields for all of the selected offers

New Design Proposal

Here are some choices I made for these final designs that were accepted.

Design Thinking

After taking a look at the requirements here are the designs I came up with and why I did what I did.

Adding a 'view receipt' option throughout the flow increases vertical real estate which is very precious, especially in mobile

By including the full details of the offers, their Miles amounts and descriptions, this is further adding to vertical real estate

An option to submit an open request should still behave like any of the other offers to keep things consistent

We need to make sure that the details the collector is adding to missing offers is visible without needing text fields that could be accidentally tapped into

The 'view receipt' button makes the most sense in the top section close to the date

Makes sense to bring in the list design (light blue with the white offer cards) from another area of the app.

Set up the open offer request section to fit in thematically with the rest of the offers

Added new edit/delete functionality to offers they've already filled out to make sure editing can only be done when that's what they mean to do

Additional Required Designs

After the main flow I was asked to design some new receipt details messages what collectors would see when they scan a receipt. These can vary based on what type of error is encountered. Because the new design scheme was accepted, I was asked to use the same design approach to improve our details messages screens.

The main things I changed in the new versions are:

Changed the order of modules so that the main message module is actually the main module
Re-tooled the receipt scan results so it's more apparent at a glance what went wrong (details)
Added the new copy we received

Here are the old and new designs for comparison.

BMO - AIR MILES