Background
Brands/CPGs, Retailers, and clearinghouses are the three main players in the digital coupon ecosystem.
In the past, a brand creates a coupon and distributes it to its network of retailers. When the coupon is used in-store, the transaction is logged and the brand's invoice updated. Both retailers and CPGs use clearinghouses to ensure proper billing/payment.
This system, while arguably effective, comes with a complicated set of rules required to process even the simplest of promotions.
Goal
To create a direct line of communication between Retailers and CPGs, streamlining the publication process and allowing for more flexibility in regards to the types of promotions supported by the system. Additionally, our solution should reduce the amount of fraud affecting the digital coupon ecosystem by removing the need for third-party clearinghouses.
My Process
I always start a new project with the following questions in mind: Who am I designing this product for? Why is it being built? When and where will it be used? What will it be used for? Additionally, keeping all the business goals and budget limitations in my mind from the get-go helps to keep my design process on track.
High-Level Architecture
I created several diagrams and flow charts to help communicate my thought process regarding user task flows and overall system architecture. Most of the time, I was working directly with a small team of engineers which also affected how I presented the information.
Data Flows
Below are four diagrams outlining the flow of data through the system. The first flowchart shows promotion creation and publication to the retailer. The second illustrates consumer discovery. Next is the promotion redemption process that takes place in-store when the user is checking out and the coupon value is applied to their cart total. The last one depicts the clearing process.
Selected Screens
Note: Due to the large size and complexity of the system, I will focus my work on a single component- the location selection tool used by the CPG or third-party promotion owner.
The location selection tool is found inside the Promotion Management Module where the CPG or promotion owner creates and manages their promotions. When a new promotion is created, the user must select which retailers will receive the publication data.
Retailers can be selected using one of the following methods: by selecting a group of banners, using a distance radius from a chosen point on the map, or by setting up a specific area using a combination of zip codes, cities, and/or states.
Radius Method
On this page, the user selects a desired group of retailers by setting up a radius around a given address. Once the address is input into the search field, the map to the right displays the selected locations that fall within the defined area.
After the main selection has been made, the user has the option to individually deselect any retailer they want to remove from the group.
If the user removes at least one retailer, the "Update Selection" button will become active and the group of retailers updated to reflect the change.
The list view will be consistent, regardless of the method used, so the user can make changes to the initial selection. Again, only when a change has been made will the “Update Selection” button be enabled.
Selection by Banner
To select retailers by banner, the user selects from the list on the left. Each banner listed expands to display a complete list of locations included in the group. The user can also remove individual retailers from their selection by unchecking the box next to their name.
The total number of locations available at a given retailer group or parent retailer will be displayed to the right of the retailer’s name, in parenthesis. Similarly, when the list is expanded to show the child banners associated with the larger retailer group, the number of locations available at each banner will be displayed as well.
Let's use Kroger as an example. Kroger is showing a total of 400 locations when the list is collapsed. Once the user expands the list, all the child banners are displayed, each with their own location count displayed to the right of their list entry, in parenthesis. The total number of locations for all child-retailers, nested inside of a parent, must be equal to the total number of locations displayed for the parent retailer.
Selecting a Specific Area
Here, the user has the option of targeting retailers by state, zip code, or city. The search field has predictive text input and will display a list of potential matches as the user types. The final selection can be a combination of cities, states, or zip codes. To remove one, the user simply clicks the "X" to the right of each selection.
As with the other methods mentioned above, there is a list view accessed by clicking the button in the upper right-hand corner of the map. Here, the user can deselect individual retailers included in the current selection and update the group as needed.