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. This visual represents some of the different ways we imagined the mechanics working in the beginning.
Testing
I built out a lo-fi prototype to outline our buy 10, get 1 free mechanics as a user would experience them on the app from sign-up to an initial checkout. Initial testing exposed pain points in our proposed mechanics / terminology / UI presentation and we 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.
With another week of refining, we were able to run a second round of testing. There was still some confusion with the mechanics but much more clarity and trust with simpler visuals and language that was more straight-forward. We wanted to introduce a component for users to interact with between buying experiences to keep them engaged and excited. The proposal for a daily spin wheel, although engaging, was perceived as out of place and users said they didn't see themselves using it after a couple of times. The next proposal was earning badges for actions/challenges that they completed in the app, which was received as 'much more relevant' and there gave us 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 these pieces that users had called out gave them clarity and helped them feel engaged.
Visual Design / Narrowing Direction
We were in the midst of rolling out a new brand which we wanted to help inform the new branding of the program. I helped to concept on logo marks to use with Rewards program that would be cohesive to our new logo and UI. I also completed broad ideation on how to represent rewards earn progress that could work in large placement and a much more condensed version in the header.
I explored different content that we could show in the header on the home page. In prioritizing the most important information, we ended up focusing on earn progress with a small call out for tier and showing reward credit only if it exists.
For visual representation of tiers, we wanted to use colors that users could be identify when used throughout the UI as their Rewards Level. We chose unique colors from our new palette to represent each tier starting with our main brand color (magenta) and ending in colors that are perceived as more regal (blue and purple).
With the branding and core pieces ironed out, I was able to build the rest of the UI and marketing materials for our first release.
First Release
We had a hard deadline for the initial release of the program so we needed to narrow in on a slimmer first release 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.
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.
Outcome
Our redesigned loyalty mechanics created a more sustainable program for the business and a more enticing program for customers that can hopefully live years and years into the future. The immediate impacts included paying out less in rewards on small purchases and seeing small bumps in conversion rate and acquisition rate as we used the program as a carrot to attract both new and return customers.
The new program's reward amount is admittedly a bit complicated to calculate as we had to portray a rolling average of 10% of the ticket value over 10 tickets. With that considered, the customer satisfaction was good for clarity of the program and call volume was way down for our operations center on Rewards related calls. I can point to the extensive user testing of the UI ahead of time and the introduction of the credit history page (which clearly lays out value and expirations for both stamps and credits) for the positive outcome on this front.
