Work / UI/UX Design / The Kinetic Editorial

UI/UX · Elite Youth Soccer · Figma · 2026

The Kinetic
Editorial.

A coaching platform UI for weekly training plans, live roster intelligence, and a player-first weekly playbook.

The Kinetic Editorial is a UI/UX concept for professional football coaching operations: structured sessions in the Training Hub, a Field Report roster view for match readiness, and a light player experience for home practice. The visual system pairs deep navy surfaces with lime action states and restrained gold accents for wayfinding — designed end-to-end in Figma.

View screens ↓ Auth & login
The Kinetic Editorial login and branding panel Login
The Kinetic Editorial field report dashboard Field report
The Kinetic Editorial training hub screen Training hub
Project
Coaching SaaS
Scope
UI/UX Concept
Tool
Figma
Year
2026
Training Hub
Field report
Player playbook
Roster health
Tactical drills
Coach & parent flows
Training Hub
Field report
Player playbook
Roster health
Tactical drills
Coach & parent flows

The Brief

Coaching ops,
one interface.

Youth academies juggle weekly curriculum, match-day readiness, and parent communication — often across scattered spreadsheets and chat threads.

This concept unifies those threads into a cohesive surface language: structured training weeks, a roster-first Field Report, and a player home view that reduces cognitive load between sessions. Navigation, cards, and dense data tables share the same rhythm for coach and player modes.

Designed in Figma with responsive layouts, component libraries for cards and sidebars, and high-fidelity mockups for auth, dashboard, and drill detail flows.

4+
primary screens prototyped
2
audiences — coach and player/parent
100%
desktop-first workflow UI
1
navy + lime visual system

Inside the Product

Four flows.
One dashboard.

The experience is organised around coach workflows and player follow-through — each surface reuses the same card language and accent rules.

01 / Training

Weekly
Training Hub

Session themes, technical and mental focus, coaching points, and a drill sequence with timing — the coach's weekly control centre.

Drills Periodization Publish
02 / Roster

Field Report
& readiness

Roster table with condition bars, match-ready vs recovery states, tactical board preview, and upcoming sessions — ops at a glance.

Squad Health Calendar
03 / Player

Weekly
Playbook

Hero copy for the active season, drill cards with watch CTAs, progress and daily checklist — built for clarity on repeat visits.

Home Video Progress
04 / Access

Auth &
roles

Split sign-in for coach vs parent/player, academy email fields, and social access patterns — framed with brand illustration on the left rail.

Login Trust Roles

The Visual Language

Chrome. Palette.
Typography.

01 — Product chrome

Navy chrome,
lime for action.

Top navigation centres wayfinding; sidebars stay light grey for scan-ability. Active destinations use lime — sparingly — for focus, status pills, and primary calls to action. Cards float on paper-toned neutrals with consistent corner radii.

The Kinetic Editorial login split layout
02 — The palette

Navy-led,
lime on paper.

Deep navy anchors navigation and data-heavy regions; lime signals momentum (active links, progress, CTAs). Soft greys separate modules without fighting the brand.

#051129
#0F4D6D
#6DFFB8
#EFEFF1
#FAFAF7
03 — Typography

Confident &
legible.

Headlines use a bold geometric sans for dashboard impact; body copy stays neutral and high-contrast on light shells. Mono labels echo tactical board callouts.

The Kinetic
Editorial.
Display · Sans
Field report · roster row
Interface · Sans
WEEK 14 · TACTICAL PERIODIZATION
Labels · Mono

Screens

Coach &
player.

High-fidelity mockups covering the player weekly playbook and the coach Field Report — same grid, different density.

The Kinetic Editorial player weekly playbook
Player Weekly playbook & progress
The Kinetic Editorial field report and roster
Coach Field report & readiness
The Kinetic Editorial training hub weekly plan
Training Hub Drills, focus & coaching points

Access

Sign-in
& trust.

Full-width Figma frame for the split login — illustration and “Today's Pulse” widget on the left, form and social access on the right.

The Kinetic Editorial Login PNG
The Kinetic Editorial login split layout

Need product UI that feels
as serious as the sport?

If you're shaping a coaching tool, analytics surface, or training workflow — let's craft interfaces that hold up under real match-week pressure.

Start a project → See more work