Native Upgrades
Native Upgrades
Improving product visualization and decision-making in the credit card upgrade process
Improving product visualization and decision-making in the credit card upgrade process
Timeline
Timeline
June-August 2023
June-August 2023
June-August 2023
Team
Team
Myself, one other UX designer, my design lead, and my manager
Myself, one other UX designer, my design lead, and my manager
Myself, one other UX designer, my design lead, and my manager
Skills
Skills
User Research
Competitive Analysis
UI/UX Design
Hi-fi mockups
Design systems
User Testing
User Research
Competitive Analysis
UI/UX Design
Hi-fi mockups
Design systems
User Testing
User Research
Competitive Analysis
UI/UX Design
Hi-fi mockups
Design systems
User Testing
User Research
Competitive Analysis
UI/UX Design
Hi-fi mockups
Design systems
User Testing
Deliverables
Deliverables
4 Figma prototypes
24 user tests
4 Figma prototypes
24 user tests
4 Figma prototypes
24 user tests
Overview
Overview
I worked with the Growth Platforms design team at Capital One to design a natively-built mobile upgrades platform, estimated to decrease customer drop off by around 23 percent.
I worked with the Growth Platforms design team at Capital One to design a natively-built mobile upgrades platform, estimated to decrease customer drop off by around 23 percent.
Our goal for this project was to eliminate customer confusion during the upgrades process by limiting vertical scroll, providing easy-to-find answers about card upgrades questions, and allowing customers to evaluate individual credit cards while also showing them their full range of choices.
Our goal for this project was to eliminate customer confusion during the upgrades process by limiting vertical scroll, providing easy-to-find answers about card upgrades questions, and allowing customers to evaluate individual credit cards while also showing them their full range of choices.
In a span of 9 weeks, I conducted background research on the existing mobile upgrades interface and past Capital One customer research, completed a competitive analysis on other banks and e-commerce sites, and ideated, prototyped, and tested 4 iterations of a new natively-built upgrades platform.
In a span of 9 weeks, I conducted background research on the existing mobile upgrades interface and past Capital One customer research, completed a competitive analysis on other banks and e-commerce sites, and ideated, prototyped, and tested 4 iterations of a new natively-built upgrades platform.
Background
Background
When Capital One cardholders are eligible to upgrade to a new credit card, the digital upgrades process is done through EASE, the portal for Capital One customers. In EASE, customers are brought to a page with all available card upgrades, with the option to view each card’s details, compare their current card to a possible upgrade, and finally upgrade their card.
When Capital One cardholders are eligible to upgrade to a new credit card, the digital upgrades process is done through EASE, the portal for Capital One customers. In EASE, customers are brought to a page with all available card upgrades, with the option to view each card’s details, compare their current card to a possible upgrade, and finally upgrade their card.
Problem
Problem
The existing mobile interface that Capital One cardholders use to upgrade their cards is a web view that is poorly formatted and hard to use. This results in a high drop off rate from the 85 percent of Capital One customers who use their phones to access the upgrades interface. Users need a simple-to-navigate interface that makes comparing credit cards easy and the upgrades process smooth.
Known experience flaws were inconsistent look and feel compared to natively built interfaces in the Capital One app, and a suboptimal credit card comparison feature. Redesigning and rebuilding the upgrades feature in native would eliminate customer pain points and help generate more revenue from card upgrades.
The existing mobile interface that Capital One cardholders use to upgrade their cards is a web view that is poorly formatted and hard to use. This results in a high drop off rate from the 85 percent of Capital One customers who use their phones to access the upgrades interface. Users need a simple-to-navigate interface that makes comparing credit cards easy and the upgrades process smooth.
Known experience flaws were inconsistent look and feel compared to natively built interfaces in the Capital One app, and a suboptimal credit card comparison feature. Redesigning and rebuilding the upgrades feature in native would eliminate customer pain points and help generate more revenue from card upgrades.
Solution
Solution
I redesigned the existing upgrades interface to make card shopping and card comparison more intuitive and easy to follow for the customer.
Based on my background research on previous user testing and competitive analysis of other companies, my goal while sketching and iterating over designs
I redesigned the existing upgrades interface to make card shopping and card comparison more intuitive and easy to follow for the customer.
Based on my background research on previous user testing and competitive analysis of other companies, my goal while sketching and iterating over designs
After prototyping and testing 4 different card upgrade concepts, I synthesized testing data and previous research to make design recommendations and define a future direction for further iterations to hone in on the ideal upgrades interface.
After prototyping and testing 4 different card upgrade concepts, I synthesized testing data and previous research to make design recommendations and define a future direction for further iterations to hone in on the ideal upgrades interface.
For confidentiality reasons I am unable to share my work, but I have outlined my process below, and please contact me if you would like to know more!
For confidentiality reasons I am unable to share my work, but I have outlined my process below, and please contact me if you would like to know more!
Process
Process
Background Research
Background Research
After meeting with our product partner to define the expectations and goals for this project, I reached out to Capital One design teams who had already conducted research on similar customer experiences, as well as looking searching Capital One research archives to find additional customer insights from past research. I assessed barriers to customers while credit card shopping, where customers would typically drop off in the card upgrade experience, and what major motivators were in selecting a specific card.
After meeting with our product partner to define the expectations and goals for this project, I reached out to Capital One design teams who had already conducted research on similar customer experiences, as well as looking searching Capital One research archives to find additional customer insights from past research. I assessed barriers to customers while credit card shopping, where customers would typically drop off in the card upgrade experience, and what major motivators were in selecting a specific card.
Competitive Analysis
Competitive Analysis
Additionally, I conducted a competitive analysis on other banks, e-commerce sites, and other company shopping interfaces. I primarily focused how different companies presented different products and their features, and how they allowed customers to compare items to each other in order to evaluate which product they preferred. Overall, I assessed 25+ mobile interfaces.
Additionally, I conducted a competitive analysis on other banks, e-commerce sites, and other company shopping interfaces. I primarily focused how different companies presented different products and their features, and how they allowed customers to compare items to each other in order to evaluate which product they preferred. Overall, I assessed 25+ mobile interfaces.
Ideation
Ideation
To begin with, I drafted screens in Figma to iterate through ways to improve the current customer experience, with the insights from my research to drive the process. At first, I wanted to keep in mind Capital One brand standards and the existing interface to make the rebuilt native experience smooth for developers and customers.
To begin with, I drafted screens in Figma to iterate through ways to improve the current customer experience, with the insights from my research to drive the process. At first, I wanted to keep in mind Capital One brand standards and the existing interface to make the rebuilt native experience smooth for developers and customers.
Upon reviewing my designs with the rest of my team, I was advised to think more broadly about redesigning the upgrades experience, and encouraged to “go wild” with ideation. After receiving this feedback, I broadened the scope of my designs and looked back at my competitive analysis for design elements that could improve the upgrades interface. With another UX designer on my team, I brainstormed and sketched out some ideas to reimagine the user journey.
Upon reviewing my designs with the rest of my team, I was advised to think more broadly about redesigning the upgrades experience, and encouraged to “go wild” with ideation. After receiving this feedback, I broadened the scope of my designs and looked back at my competitive analysis for design elements that could improve the upgrades interface. With another UX designer on my team, I brainstormed and sketched out some ideas to reimagine the user journey.
Mockups and Iterations
Mockups and Iterations
Based off of my sketches, I created Figma mockups to further flesh out my ideas for redesigning the card shopping journey. I iterated over different approaches to the credit card comparison experience, from having the functionality to sort and rank cards, to presenting card information in a more visual manner, to experimenting with the number of cards that could be compared with each other.
Based off of my sketches, I created Figma mockups to further flesh out my ideas for redesigning the card shopping journey. I iterated over different approaches to the credit card comparison experience, from having the functionality to sort and rank cards, to presenting card information in a more visual manner, to experimenting with the number of cards that could be compared with each other.
Prototyping
Prototyping
After convening with my team and our product partner, we decided on two concepts that we wanted to prototype and test.
After convening with my team and our product partner, we decided on two concepts that we wanted to prototype and test.
User Testing
User Testing
Our team tested 4 prototypes with 6 users each using Usertesting.com. We conducted a test of the design that was already in-production, because it had never been tested before being released. Along with the in-prod design, we tested the two concepts we thought would be most effective, and the design that combined those two concepts.
Our team tested 4 prototypes with 6 users each using Usertesting.com. We conducted a test of the design that was already in-production, because it had never been tested before being released. Along with the in-prod design, we tested the two concepts we thought would be most effective, and the design that combined those two concepts.
Moving Forward
Moving Forward
After testing our four prototypes, I synthesized our data and made some recommendations for what path to pursue for this project in the future. I outlined design features and goals that could be iterated over or explored in order to further improve the customer experience.
After testing our four prototypes, I synthesized our data and made some recommendations for what path to pursue for this project in the future. I outlined design features and goals that could be iterated over or explored in order to further improve the customer experience.
Reflections
Reflections
By working on Native Upgrades, I was able to experience a rapid work cycle in which my team and I managed different interests from customers and partners.
By working on Native Upgrades, I was able to experience a rapid work cycle in which my team and I managed different interests from customers and partners.
Through this project, I learned to communicate efficiently and effectively with product partners, marketing teams, developers, and other designers in order to find important information and keep the design process moving. I learned how to best service the customer while upholding Capital One brand standards and principles. Lastly, I was able to explore how to not only make designs simple and usable, but also introduce elements of joy or creativity to enhance the customer experience.
Through this project, I learned to communicate efficiently and effectively with product partners, marketing teams, developers, and other designers in order to find important information and keep the design process moving. I learned how to best service the customer while upholding Capital One brand standards and principles. Lastly, I was able to explore how to not only make designs simple and usable, but also introduce elements of joy or creativity to enhance the customer experience.
I received guidance from and collaborated on this project with my team Ellen Jeong, Sohayla Olia, and Amanda Serfozo, as well as Eric Kim, Vignesh Gopalan, and Sam Beggans, and I greatly appreciate all their support.
I received guidance from and collaborated on this project with my team Ellen Jeong, Sohayla Olia, and Amanda Serfozo, as well as Eric Kim, Vignesh Gopalan, and Sam Beggans, and I greatly appreciate all their support.
Contact me: hannalhong@gmail.com
Contact me: hannalhong@gmail.com
Contact me: hannalhong@gmail.com