Brief
After quickly rolling out an app rewards program in 2019 to increase brand awareness and loyalty, and iterating on it continuously for the next 2 years, we realized we had some shortcomings with long-term engagement, technical limitations, and financial stabilization. The solution was to rebuild our loyalty program on the backend while also tackling updates to its core functionality and visuals.
Contributions
I was the lead designer on this project, collaborating with a couple of other designers on processes and various assets/screens. The initial discovery was done in a cross-functional team of designers, product, and leadership. Once a direction was chosen, it became a company-wide project involving most of our product teams. At this point, I took the lead on creating flows and consumer-facing UI for our app and web products.
Considerations
Our initial loyalty project was focused on encouraging app downloads and repeat purchases. We needed to keep working towards these goals with the revamp while also addressing specific shortcomings of the original program:
-The cashback mechanics of the original program awarded between $3 - $9 back on $100 which was expensive for the business and not a large enough value to be enticing to consumers.
-The tiers from a rolling 1-year window of spend were only tied to increased cashback percentage and expired too quickly to be tangible.
- Placements in buyer experience were too heavy/distracting and the program felt ad-like and pushy.
- There were lots of calls to our operations center with questions about rewards earn.
Solutions:
- Move mechanics to a "Buy 10, Get 10% off", thus saving money upfront and allowing for a lump reward that could amount to a free ticket.
- Move tiers to be based on lifetime value, add a 4th tier, and create perks at higher tiers that are more experiential instead of being tied directly to rewards.
- Create small engagement/reward opportunities to encourage loyalty between 10 tickets/large credit rewards.
- Create a clear visual consistency and language in a new rollout with pulled-back placements and a more integrated experience by combining rewards home and user profile.
- Create a self-service screen in-app that outlines current credits/earnings and the history of all related activity to alleviate calls
Program Levels
We moved to a 4 tier program and created new names and colors that aligned with our brand refresh. Each tier introduced new benefits to entice users to keep spending!
Main Rewards Experience
-Rewards has a prominent placement on home page and is integrated with user's profile to create a personalized feel to the program. Rewards level is shown with splash of color with large callouts for current rewards and earn progress.
-Rewards history clearly outlines the stamps and credits a user has as well as a full list of activity showing earn, burn and expiration and links to related order details.
-Challenges are a way to gamify the experience and keep users engaged between purchases. Challenges come with digital badges and can also be attached to bonus stamps
Rewards Messaging During Purchases (App)
With scaled-back funnel placements for the initial launch, we kept a place to apply credits in checkout and then added simple callouts for earn progress, level jumps and reaching rewards post-purchase.
Marketing / Informational
I created a singular page to be used on web to advertise the program as well as pulled into the app to explain mechanics and answer questions.
Web Placements
Initial rollout for our web experience allows users to focus on completing their order and only intercepting after the fact to push users to download the app and start tracking their rewards. Future scope would add more messaging about Rewards earn into web purchase flow for awareness and help push conversions.
The Process
Ideation
With business requirements outlined for changing our rewards program, we went through some metrics of usage to identify user pain points and other improvements that we could make as part of this redesign.
I participated in a couple of weeks of discovery sessions where we broke into two groups comprised of product and design members to narrow down on mechanics direction and ideate on components, proposed solutions, tiers, terminology, and UI pieces for the app. We narrowed in on solutions through feedback sessions within our groups and as a larger group.
Testing
I built out a lo-fi prototype to outline new mechanics as a user would experience them on the app through sign-up and checkout. After initial testing, we found a lot of pain points in our proposed mechanics / terminology / UI presentation and went back to the drawing board to address all these issues. Multiple currencies for earn and burn were perceived as confusing. A stamp card visual felt out of place in a digital space. Language about 'a free ticket' left users confused with what they were getting and skeptical of what wasn't being said.
Another week of refining the experience helped me make a lot of improvements. A second round of testing still showed some confusion but helped bring a lot of clarity to the direction we needed to go with the overall mechanics. There was a proposal for a daily spin wheel that although engaging, users felt it was out of place and that they wouldn't use it after a couple of times vs. earning badges for actions they completed in the app felt relevant and had a better runway for long-term use.
We were still at a crossroads between some specific decisions - how do we organize the information? What screens do users see as part of their main rewards experience? What visuals do we use to portray progress toward a reward? How many placements do we need in the purchase funnel for the initial release? Another designer and I put together two prototypes with different approaches to these questions and put them up head-to-head in a final user test. My approach was received very well with our testers and we moved forward with a lot of the pieces that users had called out gave them clarity and helped them feel engaged.
Visual Design / Narrowing Direction
There was a large exercise to create the visual direction for the program as we were rolling out a new brand. These two things needed to work cohesively while we decided how to visually display different levels, market the program, and start building the UI. We chose colors from our palette to represent tiers starting with our main brand color (magenta) and ending in colors that are perceived as more regal (blue and purple).
I outlined all the screens we needed for our initial release of the program and created a matrix of all the different variations of these screens that needed to be designed (different tiers, signed out, has credits, no progress, etc)
Scope Decrease
We had a hard deadline for the initial release of the program so we needed to strip a lot in order to make that date. I had a 'must-have' list that included at a minimum, showing progress and credits on Home, in Details, and post-purchase. From there, we started pulling back things that didn't need to be part of the initial release and prioritizing them for fast follow-ups. These included things like going out with Rewards Details and Profile separately, waiting on the challenge concept, and simplifying the progress bar so that the same component could be used in multiple places.
Final Assets for Handoff
With all flows and visual direction approved, I built out all the screens we would need for app (mobile and tablet), and web (mobile and desktop) as well as adding main loyalty pieces into our main brand components library for broader use and export.
