Kyle Mattson | Senior User Experience Designer

Refer a friend

In 2021, Central Bank invited me to join their User Experience team to design their mobile banking apps for Android and iOS. As a financial company with $19B in assets, Central Bank specializes in personal and business money management across the Midwest. This role offered a unique opportunity to guide the transition of their application into a fully native experience.

Maintained iOS app

rating

Forklift unloading efficiency

increased, efficiency in

warehouses saving

4.9 / 5 Stars

insuring users happiness

Increased mobile app

retention rate by

Enhanced material

traceability in

recovered inventory saving

15%

with user drive feature iterations

Achieved being ranked

on Forbes 2021

Streamlined the prices of

counting material reducing

onboarding new hires saving

16th-place

for Americas best banks

Introduction

Central Bank, a traditional medium-sized bank, is looking to compete in the digital age with fintech leaders like Chime and Revolut by modernizing its referral process. Currently, referring a friend is a highly manual and tedious task, requiring customers to visit a branch, pick up a referral slip, and fill it out with both their and their friend's information. The goal is to create a seamless, organic way for users to quickly and easily refer friends directly through the mobile app, enabling them to share referrals naturally during conversations while eliminating the need for in-person processes. This will help Central Bank stay competitive and incentivize users to grow its customer base.

Problem

Challenges with Referral Slip Distribution

Challenges with Referral Slip

The wallet-sized paper referral slip was designed to be carried by customers at all times, but many customers either missed seeing it when visiting the branch or didn’t want to carry it with them. This limited the bank’s ability to gain organic, word-of-mouth referrals from its loyal long-term customers.

Shift to Mobile Banking Impacts Referral Program

Balancing Content & Scanability

With most customers now using the mobile app for their daily financial interactions, branch visits have significantly decreased. As a result, the manual referral process feels inconvenient, and many customers view the kickback for referring friends to Central Bank as not worth the effort.

Problem Space

User Journey Map

Persona &

User Journey Map

Persona

Persona &

User Journey Map

Micheal Carter

"I don’t have time to visit the bank for referrals. If I could send a referral while chatting with a friend, I’d probably recommend Central Bank a lot more often."

About

Age: 49

Job Title: Longtime Central Bank Customer

Location: Overland Park, KS

Education: Bachelor’s degree in Business Administration

Experience: Moderate; uses mobile apps daily for banking and small business management but prefers straightforward tools

Age: 49

Job Title: Longtime Central Bank Customer

Location: Overland Park, KS

Education: Bachelor’s degree in Business Administration

Experience: Moderate; uses mobile apps daily for banking and small business management but prefers straightforward tools

Goals

Convenience: Easily refer friends and family to Central Bank without needing to visit a branch.
Trust: Share Central Bank's services confidently, knowing they’ll benefit friends and reflect positively on him.
Reward: Earn meaningful incentives for referrals to supplement personal or business finances.

Convenience: Easily refer friends and family to Central Bank without needing to visit a branch.
Trust: Share Central Bank's services confidently, knowing they’ll benefit friends and reflect positively on him.
Reward: Earn meaningful incentives for referrals to supplement personal or business finances.

Frustrations

Time-Consuming Processes: Finds the current manual referral process inconvenient and outdated.
Awkward Sharing: Feels uncomfortable asking friends to fill out referral slips or visit a branch.
Lack of Immediate
Results: Gets frustrated with the lack of clarity or immediacy in tracking referral success or rewards.

Time-Consuming Processes: Finds the current manual referral process inconvenient and outdated.
Awkward Sharing: Feels uncomfortable asking friends to fill out referral slips or visit a branch.
Lack of Immediate
Results: Gets frustrated with the lack of clarity or immediacy in tracking referral success or rewards.

Behavioral Insights

Tech Use: Regularly uses banking apps for deposits, transfers, and account monitoring but avoids overly complex features.

Social Habits: Actively networks in his community, often sharing recommendations for products and services with neighbors and friends.

