Screen 01
Recruiting board
I kept the player list, scouting information, and recruiting hours together so the next decision stays in view.
← UI & UX studies
UI & UX / Game interface concept
Rivalry Road.
I designed a college football interface that follows a team from recruiting season to game day. Here are the finished screens and the wireframes behind them.
My work UI design · Wireframes · Visual design
Figma 12 screens · Personal concept
Build the roster
Finding the right players.
I wanted the recruiting screens to feel connected without forcing every task into the same layout. The board, player profiles, map, and comparisons each give the information a different purpose.
Screen 02
Prospect dossier
The player portrait anchors the screen, with ratings and the school race giving the profile more context.
Screen 05
Recruiting map
The map puts the recruiting regions in context without making the player details harder to read.
Screen 06
Compare quarterbacks
Mirrored rating bars make the two prospects easier to compare, with unknown ratings left clearly unscouted.
Screen 07
Campus visit
The visit screen brings recruiting priorities and the school race into the same decision.
Manage the week
The work between games.
The team hub, lineup, training, and playbook share the same controls and spacing. Player imagery and team details give each one its own character.
Screen 04
Dynasty home
A home base for the week, with the upcoming matchup, team status, and the next tasks close at hand.
Screen 03
Offensive depth chart
I grouped the starters by position and gave the selected player a clear place above the rest of the lineup.
Screen 08
Weekly training
The selected player, training options, and expected rating changes share a clear hierarchy.
Screen 09
Offensive playbook
I used consistent player markers and route lines, with quieter field markings behind them.
Take the field
From kickoff to the final score.
I brought more of a broadcast feel into game day, with facing helmets, gameplay behind the menus, and a HUD that keeps the score, clocks, possession, and timeouts together.
Screen 10
Pregame matchup
Facing helmets, team colors, and a stadium backdrop give the matchup its own moment before kickoff.
Screen 11
Choose your next play
Gameplay stays visible behind the interface. The play cards and score HUD carry the information needed between snaps.
Screen 12
Postgame report
The final score leads into the team comparison and player performance, wrapping up the game in one view.
The structure
Wireframes in Figma.
Explore the layouts and information hierarchy before the visual design.
The visual design
Finished screens in Figma.
Browse the full set of screens, with the team colors, imagery, and interface details.
Project files
Take a closer look.
Open the source file in Figma or download the 12 finished screens and matching wireframes. An access code is required for these files.
Personal design concept. Fictional teams and players.