06, Performance & data product
OrganisationRoad to Race
Road to Race
Turning a session into the next practice action
A session result is useful when it leads to a specific next action. Road to Race connects a sample lap review to sector replay and a focused practice plan, with the same task represented on web and mobile in both themes.
Product design · Web app led in dark mode with a light theme, and a mobile app in dark and light modes · Figma design and prototype
Project brief
About
A driver development product for trainee racing drivers, built around an academy learning journey: prepare for an event, understand session feedback, choose a specific drill and review progress over time. The prototypes cover event and circuit context, driver and vehicle detail, session review, lap replay, comparison, coaching prompts, practice planning and standings. A dark web app, with a light desktop variant, and a mobile app in dark and light modes.
Problem
A lap time on its own is not a development plan. Trainee racing drivers need preparation, feedback, a chosen drill and progress to connect, and a product that stops at a lap-time dashboard leaves them without a next action.
Objective
Separate standing from development, and always place a concrete action after the analysis.
How the interfaces support the task
Desktop preparation and analysis workspace: The desktop workspace places event and circuit context beside session analysis. Lap replay, comparison and the training plan support preparation and debrief with related information visible together.
Mobile focused access: The phone presents event details, session review, practice planning and standings as focused screens. Drivers can follow one task at a time while keeping their next practice action within reach.
Together: Both support the same driver-development journey. Desktop holds more context alongside the task; mobile presents it in sequence.
From feedback to a practice goal: Session review sets out lap and sector feedback. The improvement plan turns it into a focus, and the five-lap consistency drill gives the driver a repeatable practice task. All figures shown are sample data.
Scope, work needed
- Product architecture from home through performance, review, replay and leaderboard
- Session Review with lap summary, sector performance and coach feedback
- Lap replay and improvement-plan states linked back into practice
- Comparison and season standings contexts
- A web app led in dark mode, with a light theme of the same layout
- A mobile app designed in both dark and light modes
- Leaderboard, session review, lap replay and progress across both platforms
- Web layouts at 1440 × 960, with the mobile Home shown at 414 × 892 in the light theme
Personas
Trainee racing driver, track-day and academy
TaskPrepare for an event, review the session afterwards, choose what to practise and track progression.
Design responseOne path runs event preparation, replay and comparison into a next-practice choice, with progression kept in view.
Design personas · Portrait · Yogendra Singh / Pexels.
Our contribution
The preparation and performance information architecture, running from the next event through session review, replay, comparison, leaderboard and progression.
Session analysis and sector replay design, and the comparison and practice-plan flow that turns a review into one specific next action.
Leaderboard and progress views that keep championship position separate from personal development.
A reusable component set with dark and light themes, and matched web and mobile layouts: a dark web app with a light desktop variant, and a mobile app in dark and light modes.
Design narrative
01Separate standing from development
Competition points explain position in the championship. Session consistency, sector context and coach feedback explain the development task, which is a different question.
The home screen leads with the next race and a short performance summary, keeping the two readable as separate things rather than collapsing them into one score.
Home, Web · Dark, the next race first, with a short performance summary beneath.
02Put an action after the analysis
Session Review pairs the lap summary with sector performance and coach feedback, and ends on an improvement-plan action. Review leads to replay, and replay leads to practice.
Lap Replay marks the zones that action refers to, and Where to Gain turns one zone into a single practice focus on the phone, so the loop closes on something the driver can actually do next time out.
Session Review, Web · Dark, analysis leads, one action closes it.
Lap Replay, Web · Dark, the zones a practice focus refers to.
A designed replay sequence on an illustrative track, not a recording or telemetry engine.
Where to Gain, Mobile · Dark, one highlighted zone becomes one practice focus.
The highlighted zone is illustrative coaching content, not measured evidence of any driver's performance.
03Reorder rather than shrink
The desktop layout holds the analysis in a main column with supporting metrics and feedback beside it, so comparisons can be read at a glance. Mobile turns the same material into a sequence: lap summary, metrics, sectors, feedback and plan action above fixed bottom navigation.
Shown side by side, the dark and light mobile reviews make that reordering, and the theme switch, easy to compare.
Session Review, Mobile · Dark, the review stacked, plan action kept prominent.
Session Review, Mobile · Light, the same review in the light theme.
04One theme system, two platforms
The same home layout resolves in the dark and light web themes, and the mobile home carries the identical structure in both modes.
Colour never carries meaning alone: status still reads through label and icon in either theme.
Home, Web · Light, the same layout resolved through the light theme.
Home, Mobile · Dark, the same priorities stacked at phone width.
Home, Mobile · Light, the identical structure in the light theme.
05Place personal standing within the season
The leaderboard combines a leading podium with the wider ranked field and academy honours, while Compare sets a driver against a chosen rival and the next place to look for time.
Placement is context, not the point of the product. It answers where a driver sits, while the review and practice views answer what to do about it.
Leaderboard, Web · Dark, personal position inside the wider field.
Compare, Web · Dark, a driver set against a chosen rival.
06The same standing at phone width
Standings and comparison carry to mobile in both themes, keeping the podium, the ranked field and the who-to-beat-next card. Each pair shows the dark and light theme of the same screen.
Leaderboard, Mobile · Dark, podium and ranked field at phone width.
Leaderboard, Mobile · Light, the same standings in the light theme.
Compare, Mobile · Dark, the next rival and the next place to look for time.
Compare, Mobile · Light, the same comparison in the light theme.
07The light theme across the phone journey
The four key mobile screens read side by side in the light theme: home prepares the next event, Session Review covers the debrief, and Leaderboard and Compare cover standings and comparison.
Home
Home, Mobile · Light, the identical structure in the light theme.
Session Review
Session Review, Mobile · Light, the same review in the light theme.
Leaderboard
Leaderboard, Mobile · Light, the same standings in the light theme.
Compare
Compare, Mobile · Light, the same comparison in the light theme.
08Keep development separate from position
The mobile progress view holds improvement-plan completion, session counts, consistency and badges apart from championship position.
The progress view compares session history and practice-plan completion, using illustrative data to show development between race weekends.
Progress, Mobile · Dark, development tracked apart from championship position.
Sessions, consistency, targets and badges are sample data, not measured improvement.
09What was delivered
One navigation model and information architecture across four presentations, a reusable component set and a semantic token collection carrying dark and light modes.
Session review, replay, comparison, leaderboard and progress designs for web and mobile, with interactive prototypes for each presentation.
One navigation model across devices, with predictable return paths.
Status labels carry meaning through icon and wording, not colour alone.
Systems & responsive
Design system
Primitive, semantic and layout variables back the product. The semantic collection carries dark and light modes, and both the web and mobile screens resolve the same tokens through those themes, so a status or a delta reads identically wherever it appears. Buttons, mobile navigation and headers are shared components across the four presentations.
Responsive behaviour
The product spans four presentations: a dark web app at 1440 × 960 with a light desktop variant, and a mobile app in dark and light modes. Desktop keeps the analysis in a primary column with supporting metrics and feedback beside it. Mobile turns the same material into a sequence above fixed bottom navigation, and each mobile theme carries the same structure at phone width.
Prototype
Prototype walkthroughs
Web walkthrough
Desktop preparation and analysis workspace.
Dark theme · 4:24
Academy home and next race, circuit guide with sector context, driver and vehicle detail, event schedule, training plan and next drill, progress and track history, lap replay with sector context, comparison and practice focus, coach feedback, news and leaderboard.
Mobile walkthrough
Phone companion for preparation and follow-through.
Dark theme · 1:50
Race preparation through calendar and event details, session review, improvement plan and the five-lap consistency drill, then leaderboard, comparison and where to gain.
Recorded prototype walkthroughs with illustrative data.
Session Review opens the paused replay, replay links to sector states and training, and the final playing state advances to the final paused state. Four device and theme entry points are available. The replay is a designed sequence rather than a recording.
Explore prototype routes
Gallery
Web · Dark · Web · Light · Mobile · Dark · Mobile · Light
18 images
1 / 18
Web · Dark
Home, Web · Dark, the next race first, with a short performance summary beneath.
Project notes
A short set of notes on the material shown in the screens.
- Lap data, standings, coaching examples and improvement targets shown are illustrative prototype content.
- No coach endorsement or quoted contribution is claimed.
Takeaway & evaluation
Driver development tools help most when analysis always ends in a concrete next action, and when standing is kept clearly separate from personal progression.
Outcome metrics not available.
What to measure
Proposed evaluation, not conducted research.
- Can a driver identify their practice focus from a session review and follow it through replay to a practice action?
- Can they interpret comparison and standings without confusing leaderboard position with their own development trend?