From Templates to Patterns:
Designing a scalable foundation for EA.com
Timeline
July 2025 - January 2026
Focus
Systems Design
UX Patterns
Team
Product
Design
Engineering
Content
From Templates to Patterns:
Designing a scalable foundation for EA.com
Timeline
July 2025 - January 2026
Focus
Systems Design
UX Patterns
Team
Product
Design
Engineering
Content
EA.com’s platform migration created an opportunity to rethink how pages were built. I helped define a reusable pattern system that enabled greater flexibility and scalability across the platform.
EA.com’s platform migration created an opportunity to rethink how pages were built. I helped define a reusable pattern system that enabled greater flexibility and scalability across the platform.
The Challenge
The Challenge
Rigid templates on the legacy platform limited flexibility and required Design and Engineering support for routine updates. As EA.com grew, the existing model became increasingly difficult to scale.
The Challenge
The Challenge
Rigid templates on the legacy platform limited flexibility and required Design and Engineering support for routine updates. As EA.com grew, the existing model became increasingly difficult to scale.
01
High team dependency
Routine page changes often required Design and Engineering support, creating unnecessary operational overhead.
02
Rigid templates
Pages were tied to predefined structures, limiting how teams could adapt experiences to different content needs.
03
Difficult to scale
As EA.com expanded across games, corporate content, and campaigns, the existing model struggled to support increasingly diverse needs.
Key Problems
The Approach
Moving from rigid templates to a consistent system that gave teams more flexibility at the page level.
The Approach
Moving from rigid templates to a consistent system that gave teams more flexibility at the page level.
Migration
Definind the System
I looked across different franchises and page types on EA.com to identify recurring content and interaction needs…
I looked across different franchises and page types on EA.com to identify recurring content and interaction needs…
…then using those insights to define a reusable system. Components form the building blocks, patterns address recurring needs, and pages bring them together into flexible experiences.
Pages
Patterns
Experiences
Components
The Challenge
Rigid templates on the legacy platform limited flexibility and required Design and Engineering support for routine updates. As EA.com grew, the existing model became increasingly difficult to scale.
Key Problems
01
High team dependency
Routine page changes often required Design and Engineering support, creating unnecessary operational overhead.
02
Rigid templates
Pages were tied to predefined structures, limiting how teams could adapt experiences to different content needs.
03
Difficult to scale
As EA.com expanded across games, corporate content, and campaigns, the existing model struggled to support increasingly diverse needs.
The Opportunity
Moving from rigid templates to a consistent system that gave teams more flexibility at the page level.
Migration
Page A
Page B
Page C
Page D
Page E
Page F
Rigid templates
Outdated components
Manual updates
High maintenance
Rigid templates. Limited flexibility.
Legacy Platform
Structured flexibility
Updated components
Streamlined workflow
Easier to evolve
Core Pattern
Structure
Instance A
Instance B
Instance C
Structured flexibility. Built to scale.
New Platform
Defining the System
I looked across different franchises and page types on EA.com to identify recurring content and interaction needs…
…then using those insights to define a reusable system. Components form the building blocks, patterns address recurring needs, and pages bring them together into flexible experiences.
Pages
Patterns
Experiences
Components
Pattern Principles
01
Reusable by design
Patterns solve recurring content needs rather than individual page requirements.
02
Flexible within constraints
Teams can adapt content and composition while maintaining consistent interaction and UX behaviour.
03
Built to evolve
The system can expand as new requirements emerge without requiring the platform to be redesigned around them.
Applying the system:
EA.com Game Library
Applying the system:
EA.com Game Library
Pattern Principles
01
Reusable by design
Patterns solve recurring content needs rather than individual page requirements.
02
Flexible within constraints
Teams can adapt content and composition while maintaining consistent interaction and UX behaviour.
03
Built to evolve
The system can expand as new requirements emerge without requiring the platform to be redesigned around them.
Consolidating fragmented experiences into one pattern
Multiple Game Library experiences served similar discovery needs but were built as separate pages. I consolidated these into a shared pattern that could support different content and discovery needs within one flexible structure.
Defining a shared structure
These pages all helped players browse and discover games in different ways. I brought them into a shared structure that created a more consistent Game Library experience.
Defining what stays fixed and what can flex
With the core structure in place, I defined which elements were required and which could adapt based on the content. This kept the experience consistent while giving teams flexibility to support different discovery needs.
Consolidating fragmented experiences into one pattern
Multiple Game Library experiences served similar discovery needs but were built as separate pages. I consolidated these into a shared pattern that could support different content and discovery needs within one flexible structure.
into a single shared pattern
/games
/games/
coming-soon
/games/
library
/games/
library#genres
Game Library
Discovery
/games/
library
#platforms
/games/
library#age-ratings
/games/
library#play-modes
can be unified
Defining a shared structure
These pages all helped players browse and discover games in different ways. I brought them into a shared structure that created a more consistent Game Library experience.
01
Entry/Orientation
Sets initial context for browsing.
02
Discovery Controls
Enables switching between discovery states.
03
Results Grid
Presents the game catalog.
04
Contextual Support
Adds explanation when needed.
05
Promotional Content
Highlights secondary content.
06
Closure / Continuation
Marks the end of the browsing flow.
Defining what stays fixed and what can flex
With the core structure in place, I defined which elements were required and which could adapt based on the content. This kept the experience consistent while giving teams flexibility to support different discovery needs.
01
Entry/Orientation - Required
Structure is fixed; content and hero treatment may vary
02
Discovery Controls - Required
03
Contextual Support - Optional
Used only when additional explanation is needed.
04
Results Grid - Required
Structure is fixed; results, metadata, and ordering adapt by state.
05
Promotional Content - Optional
Included based on business or editorial needs.
06
Consistent end point; content may vary.
Closure / Continuation - Required
Control types vary by context; placement remains consistent
One structure, multiple configurations
With one shared structure in place, the Game Library could adapt to different content and discovery needs without creating a new pattern each time.
Games
Genre - First Person Shooter
Latest Games
Genre - Racing
Platform - XBOX
Games Coming Soon
One structure, multiple configurations
With one shared structure in place, the Game Library could adapt to different content and discovery needs without creating a new pattern each time.
Impact
Greater content team autonomy
Reusable patterns enabled Content teams to handle routine page updates independently, reducing reliance on Design and Engineering.
A repeatable model for migration
The approach established a scalable framework for migrating additional page types without carrying forward the limitations of rigid templates.
Clearer cross-team alignment
Shared patterns and guidelines gave teams a common framework for decision-making, reducing ambiguity and unnecessary back-and-forth.
Impact
The pattern-driven approach created a more flexible foundation for EA.com, making experiences easier to build, maintain, and evolve.
Greater content team autonomy
Reusable patterns enabled Content teams to handle routine page updates independently, reducing reliance on Design and Engineering.
A repeatable model for migration
The approach established a scalable framework for migrating additional page types without carrying forward the limitations of rigid templates.
Clearer cross-team alignment
Shared patterns and guidelines gave teams a common framework for decision-making, reducing ambiguity and unnecessary back-and-forth.
Learnings & looking ahead
Learnings & looking ahead
This project shifted my thinking from designing individual pages to thinking about the system behind them. The biggest challenge was finding the right balance - creating enough consistency to scale while giving teams the flexibility to build distinct experiences. It also showed me that scalability goes beyond the interface. The system needs to work just as well for the teams designing, building, and managing it.
It shaped how I approach platform design today: thinking beyond the immediate experience to how a system will be used, adapted, and evolve over time.
This project shifted my thinking from designing individual pages to thinking about the system behind them. The biggest challenge was finding the right balance - creating enough consistency to scale while giving teams the flexibility to build distinct experiences. It also showed me that scalability goes beyond the interface. The system needs to work just as well for the teams designing, building, and managing it.
It shaped how I approach platform design today: thinking beyond the immediate experience to how a system will be used, adapted, and evolve over time.