Turning Character Discovery into a More Engaging Player Experience
Timeline
March - May 2026
Disciplines
Design Strategy
Interaction Design
A/B test
Team
Product
Design
Engineering
Content
Turning Character Discovery into a More Engaging Player Experience
Timeline
March - May 2026
Disciplines
Design Strategy
Interaction Design
A/B test
Team
Product
Design
Engineering
Content
What
The Battlefield 6 out-of-game web experience reimagined as a cinematic character hub using motion
Why
Static profiles limited engagement between sessions, while the web experience lacked the energy and interactivity of the game.
Who
Designed for Battlefield players looking to engage with the game, its characters, and its world beyond the match.
What
The Battlefield 6 out-of-game web experience reimagined as a cinematic character hub using motion
Why
Static profiles limited engagement between sessions, while the web experience lacked the energy and interactivity of the game.
Who
Designed for Battlefield players looking to engage with the game, its characters, and its world beyond the match.
The problem
The existing character profiles weren’t encouraging
deeper exploration.
The problem
The existing character profiles weren’t encouraging deeper exploration.
The ask
"Make character discovery more engaging
and exploratory"
The ask
"Make character discovery more engaging and exploratory"
I reframed to ask to become: "If character discovery felt more immersive and exploratory, would players explore more characters?"
I reframed to ask to become: "If character discovery felt more immersive and exploratory, would players explore more characters?"
Option A: Existing components
*This section includes interactive motion and animations and is best experienced on desktop.
Design solutions: Balancing ambition with constraints
Engineering teams were mid-sprint with fixed release windows, and we were working with a tight timeline. Rather than advocate for one ideal solution and risk the project stalling, I designed two directions so the team could move forward with whatever was actually buildable.
Built from existing design library components and ea.com patterns already live in Storybook. Faster to ship, lower dev lift, consistent with the broader system.
Individual character profiles
Landing page
Option B: Bespoke experience
Combination of existing and new components, new animations, background transitions, hover states. Higher lift, but is a stronger expression of the hypothesis
Landing page
Individual character profiles
Option A: Existing components
*This section includes interactive motion and animations and is best experienced on desktop.
Design solutions: Balancing ambition with constraints
Engineering teams were mid-sprint with fixed release windows, and we were working with a tight timeline. Rather than advocate for one ideal solution and risk the project stalling, I designed two directions so the team could move forward with whatever was actually buildable.
Built from existing design library components and ea.com patterns already live in Storybook. Faster to ship, lower dev lift, consistent with the broader system.
Individual character profiles
Landing page
Option B: Bespoke experience
Combination of existing and new components, new animations, background transitions, hover states. Higher lift, but is a stronger expression of the hypothesis
Landing page
Individual character profiles
Hypothesis
A more immersive character experience will encourage deeper character exploration.
Testing the hypothesis
Hypothesis
A more immersive character experience will encourage deeper character exploration.
Testing the hypothesis
Primary
Depth of exploration: Are players discovering more characters?
Metric: profiles viewed per session and session duration
Secondary
Interaction: Are players engaging with the new discovery experience?
Metrics: Navigation, interaction behaviour
Results and learnings
The results challenged part of the hypothesis.
The cinematic experience introduced more friction at entry. However, players who entered the experience explored more character profiles.
Entry engagement
Initial animation load time introduced friction.
Character exploration
Players who entered the experience viewed more profiles.
Limitation
Low traffic and multiple variables made it difficult to attribute results to any single interaction.
Entry engagement
Initial animation load time introduced friction.
Character exploration
Players who entered the experience viewed more profiles.
Limitation
Low traffic and multiple variables made it difficult to attribute results to any single interaction.
Results and learnings
The results challenged part of the hypothesis.
The cinematic experience introduced more friction at entry. However, players who entered the experience explored more character profiles.
Entry engagement
Initial animation load time introduced friction.
Character exploration
Players who entered the experience viewed more profiles.
Limitation
Low traffic and multiple variables made it difficult to attribute results to any single interaction.
Entry engagement
Initial animation load time introduced friction.
Character exploration
Players who entered the experience viewed more profiles.
Limitation
Low traffic and multiple variables made it difficult to attribute results to any single interaction.
Next steps
The first experiment gave us enough signal to refine the direction, but not enough to isolate what was driving behaviour. My next step would have been to run narrower experiments.
Reduce entry friction
Remove or streamline initial animation and surface a character immediately.
Improve discoverability
Create clearer entry points into the character experience, particularly on mobile.
Isolate variables
Test motion, navigation, and narrative independently to understand what actually drives engagement.
Next steps
The first experiment gave us enough signal to refine the direction, but not enough to isolate what was driving behaviour. My next step would have been to run narrower experiments.
Reduce entry friction
Remove or streamline initial animation and surface a character immediately.
Improve discoverability
Create clearer entry points into the character experience, particularly on mobile.
Isolate variables
Test motion, navigation, and narrative independently to understand what actually drives engagement.
That changed how I thought about success. It wasn't enough to measure deeper exploration among players who made it in, we also needed to understand whether the new experience was creating friction before they reached the content.
That changed how I thought about success. It wasn't enough to measure deeper exploration among players who made it in, we also needed to understand whether the new experience was creating friction before they reached the content.
Learnings & looking ahead
This project started as an exploration I pursued independently and grew into an experiment backed by the wider team. The biggest takeaway wasn’t whether motion “worked,” but learning how to turn a creative direction into a testable hypothesis and use imperfect results to make the next iteration sharper.
Learnings & looking ahead
This project started as an exploration I pursued independently and grew into an experiment backed by the wider team. The biggest takeaway wasn’t whether motion “worked,” but learning how to turn a creative direction into a testable hypothesis and use imperfect results to make the next iteration sharper.
I reframed to ask to become: "If character discovery felt more immersive and exploratory, would players explore more characters?"
Design solutions: Balancing ambition with constraints
Engineering teams were mid-sprint with fixed release windows, and we were working with a tight timeline. Rather than advocate for one ideal solution and risk the project stalling, I designed two directions so the team could move forward with whatever was actually buildable.
Landing page
Individual character profiles
Landing page
Individual character profiles
Option A: Existing components
Built from existing design library components and ea.com patterns already live in Storybook. Faster to ship, lower dev lift, consistent with the broader system.
Option B: Bespoke experience
Combination of existing and new components, new animations, background transitions, hover states. Higher lift, but is a stronger expression of the hypothesis
Testing the hypothesis
Hypothesis
A more immersive character experience will encourage
deeper character exploration.
The A/B test was designed to determine whether a more cinematic experience could deepen player engagement and establish a pattern worth scaling across future campaigns and franchises.
Results and learnings
The results challenged part of the hypothesis.
The cinematic experience introduced more friction at entry. However, players who entered the experience explored more character profiles.
Entry engagement
Initial animation load time introduced friction.
Character exploration
Players who entered the experience viewed more profiles.
Limitation
Low traffic and multiple variables made it difficult to attribute results to any single interaction.
That changed how I thought about success. It wasn't enough to measure deeper exploration among players who made it in, we also needed to understand whether the new experience was creating friction before they reached the content.
Next steps
The first experiment gave us enough signal to refine the direction, but not enough to isolate what was driving behaviour. My next step would have been to run narrower experiments.
Reduce entry friction
Remove or streamline initial animation and surface a character immediately.
Improve discoverability
Create clearer entry points into the character experience, particularly on mobile.
Isolate variables
Test motion, navigation, and narrative independently to understand what actually drives engagement.
Learnings & looking ahead
This project started as an exploration I pursued independently and grew into an experiment backed by the wider team. The biggest takeaway wasn’t whether motion “worked,” but learning how to turn a creative direction into a testable hypothesis and use imperfect results to make the next iteration sharper.