Loyalty App Integration
UX / Product Design
Project Overview
Role: Lead designer, research, prototyping, testing, final UI
Team: UX, Product Managers, Consumer Insights, Development, PODs
Duration: Jul—Nov 2021
Following the launch of the new Gap Inc Rewards Program, customers began coming into our stores (and online) more than in recent years, maybe a decade. The launch went really well and this attracted business. At the time, we had two separate apps for the point of sale and our loyalty “program” that consisted of loyalty sign up, email capture, and credit card enrollment/application. In this new world, having separate apps did not make sense anymore.
Objective: Integrate our two most important apps into one without breaking the experience of our point of sale.
Challenge
As we phased out the loyalty app, we needed its features to be part of the Sell app without disrupting the transaction experience. As we began to unpack this project, we were made aware of the biggest problem associates were facing: Having to bounce between apps causing timed sign outs which would lose transactions.
Solution: bring the loyalty app features into the Sell app in a way that our associates are familiar with. Thus, allowing for easy adoption and eliminating the need to bounce between apps.
Initial Steps
First, I worked a few shifts as a store associate (circa 2016!) to really familiarize myself with this painful process. This was mine and my PMs research. We worked. We felt the pain, we saw the flaws. When it came to customers, I could feel their patience run out as we struggled to meet their expectations.
Design Approach
My PM and I recognized that making the change with both options of Rewards Enrollment and Credit Card Application at the same time, it would be an overwhelming task for our development and change management teams. Thus, we decided to split the work into two parts.
First, Rewards Enrollment. Second, Credit Card application. The bigget lift would be in the card application experience.
Part I - Rewards
The Sell app already supported Rewards lookup. I needed to solve for adding Rewards enrollment in a way that made sense.
User flow of Rewards enrollment during a transaction.
Initial Ideation
With the flow figured out, I began ideating quick concepts.
In this first take, I was considering the whole experience including the Card Enrollment piece.
After lookup, no account found would directly take the associate to a new enrollment page or a failure prompt to sign up.
Adding a Sign Up button to the Lookup page
Refined Testing
After getting initial feedback on the quick ideas. Product management and design aligned on the better designs we wanted to A/B test. We felt confident in the early findings to guide us to a final design after this round.
Due to the ongoing pandemic, we continued to do most of our testing virtually to avoid overcrowding the stores.
A/B Test: A
At this point, Loyalty lookup and enrollment were still being thought of as separate actions that would begin and take users into two very different flows.
This did not perform well because it went unnoticed. Even though I thought this was making it very accessible for them, turned out to be the opposite.
Once in the enrollment screen, they felt the need to be able to go back to look up or transaction without having to cancel.
A/B Test: B
This idea came about very last minute after speaking with my teammates about our existing components from our design system library.
*From lookup entry point*
This performed very well because they noticed the toggle at the top right away. This was also a familiar behavior from other flows within the app.
Here, they liked that if the customer changed their mind or wanted to try different information, they could easily toggle back.
Part II
Card Application
In the card enrollment piece, we thought that because of their preferences with Rewards, it would be similar in the credit card experience but thankfully that theory was proved wrong in testing. In the first part, we kept hearing associates say “the Loyalty area” whenever they referred to where things should be. This is important.
Card Flows
The problem point in this flow is the card application because it meant that associates would leave the Sell app to launch the Loyalty app. This caused a lot of time-outs in transactions.
This is the lookup flow for a Brand Credit Card (BCC). It seems simple but it’s a bit tricky.
Now, here is a look at the card application flow. This is a lot longer than Rewards.
Initial Ideation
The early ideas for card application were influenced by the findings from the Rewards test results.
Added an enrollment button above the card lookup.
Similar to Rewards, going to BCC lookup and having a toggle to enroll/apply or card
Added an enrollment button when a card isn’t found
***This is back in transaction, from the “loyalty area” comment associates kept making. I kept this is a back-pocket idea.***
A/B Test: A
This is the idea I thought would be the preferred method due to familiarity from the previous findings. Felt that pairing a card lookup with application would make sense to the associates. I was wrong!
This didn’t perform well because associates didn’t know what to look for.
They also felt that it was too late in the process to be asking if they want to apply for a card.
A/B Test: B
This back-pocket idea is the one I was least confident in. But decided to test it anyway. We ended up having 100% success in tests with it.
Remember the “loyalty area” comment? This is exactly what they were talking about. They felt it was a lot quicker and easier. They also felt that the timing here was a better fit.
With this button being in the transaction screen, there was no secondary step to begin the card enrollment process.
Final Deliverables
At first, Product Management was not fully bought into the designs that my PM and I were leaning towards. It took a lot of collaborative communication to land the plane and show leadership that we were driven by the test results. Once I was able to prove that, we were able to align and deliver the best experience for this long process.
Loyalty App Integration
Rewards Enrollment in Sell
Seamless integration to the transaction process allowed store associates to enroll customers into the Rewards program a lot easier and faster.
Card Application in Sell
Card applications also became easier and faster. This allowed associates to provide a great customer experience when applying for a new credit card mid transaction.
Mobile Screens
I put more emphasis on the tablet experience because less than 5% of transactions take place on our mobile devices. However, there are some stores at Banana Republic and Athleta that have a much higher mobile usage.
Performanace & Results
87.9% Satisfaction Rate
After the previous record set, we broke that record again with the launch of these features. This was heavily anticipated and it has been received so well by the field. After adding these features, we also received the most amount of feedback the app had seen before.
Next, some screenshots from our Insights team recap.
Spike after launching both features, Rewards in Sell first, Card Application second in October 2021.
Quotes from store associates from around the U.S. appreciating the updates.
😊😊😊
Learnings & Takeaways
Many learnings here. Always trust that the test results will drive leaders to align on the experiences that we believe are best. It takes a team of stakeholders to solve for issues that have a direct impact on the business. Being able to clearly communicate and show the work is key in getting buy-in from those that sign-off on what goes live.
This was also a great project for me to reflect on what I would do differently. I am already putting together a new update to improve this experience to streamline it further. Due to some business changes, the Rewards and Card experience will be updated to live closer together in our app features and I’m excited to show the ideas I’ve worked ahead.
*Due to NDA made with Gap Inc, I cannot provide exact numbers in data in regard to the research, business gain/loss, and or results that are still ongoing.
The information shared in this project is information that is available to the public.
Full names are protected for privacy reasons.