Digital Pool Tournament Card
Creating a scalable, repeatable UI for 45,000+ tournaments.
Digital Pool Tournament Card
Creating a scalable, repeatable UI for 45,000+ tournaments.
Digital Pool Tournament Card
Creating a scalable, repeatable UI for 45,000+ tournaments.
Digital Pool Tournament Card
Creating a scalable, repeatable UI for 45,000+ tournaments.
Digital Pool Tournament Card
Creating a scalable, repeatable UI for 45,000+ tournaments.
DEV READY
CONSISTENT
SCALABLE
DEV READY
CONSISTENT
SCALABLE
DEV READY
SCALABLE
CONSISTENT
DEV READY
SCALABLE
CONSISTENT
Role
Role
Role
Product design
Product design
Product design
Tools
Tools
Tools
Figma
Figma
Figma
Team
Team
Team
Me - Product design
Me - Product design
Me - Product design
Piper Yu - Product design
Piper Yu - Product design
Piper Yu - Product design
Emily Tsai - Product design
Emily Tsai - Product design
Emily Tsai - Product design
Christopher Clark - PM
Christopher Clark - PM
Christopher Clark - PM
Tim Traver - SWE
Tim Traver - SWE
Tim Traver - SWE
Isaac Wooten - SWE
Isaac Wooten - SWE
Isaac Wooten - SWE
Timeline
Timeline
Timeline
June - September 2024
June - September 2024
June - September 2024
The Problem
Digital Pool connects 16,000+ players to pool tournaments worldwide.
With over 45,000 events, every card varied wildly in size and structure.
Some showed entry fees. Some didn’t. Layouts changed from card to card.
The result? No cohesion. No structure. Just a chaotic feed.
The Problem
Digital Pool connects 16,000+ players to pool tournaments worldwide.
With over 45,000 events, every card varied wildly in size and structure.
Some showed entry fees. Some didn’t. Layouts changed from card to card.
The result? No cohesion. No structure. Just a chaotic feed.
The Problem
Digital Pool connects 16,000+ players to pool tournaments worldwide.
With over 45,000 events, every card varied wildly in size and structure.
Some showed entry fees. Some didn’t. Layouts changed from card to card.
The result? No cohesion. No structure. Just a chaotic feed.
The Problem
Digital Pool connects 16,000+ players to pool tournaments worldwide.
With over 45,000 events, every card varied wildly in size and structure.
Some showed entry fees. Some didn’t. Layouts changed from card to card.
The result? No cohesion. No structure. Just a chaotic feed.
The Problem
Digital Pool connects 16,000+ players to pool tournaments worldwide.
With over 45,000 events, every card varied wildly in size and structure.
Some showed entry fees. Some didn’t. Layouts changed from card to card.
The result? No cohesion. No structure. Just a chaotic feed.
My Role
I was tasked with redesigning the tournament card, the most reused component on the platform.
The goal: build something repeatable, consistent, and easy to scale.
I focused on structure first: date → game type → entry fee → prize.
Then, I designed a card that could flex with real tournament data.
My Role
I was tasked with redesigning the tournament card, the most reused component on the platform.
The goal: build something repeatable, consistent, and easy to scale.
I focused on structure first: date → game type → entry fee → prize.
Then, I designed a card that could flex with real tournament data.
My Role
I was tasked with redesigning the tournament card, the most reused component on the platform.
The goal: build something repeatable, consistent, and easy to scale.
I focused on structure first: date → game type → entry fee → prize.
Then, I designed a card that could flex with real tournament data.
My Role
I was tasked with redesigning the tournament card, the most reused component on the platform.
The goal: build something repeatable, consistent, and easy to scale.
I focused on structure first: date → game type → entry fee → prize.
Then, I designed a card that could flex with real tournament data.
My Role
I was tasked with redesigning the tournament card, the most reused component on the platform.
The goal: build something repeatable, consistent, and easy to scale.
I focused on structure first: date → game type → entry fee → prize.
Then, I designed a card that could flex with real tournament data.
BEFORE
BEFORE
BEFORE
BEFORE
BEFORE
AFTER
AFTER
Design Decisions
I built around real content (long names, big posters, missing info).
Balanced spacing and visual rhythm for fast scanning.
Used Google M3 to align with system standards and make dev handoff seamless.
Design Decisions
I built around real content (long names, big posters, missing info).
Balanced spacing and visual rhythm for fast scanning.
Used Google M3 to align with system standards and make dev handoff seamless.
Design Decisions
I built around real content (long names, big posters, missing info).
Balanced spacing and visual rhythm for fast scanning.
Used Google M3 to align with system standards and make dev handoff seamless.
Design Decisions
I built around real content (long names, big posters, missing info).
Balanced spacing and visual rhythm for fast scanning.
Used Google M3 to align with system standards and make dev handoff seamless.
Design Decisions
I built around real content (long names, big posters, missing info).
Balanced spacing and visual rhythm for fast scanning.
Used Google M3 to align with system standards and make dev handoff seamless.
What went into making a card that scales:
What went into making a card that scales:
What went into making a card that scales:
Poster Flexibility
Poster Flexibility
Layout Consistency
Layout Consistency
Card Reusability
Card Reusability
Google M3
Google M3
+
+
=
=
Poster Flexibility
Layout Consistency
Card Reusability
Google M3
+
=
Iterations
I tested three earlier versions.
Some were clean, but not flexible. Others looked good, but broke with real data.
What I learned: clean cards aren’t enough. They have to scale.
Iterations
I tested three earlier versions.
Some were clean, but not flexible. Others looked good, but broke with real data.
What I learned: clean cards aren’t enough. They have to scale.
Iterations
I tested three earlier versions.
Some were clean, but not flexible. Others looked good, but broke with real data.
What I learned: clean cards aren’t enough. They have to scale.
Iterations
I tested three earlier versions.
Some were clean, but not flexible. Others looked good, but broke with real data.
What I learned: clean cards aren’t enough. They have to scale.
Iterations
I tested three earlier versions.
Some were clean, but not flexible. Others looked good, but broke with real data.
What I learned: clean cards aren’t enough. They have to scale.
Vertical card
Vertical card
Vertical card
Too tall to scale across many tournaments.
Too tall to scale across many tournaments.
Too tall to scale across many tournaments.
Horizontal card
Horizontal card
Horizontal card
Broke with real data and content variation.
Broke with real data and content variation.
Broke with real data and content variation.
Google M3 list component
Google M3 list component
Google M3 list component
Clean system, but too rigid for edge cases.
Clean system, but too rigid for edge cases.
Clean system, but too rigid for edge cases.
Impact
Impact
Impact
Scalable System 🧩
Scalable System 🧩
Scalable System 🧩
One unified card
One unified card
One unified card
Replaced scattered one-offs with a reusable, repeatable template.
Replaced scattered one-offs with a reusable, repeatable template.
Replaced scattered one-offs with a reusable, repeatable template.
Visual Consistency 🎯
Visual Consistency 🎯
Visual Consistency 🎯
Clean layout
Clean layout
Clean layout
Cards now follow the same structure with no surprises, no scroll bloat.
Cards now follow the same structure with no surprises, no scroll bloat.
Cards now follow the same structure with no surprises, no scroll bloat.
Future-Ready Design 🔧
Future-Ready Design 🔧
Future-Ready Design 🔧
Built to scale
Built to scale
Built to scale
Supports future features like filters and tags without needing a redesign.
Supports future features like filters and tags without needing a redesign.
Supports future features like filters and tags without needing a redesign.
Takeaways
This wasn’t just a cleanup job. It was a systems decision.
A small card, now ready to handle a growing platform with 45,000+ tournaments.
As a junior designer, I focus on the tiny details that unlock scale.
That’s how I think about impact.
Takeaways
This wasn’t just a cleanup job. It was a systems decision.
A small card, now ready to handle a growing platform with 45,000+ tournaments.
As a junior designer, I focus on the tiny details that unlock scale.
That’s how I think about impact.
Takeaways
This wasn’t just a cleanup job. It was a systems decision.
A small card, now ready to handle a growing platform with 45,000+ tournaments.
As a junior designer, I focus on the tiny details that unlock scale.
That’s how I think about impact.
Takeaways
This wasn’t just a cleanup job. It was a systems decision.
A small card, now ready to handle a growing platform with 45,000+ tournaments.
As a junior designer, I focus on the tiny details that unlock scale.
That’s how I think about impact.
Takeaways
This wasn’t just a cleanup job. It was a systems decision.
A small card, now ready to handle a growing platform with 45,000+ tournaments.
As a junior designer, I focus on the tiny details that unlock scale.
That’s how I think about impact.