Deposit Redesign for Underdog Fantasy

Product Design
Payments

← Back to Archives

Deposit Redesign for Underdog Fantasy

Product Design
Payments

Overview

The existing deposit flow at Underdog Fantasy was cluttered and unintuitive, leading to customer confusion and friction.

We set out to redesign the experience by simplifying the flow, addressing pain points, and encouraging seamless transactions. The project also served as a testing ground for a new visual identity, adding an exciting layer of opportunity to the redesign.

My role

Competitive analysis

UX design

Visual design

Prototyping

The team

Product Lead: Arthik Adla

Design Lead: Graydon Driver

Eng Lead: Dean Yang

Product Director: Sam Baker

Design Director: Ben Rush

Android Dev: Billy Hnath

iOS Dev: Patrick Doyle

Web Dev: Javier Sanz Lopez

Scope

3.5 months

Year

2024

Laying the Groundwork

Customers gave us clear feedback that Underdog’s existing deposit experience was confusing and difficult to navigate. They often experienced decision overload, and it wasn't clear what actions they needed to take in order to complete a deposit.

Original deposit experience

Design Process

Research & Discovery

We began with a competitor analysis to understand how other platforms approached deposits. This research revealed areas where competitors excelled, providing inspiration for improvements and helping us define clear goals for the redesign:

Simplify the Deposit Flow: Create a streamlined, focused experience that reduces customer confusion and drop-off rates.
Optimize First-Time Deposits (FTD): Encourage higher conversion rates and maximize deposit value for first-time customers.
Improve Repeat Deposits: Enhance usability for returning customers by reducing friction to ensure fast deposit speeds to help them get back in the game quickly.

Concept Exploration

I explored a range of approaches for both FTD and return deposits: low-friction, contextual designs to higher-friction but more focused flows. The goal was to create an experience that is familiar and simple, without being inundated with decisions and information.

These explorations were inspired by commonly used modern banking apps.

Concept exploration: low to high friction

Iterative Refinement

Through multiple reviews with leadership and design peers, I refined the designs and we aligned on a full-screen experience. The full screen allows for a focused and simple experience, specifically targeting lower cognitive load for our customers.

Focused full-screen deposit experience

Late in the process, leadership requested that the finalized designs incorporate a visual identity refresh, which included new buttons, typography, and other supporting components. The purpose of this refresh was to test UI that would eventually replace our current UI.

Experimental visual refresh

I wanted to make the experience feel more approachable and friendly, so I used corner radius, a new font, and colour to accomplish that.

I also moved away from using our brand yellow for the primary CTA to avoid conflation with the semantic implication of yellow (warning).

Challenges

⛔️ Balancing Business Goals with Customer Needs

A recurring challenge was ensuring that the redesign met customer needs while achieving business objectives.

For example, while the redesign improved conversion rates (4.6% lift), initial data revealed that customers were depositing slightly lower amounts on their first deposit (-5.1%).

Addressing this tension required iterative testing and careful decision-making to balance ease of use with long-term financial impact.

⛔️ Building Experimental UI

Introducing the visual identity refresh presented a significant technical challenge. Varsity, our design system, relies on a consistent set of components, primitives, and semantic tokens to ensure uniformity across the entire app.

Any changes to Varsity components, such as updating the button style for this redesign, would impact the app globally—something we couldn’t allow for this isolated experiment.

To address this, I collaborated closely with our systems designer and engineering to create a dedicated exploratory library.

Exploratory library

This library included its own set of components, primitives, and semantics, allowing me to implement the new visual identity within the redesigned deposit flows without interfering with Varsity. This created a scalable solution for me to continue testing the exploratory UI and potentially reuse these components in other isolated experiences.

Testing & Iteration

Once the MVP was live, we launched experiments to measure its impact.

Initial Results

The redesigned flow drove a 4.6% increase in R2D1H (registration to deposit within 1 hour), showcasing improved conversion.

However, first-time deposit (FTD) amounts were slightly lower than in the original flow (-5.1%). Data suggested that the auto-populated keyboard made it easier for customers to lower their deposit amount below the default $50.

Follow-Up Testing

To address the drop in FTD amounts, we ran a second experiment:

Customers were split into three cohorts: original flow (control), auto-populated keyboard (keyboard-on), and manual input (keyboard-off).

Follow up test

Outcome: The keyboard-on variant emerged as the winner, achieving a 4.61% relative lift in R2D (registration to deposit) and an 18% relative lift in Apple Pay deposits among FTDs. While the keyboard-on cohort showed slightly lower FTD values, the overall lift in conversion rates and customer engagement made it the clear choice.

Outcome

Improved Conversion: A 4.6% increase in R2D1H, showcasing the success of the simplified redesign.

Long-Term Financial Lift: A 4.3% projected increase in total deposit value over 12 months, translating to millions in incremental revenue.

Lessons Learned

