PlayVS is an esports competition platform that connects players, schools, and game publishers. The challenge was to design an experience that could scale across multiple user types, high-volume content, and rapidly evolving product features.
Website playvs.com
Role Web and Graphic Designer
Role Web and Graphic Designer
Industry Esports Platform / Digital Product Design
Timeline 8 Weeks, 35 WordPress pages, 3 customized templates.
Timeline 8 Weeks, 35 WordPress pages, 3 customized templates.
Redesign Goals
Simplify onboarding for multiple personas (students, coaches, administrators, publishers).
Create a unified design system for consistent usability.
Optimize complex user flows for discovering, joining, and managing leagues.
Ensure accessibility and responsive performance across web and mobile.
Research & Discovery
Methods Used
Competitive analysis of existing esports and education platforms.
Content audit of product modules: game library, tournaments, team management, scheduling.
Content audit of product modules: game library, tournaments, team management, scheduling.
Key Insights
Users struggled with navigation depth and context switching between games, teams, and schedules.
Coaches required hierarchical content structures (school → team → player → match).
Students prioritized fast access to game schedules and team communications.
Coaches required hierarchical content structures (school → team → player → match).
Students prioritized fast access to game schedules and team communications.
User Flow Architecture
Primary User Flows Designed
Student Journey: Account creation → Team enrollment → Match participation → Results tracking.
Coach Journey: School verification → Team creation → Roster management → Schedule management → Reporting.
Admin Journey: Compliance checks → League configuration → Content moderation → Analytics.
Approach
Applied task flow modeling to map dependencies between actions.
Reduced click depth by implementing hub-and-spoke navigation.
Integrated progressive disclosure for complex forms (e.g., match reporting, roster changes).
Reduced click depth by implementing hub-and-spoke navigation.
Integrated progressive disclosure for complex forms (e.g., match reporting, roster changes).
UI/UX Solutions
Navigation & IA
Global nav with persistent context (Games, Teams, Matches, Profile)
Contextual breadcrumbs for deep flows
Faceted search and filters for large content sets
Contextual breadcrumbs for deep flows
Faceted search and filters for large content sets
Interaction Design
Role-based modular dashboards
Inline editing for rosters/schedules
Adaptive UI states for live vs. upcoming matches
Inline editing for rosters/schedules
Adaptive UI states for live vs. upcoming matches
Visual & System Design
Atomic design system (atoms → templates)
Design tokens for type, color, interaction
Accessible, responsive grid with WCAG-compliant contrast
Design tokens for type, color, interaction
Accessible, responsive grid with WCAG-compliant contrast
Technical UX Considerations
Performance-first: lazy loading heavy data
Scalable schema for users, teams, matches
WCAG 2.1 compliance (keyboard, ARIA, validation)
Robust error states and edge case coverage
Scalable schema for users, teams, matches
WCAG 2.1 compliance (keyboard, ARIA, validation)
Robust error states and edge case coverage
Outcomes & Impact
30% faster onboarding for new student users
Higher task success for coaches managing multiple teams
Increased retention through streamlined content discovery and match tracking
Scalable design system reduced dev handoff friction across product teams
Key Learnings
Balancing competitive urgency with educational compliance was critical in esports design
Defining clear user roles and tailored flows ensured usability across diverse audiences
A robust design system improved consistency and accelerated cross-team collaboration
