Key Data Website Design and Development

Designed and developed a one-page website for a sports data storytelling studio, including hero showreel video editing, Webflow development and interactive features.

Client: Key Data - Juan Martín Montes

Industry: Sports Journalism & Data Storytelling Studio

Project Type: Brand Website Design & Development + Hero Video Edit

Timeline: 2 weeks

Role: Web Designer, Webflow Developer & Video Editor

👉 View work

Web Design (UI/UX)

Webflow Development

Video Editing & Production (Hero Showreel)

Motion (Webflow + GSAP)

Interactive Development (Matter.js)

Brand Identity Extension (Typography)

Juan Martín Montes, a sports journalist with over 20 years in media journalism, was launching Key Data, a data-driven sports storytelling studio. He needed an online presence that would:

Position him as a credible authority in data journalism

Attract media platforms, sports clubs, and brands as clients

Showcase his dual offering: interactive web experiences and motion graphic videos

Reflect the same editorial quality and visual storytelling he delivers to clients

Immediately demonstrate his work through a showreel

Keep visitors engaged without external link exits

The client's core positioning: In an ecosystem saturated with opinion and noise, data allows for more solid, credible, and memorable stories.

I designed and developed a one-page editorial-style landing site that functions as both a portfolio and a compelling argument for data storytelling. The site itself demonstrates the visual narrative quality clients can expect.

Editorial-first aesthetic: Clean typography, generous white space, and premium feel that mirrors high-end sports publications

Typography strategy: Sourced a complementary typeface that harmonized with the existing logo while establishing a cohesive visual identity

Strategic structure: Landing page format that guides visitors from problem → solution → work → credibility → action

Edited a dynamic showreel featuring Juan Martín's best data storytelling work mixed with key words of what Key Data is. Visitors can grasp the style of work and what Key Data does within seconds of landing on the site. It answers the immediate question: "What does this studio actually create?" The pacing and selection demonstrate both the data rigor and visual storytelling quality that defines Key Data.

Instead of external links that pull users away, I integrated embedded video/content viewers directly into the site—including the hero showreel and portfolio pieces—keeping visitors immersed in the Key Data experience throughout their journey.

Implemented subtle GSAP text animations triggered on scroll, creating a dynamic reading experience that mirrors the interactive storytelling Key Data produces for clients.

Footer Logo Animation: SVG logo with a trailing hover effect that adds a playful detail, creted also with GSAP.

Custom 404 Page: Built with Matter.js physics. An unexpected surprise that turns a dead-end into an interactive moment, reinforcing the studio's technical creativity.

Delivered a fully responsive, CMS-ready Webflow site that Juan Martín can easily update with new portfolio pieces as his studio grows.

Minimalistic and journalistic. Letting the data visualizations and video work be the colorful heroes while maintaining a sophisticated editorial wrapper.

Results & Impact

Single-page site that serves as both portfolio and lead generation tool

Hero showreel provides immediate visual credibility

Seamless user experience with zero external navigation breaks

Professional online presence that positions Key Data to compete with established studios

Scalable Webflow foundation for future content additions

Interactive elements that demonstrate technical capability to potential clients