Initial test results aren't conclusive: Just because initial results may seem unfavorable, be careful not to assume that these are the final results.

How to implement experimental UI: Sometimes its not as simple as just changing button styling – there should be a plan in place for how to maintain experimental UI as it scales.

Solutions can be client-specific: While some solutions might work for iOS, they may not work the same for Android or web.

Process

Laying the Groundwork

Customers gave us clear feedback that Underdog’s existing deposit experience was confusing and difficult to navigate. They often experienced decision overload, and it wasn't clear what actions they needed to take in order to complete a deposit.

Original deposit experience

Design Process

Research & Discovery

We began with a competitor analysis to understand how other platforms approached deposits. This research revealed areas where competitors excelled, providing inspiration for improvements and helping us define clear goals for the redesign:

Simplify the Deposit Flow: Create a streamlined, focused experience that reduces customer confusion and drop-off rates.
Optimize First-Time Deposits (FTD): Encourage higher conversion rates and maximize deposit value for first-time customers.
Improve Repeat Deposits: Enhance usability for returning customers by reducing friction to ensure fast deposit speeds to help them get back in the game quickly.

Concept Exploration

I explored a range of approaches for both FTD and return deposits: low-friction, contextual designs to higher-friction but more focused flows. The goal was to create an experience that is familiar and simple, without being inundated with decisions and information.

These explorations were inspired by commonly used modern banking apps.

Concept exploration: low to high friction

Iterative Refinement

Through multiple reviews with leadership and design peers, I refined the designs and we aligned on a full-screen experience. The full screen allows for a focused and simple experience, specifically targeting lower cognitive load for our customers.

Focused full-screen deposit experience

Late in the process, leadership requested that the finalized designs incorporate a visual identity refresh, which included new buttons, typography, and other supporting components. The purpose of this refresh was to test UI that would eventually replace our current UI.

Experimental visual refresh

I wanted to make the experience feel more approachable and friendly, so I used corner radius, a new font, and colour to accomplish that.

I also moved away from using our brand yellow for the primary CTA to avoid conflation with the semantic implication of yellow (warning).

Challenges

⛔️ Balancing Business Goals with Customer Needs

A recurring challenge was ensuring that the redesign met customer needs while achieving business objectives.

For example, while the redesign improved conversion rates (4.6% lift), initial data revealed that customers were depositing slightly lower amounts on their first deposit (-5.1%).

Addressing this tension required iterative testing and careful decision-making to balance ease of use with long-term financial impact.

⛔️ Building Experimental UI

Introducing the visual identity refresh presented a significant technical challenge. Varsity, our design system, relies on a consistent set of components, primitives, and semantic tokens to ensure uniformity across the entire app.

Any changes to Varsity components, such as updating the button style for this redesign, would impact the app globally—something we couldn’t allow for this isolated experiment.

To address this, I collaborated closely with our systems designer and engineering to create a dedicated exploratory library.

Exploratory library

This library included its own set of components, primitives, and semantics, allowing me to implement the new visual identity within the redesigned deposit flows without interfering with Varsity. This created a scalable solution for me to continue testing the exploratory UI and potentially reuse these components in other isolated experiences.

Testing & Iteration

Once the MVP was live, we launched experiments to measure its impact.

Initial Results

The redesigned flow drove a 4.6% increase in R2D1H (registration to deposit within 1 hour), showcasing improved conversion.

However, first-time deposit (FTD) amounts were slightly lower than in the original flow (-5.1%). Data suggested that the auto-populated keyboard made it easier for customers to lower their deposit amount below the default $50.

Follow-Up Testing

To address the drop in FTD amounts, we ran a second experiment:

Customers were split into three cohorts: original flow (control), auto-populated keyboard (keyboard-on), and manual input (keyboard-off).

Follow up test

Outcome: The keyboard-on variant emerged as the winner, achieving a 4.61% relative lift in R2D (registration to deposit) and an 18% relative lift in Apple Pay deposits among FTDs. While the keyboard-on cohort showed slightly lower FTD values, the overall lift in conversion rates and customer engagement made it the clear choice.

Outcome

Improved Conversion: A 4.6% increase in R2D1H, showcasing the success of the simplified redesign.

Long-Term Financial Lift: A 4.3% projected increase in total deposit value over 12 months, translating to millions in incremental revenue.

Lessons Learned

Initial test results aren't conclusive: Just because initial results may seem unfavorable, be careful not to assume that these are the final results.

How to implement experimental UI: Sometimes its not as simple as just changing button styling – there should be a plan in place for how to maintain experimental UI as it scales.

Solutions can be client-specific: While some solutions might work for iOS, they may not work the same for Android or web.

Result
No items found.

Outcome

 →

← Back to Archives

Deposit Redesign for Underdog Fantasy

Next project

Bet Placement for Underdog Sportsbook

Product Design
0-1