Project Metadata
- Role: Lead UX, Product Designer & UI Engineer
- Timeline: High-Velocity Sprint (Driven by upfront system mapping and AI-assisted implementation)
- Platform: Responsive Web
- Tech Stack: Figma, Claude Code
- Core Focus: Design a responsive layout, information architecture, that can present an immense amount of data on resource lists that rank and rate thousands of high school and collegiate athletes across the country each academic year across dozens of data products.
The Business & User Challenge
Rivals creates lists of high school and collegiate athletes to better showcase talent so the scouts and recruiting experts can rate and rank them accordingly. The hurdle is how to optimize the layout to display tons of data point per entry, especially in modern responsove design – eleviating clutter.
- The Core Objective: An easy read:
- 50+ players: Find a layout that can showcase lots of rows, sometimes hundreds, all with many data points.
- Mobile stacking: Avoid mobile rows that are so tall you end up with just 2-3 per viewport.
- Ad-supported: The business relies on ad placements, which can interrupt the experience, but is unavoidable for revenue capture.
Example: Team Commit List
Rivals lists all the High School players than have verbally committed to joing a College team's roster the following season.
Data points:
- Player info (Name, height, weight, hometown, High School)
- Position
- Rating (Stars, score)
- Rankings (National, Position, State)
- Status (Commitment date)
- Verified / Unverified
Example: Team Visits List
Rivals lists all the High School players than have visited a College team's school for a recruiting tour.
Data points:
- Player info (Name, height, weight, hometown, High School)
- Visit Date
- Visit type (Official, Unofficial)
- Position
- Rating (Stars, score)
- Rankings (National, Position, State)
- Status (Commitment date)
- Verified / Unverified
Example: High School Pages
The Rivals database has index pages for each high school in the country (around 25,000). For each school, we want to clearly represent...
High School Sections:
- School name, mascot, colors, athletic programs
- Sport-specific KPIs (National rank, State rank, season record)
- News
- Scores
- Schedule
- Roster
- Notable Alumnni