Creating a sticky Fantasy F1 experience

Overview

As a fun side-project, I decided to re-design the F1 Fantasy website to decrease user churn from the game.

Overall Redesign Goal:

Solve three problems identified from initial user research:

I. Friction in main user flows

The most common user tasks require several clicks and page re-renders.

II. UI does not support social play

Text analysis of survey responses to: What is your primary reason for playing F1 Fantasy? Sample size = 88

III. Lack of features empowering tactical gameplay

“It feels so random, like each time I just pick drivers I like because I have no way of knowing how well they’ll do”

Objectives for the Redesign

How might we increase 30D retention?

Simplify task flows for most common user jobs

Empower player analysis and strategic gameplay

Improve visual aesthetic of the desktop app

Personal Objectives:

Learn how to design and prototype through Figma

Gain a better idea of UI/UX principles and how to incorporate them into user flows

New Features

1. Post-Race Landing Page

⚠️

Problem: Difficult to find results of drivers not on your team after a race.

The “Results” button at the bottom of the current landing page only shows race results of drivers on your team and your new rankings in various leagues.

♟️

Feature: Post-Race Landing Page

Upon first site visit after a race day, users are redirected to this page, which includes:

A) Toolptips to quickly view official and fantasy race results

B) Display of users’ team points

C) Player score breakdown cards

[A, B] Race results tooltips and team points overview.Click on any player card on the right to view →

2. Sortable Statistics Table

⚠️

Problem: “Fantasy Stats” tab is cluttered and not user-friendly

Can’t compare across tables to gain comprehensive view of which driver a user should choose

Reported stats “not useful” for making strategic team choices

♟️

Feature: Stats Master Table

Inside the “Fantasy Stats” tab via the global sidebar navigator, users can find a sortable master table.

Combines the most useful stats (based on user interviews)

Click on column title to sort by column

Toggle between constructors and drivers statistics

3. Interactive Player Valuation Chart

⚠️

Problem: Users can’t predict trends based on past performance

♟️

Feature: Interactive player valuation chart

4. Teammate “Head to Head”

⚠️

Problem: Difficult for users to gauge driver value for their price

There is no way to view a driver on your team’s performance “value” easily – users must navigate to the driver analytics page, and search for the driver they want to inspect in a disorganized list.

♟️

Feature: Teammate Head-to-Head

Added “Teammate Head-to-Head” feature in driver profile cards (accessible in a user dashboard), since beating a teammate dishes out fantasy points and thus become a key GPS to help pick the best “less expensive” drivers in lower tier machinery to stay within budget.

Where to Find: These can be found on the homepage and all pages with player thumbnails.

Redesigns

1. Social-centric post-race user flows

Problem: The most common user tasks required several clicks and site re-renders to complete, and many users got lost in the convoluted site menu during usability tests.

Information Architecture (IA) Card Sort: No users reproduced the current IA in the open card sorts I conducted. I noticed that many users would group the site topics by functionality and user relevancy as opposed to their semantic meaning, which was in stark contrast to the site’s current implementation.

Final flow: