Fifth Third Bank Redeem Rewards
Project Overview
When starting my Internship in the summer of 2023, Fifth Third Bank’s credit card reward services were inaccessible to users and not native to the mobile app.
My main purpose was to create a native experience for reward redemption and explore ideas to bring excitement around rewards to users and customers.
Details
Role: UX Design Intern
Duration: 9 Weeks
Tools: Sketch, Invision, Miro, Origami, Teams, One Note, Abstract
Problem
Currently, Fifth Third Bank relies on a third-party vendor to manage the rewards system for its credit cards. As a result, when users access the bank’s mobile app to view their credit card rewards, they are redirected to an external website and required to sign in again and then continue to another site after that. These additional steps create inconveniences for users, discouraging them from redeeming their rewards and diminishing their perception of rewards as a benefit of banking with Fifth Third. Furthermore, outsourcing the rewards experience leads to financial losses for Fifth Third Bank, as well as a loss of user attention and a damaged reputation.
Objectives
Explore other banks and rewards services
Immerse into Fifth Third Design System
Create a native rewards experience
Additional exploratory ideas for innovation and growth within the bank
Research
This research process was shortened quite a bit due to the restraints of time but, I still wanted to have valuable research on user wants, needs, and desires. To best try to understand this I followed the research process listed below.
Competitive Research
In this phase, I looked through Fintechinsights.io and generally researched what the competitor banks were doing well and what they could improve on. This inspired me on what to include in the design of the rewards redemption section and what to avoid.
Comparative Research
For comparative research, I went through my phone to find any of the apps I use with rewards services and asked other employees, friends, and family, to send me any rewards apps that they have. This was my greatest inspiration for the mobile app because it gave me insight into what the rewards services for a bank can be at their best rather than what they currently are.
Journey Mapping
Positives:
Virtual wallet
Data visualization
Variety of redemption options
Rewards home dashboard
Main navigation entrance
Negatives:
Users have to turn on reward categories
Feels like a lot of effort
Inspiration:
status - hierarchy
filter + sort functions for redemption options
total points visible throughout the interface
vouchers/deals
education on how to accrue points
carousel card design
gift card wallet
ability to send rewards to friends (inside and outside the organization)
milestone rewards
congratulatory/excited theme
To better understand where the user’s main pain points and frustrations reside with the experience, I set up the current user journey map. This highlighted the main issues revolving around the limited access users have to see their rewards as well as the limited redemption options.
At this stage, I did a quick mock-up of what I think the current user map could be. I ended up going back and reiterating this several times throughout the process.
User Testing
I decided to better understand the wants, needs, desires, feelings, and frustrations of the users I needed to get first-hand quotes from credit card owners. I decided to interview five people to get insight into their personal views and feelings towards their banks, their rewards, and what weighs highest in choosing a credit card. I turned these interview results into data by placing personas on a scale. I then grouped these into personas.
Persona Development
With the completed user testing, I took the three groups I had separated from the persona scale and developed them into three personas. I chose to do three to get a wider range and cover the average and both ends of the scale. I further developed these personas with their characteristics based on the characteristics of user interviews. I then created an action-based narrative where they each had to complete a task in the app. This led me to create 3 different requirements lists for both primary and secondary personas. These requirements list would then be my guide into wireframing.
Sketches
In this phase, I took all of my research and user interviews to create a mock-up of what the app could be. The key to this phase was to create a variety of options in a low-fidelity format so I could go back again and test against users to help lead an unbiased design as best I could.
White Page Doodling
To begin the sketching phase, I started with an old-fashioned doodle. I laid out several different options for the same essential four screens and two flows. The main goal of this was to explore a variety of layout and interactions without spending much, if any, time on the details.
Low Fidelity in Sketch
This phase of developing low-fidelity frames was integral to better sharing the options and getting more insightful feedback from user testing. I made these very evidently not built out by using comic sans, no color, no branding, and filler text to best convey to users that this would not be what a built-out version would look like but more of a template.
User Testing
Once I created the low-fidelity frames, it was time to narrow down my designs based on the user’s opinions. I conducted a series of five usability tests on the same interviewees from the first round. These usability tests were task-based as well as preference-based so I could best judge user success, feelings, emotions, pain points, etc. I had two tasks, complete auto redemption cash back set up and make a donation to Make-A-Wish foundation for users to travel through. I also had several mock ups for the main home screens including different interactions and layouts. Throughout all tests, I asked users non-leading questions about how they felt, what they liked, what challenges they found, and if the interface reflected other things they’ve seen in mobile apps before.
Results
With the help of the data science team and the UX Researcher at Fifth Third Bank, I gained further insight to best make qualitative data more digestable. I was led to take my wireframe mock ups and ‘flag’ them with the comments from my usability tests. This helped me to better group and separate the feedback to narrow down on a final design pattern.
Reiteration
After getting loads of feedback from usability testing as well as a design perspective from the Fifth Third UX team, I created a final version of the prototype in high fidelity for my time here. I spent the bulk of my time learning the design system, how to use sketch, and reiterating the components and content.
Key Screens Created
Rewards Dashboard
Redemption Landing Page
Donation Flow
Cashback Auto Redemption Flow
Benefits/Status Page
Filter Function
Sort Function
Rewards Summary
Design Ideas
Encouraging/Exciting Interface
Gamification
Brand Status Hierarchy
Milestone Rewards
‘For You Page’ Recommendations
Educational Opportunities
Animation Opportunities
Retrospective
Looking back, there are without a doubt things I would change, improve, or retest but, in the same breath, I’m happy with the designs I’ve created and content with the work I was able to complete. I learned loads of valuable experiences from this project with Fifth Third Bank ranging from learning new design platforms and systems to realizing the risks, retierations, and delays of working for a corporate bank.
If I had more time…
Explore animation in the app
Create a new age, more modern experience
Create gesture interactions
Work with haptics
Research ways to gamify financial education