Andrés Marín/2025
Andrés Marín
A personal brand and coaching site for a simracing driver: cinematic landing, services, pricing, accounts and a sponsor pitch.
(01) Overview
Andrés Marín is a competitive iRacing driver and simracing coach with a Spanish-speaking audience across Latin America and Spain. The site had to do several jobs at once: establish him as a driver, sell one-to-one coaching, capture emails, send followers to his channels and pitch brands on sponsorship. I designed the whole experience, from the hero video to the account screens.
Client
Andrés Marín
Year
2025
Services
Design, Development
Deliverables
Web design, Design system, Account flows, Motion & transitions
(A) The Challenge
Motorsport sells on intensity, but a coaching site sells on clarity: what a session is, what it costs and how to book. The design had to carry the energy of racing without burying the offer, and hold up on a phone as well as on a wide monitor.
(B) The Approach
- 01
A deliberately small system
Two colours and three typefaces carry the whole site. Hierarchy comes from steps of opacity rather than extra colours, and type grows smoothly with the screen instead of jumping between sizes.
- 02
One cut to white
The darkness is broken exactly once, on the About page, where the site cuts to white like a change of chapter and his story becomes a pause in the race.
- 03
Paced like a broadcast
Page changes pass behind a curtain that sweeps across the screen, and drawers slide in and back out instead of popping, so the site feels fast without ever feeling abrupt.
pages designed
coaching tiers, from first laps to race prep
colours in the entire design system
(02) Brand & Design System
Near-black navy and one acid lime: every call to action, every highlighted word, every border and bullet uses the same accent, and the second word of each headline takes it. Three custom typefaces share the work: an oblique display face for names and headlines, a condensed one for service copy and a quiet grotesque for body text. Everything else is opacity on white or black.
Palette
Typography
Drain Monten Oblique
ANDRÉS MARÍN · BE FAST. · BE PRECISE.
display · Conthic para display condensado · Halton para cuerpo
(03) The Product
The one light chapter
The About page cuts from a dark hero to a full-bleed white section with his hand-drawn signature, a two-slide carousel that cross-fades every five seconds, stats, a draggable gallery and the latest videos from his channel. Inverting the palette here turns his story into a pause in the race.
Two services, one checkerboard
Photo panels with oversized type alternate with copy panels for one-to-one coaching and telemetry lap analysis. The zig-zag keeps the rhythm when it collapses to a single column on mobile, and the page closes on a free guide in exchange for an email.
Three tiers, from first laps to race prep
Thirty, sixty and a hundred and twenty minute sessions, each with what it includes and a single call to action, shown here signed in, with the user's avatar in the navbar.
A drawer that slides, not jumps
The newsletter drawer enters from the right and holds the page still behind it. On close it slides back out at the same pace instead of vanishing, a small detail that keeps the motion language consistent. The mobile menu moves the same way.
(04) The Outcome
A site that reads as a racing brand and works as a funnel: services in an alternating checkerboard, three coaching tiers, a newsletter drawer that appears across every content page and a dedicated page for sponsors. The account experience is complete, with email and Google sign-in, email verification, avatar upload and a confirmation step before changing email or deleting the account, and every error message rewritten in natural Spanish so it sounds like Andrés and not like a system. Booking, payment and newsletter flows were designed end to end and left ready for the next phase.