Motivation to Refer: Values businesses that make his life easier and enjoys sharing helpful tools, especially if there’s a clear personal or business benefit.

Tech Use: Regularly uses banking apps for deposits, transfers, and account monitoring but avoids overly complex features.

Social Habits: Actively networks in his community, often sharing recommendations for products and services with neighbors and friends.

Motivation to Refer: Values businesses that make his life easier and enjoys sharing helpful tools, especially if there’s a clear personal or business benefit.

Needs

Ease of Use: A referral feature that’s integrated into the app and can be completed in under a minute.
Sharing Options: Ability to send referrals via text, email, or social media while in conversation with friends or customers.
Real-Time Feedback: Notifications or updates that confirm when a referral has been accepted and a reward has been issued.
Personalization: A way to personalize messages to make the referral feel genuine.

Solution

Visual Progress Tracking

To get customers excited about inviting friends to the app, I designed a fun and engaging way to visualize their referral earnings. We implemented a progress ring that displays their current earnings alongside the potential yearly maximum, motivating users to include the bank in their daily conversations and maximize their rewards.

QR Code for Easy Account Referrals

One of the developers suggested adding a QR code to the page, allowing users to quickly share the information needed for others to get started with opening an account. This streamlined the referral process and made sharing effortless.

QR Code for Easy Referrals

Thank You Screen

Guiding Users Through the Referral Process

Guiding Users

To keep users informed about their progress when recommending Central Bank, we provide clear guidance after they share via their native messaging app or a QR code. When they return to the app, we thank them and outline what to expect next, ensuring a seamless and transparent referral experience.

Boosting Engagement with Progress Ring Animation

Ring Animation

To encourage users to keep referring friends, we added a playful animation to the progress ring, showing it fill slightly more after closing the referral screen. This visual feedback is designed to inspire users to share with just one more person and drive additional referrals to Central Bank.

Congratulations Bottom Sheet

Confetti Animation

To celebrate customers who enjoy our product enough to recommend us, we added a special touch to the final step of the referral process. A confetti animation cascades down the screen, drawing attention to the exciting news that they’ve just been paid for their referral.

Confetti Animation

Post-Login Experience

This bottom sheet appears 10 seconds after a successful login, turning the interaction into an exciting event just before users begin their intended tasks. Additionally, it includes checking account information to show where the referral reward was deposited, making it easier for users to track their earnings.

QR Code Scanner

Minimizing Disruption

To support customers having organic conversations about our bank, we aimed to minimize any disruption to the interaction. I introduced a QR scanner feature, enabling customers to quickly share information and seamlessly return to their conversation.

Desktop

As a traditional bank with a legacy customer base primarily aged 45 and older, it’s essential to keep our responsive desktop banking experience aligned with the updates made to the mobile app. This ensures a seamless experience for all users, regardless of their preferred platform.

Reflection

This project taught me a lot about the value in having good relationships with your cross functional partners. A key example was a 1:1 conversation with a developer, which led to the innovative idea of adding a QR code—an idea we might not have reached without open collaboration. The team, consisting of two designers, two engineers, and a product manager, worked seamlessly to bring the feature to life.

A significant pain point uncovered during user research was the frustration customers faced with our referral process. Even loyal users were hesitant to recommend our product again due to the cumbersome experience. To address this, we introduced gamification elements and a $50 incentive, designed to engage users and encourage repeat referrals. This approach effectively retrained users to view referrals as a rewarding and enjoyable experience, fostering stronger brand loyalty.

This experience underscored the critical role of collaboration, adaptability, and user-centered design in solving complex challenges and delivering impactful solutions.

See Walmart project

BACK TO HOME

Maintained iOS app rating

4.9 / 5 Stars

insuring users happiness

Achieved being ranked

on Forbes 2021

16th-place

For Americas Best Banks

Increased mobile app

Retention rate by

15%

with user drive feature iterations