11
Web + mobile page designs.
Case study, Streak
An athlete-led app, extended to the web.
Streak is a fan-first sports platform, athletes own their story, fans get exclusive access to drops and moments. The app already existed with a complete design system. My remit was the marketing site that brings new fans and athletes into the product, without reinventing the brand it already owned.
01 · The brief
Stay loyal to the brand the app already owned.
When I joined, the app existed and the team had built a complete design system around it: stark black-and-white surfaces, high-contrast type, cinematic athlete photography. The constraint was clear, don't reinvent, extend. I designed the site end-to-end (Home, Product, Athletes and the Athlete Application) across desktop and mobile, introducing new patterns only where the web genuinely needed them.
"Good web design for an existing product is the work of restraint, knowing what already works, and getting out of its way."
02 · Research & discovery
Understanding what was already there
I started inside the app, its black base, monochrome contrast, type ramp, motion principles and athlete-led photography, then translated that language to a long-scroll marketing site that two audiences land on: the committed fan who needs the answer above the fold, and the rising athlete who needs a persuasive pitch and a low-friction application path.
01
Inherit, don't invent
Stay inside the existing system. New patterns only where the web genuinely needed them.
02
Photography does the work
Without a product to demo, imagery carries the credibility. Every section is built around it.
03
Fans first, athletes close behind
Every page reads to both. Athletes get a dedicated path, but the IA never forks.
03 · Design process
From app aesthetic to web experience
01
Audit the existing system
Catalogued every component proven in product so the site would extend the language, not contradict it.
02
Translate to web hierarchy
Scaled the type ramp up for hero sizes; introduced web-specific components (nav, footer, marketing modules).
03
Pages that prove the product
Home, Product, Athletes and Application, designed to do the work the app couldn't.
04
Mobile parity, not compromise
Every desktop layout mirrored at mobile width, no diluted mobile version.
04 · The website, page by page
Athlete-led photography doing the heaviest lifting
On a brand site, photography is the product. The system is just there to get out of the way of the athlete on screen.
HomeStacked hero, vertical scroll.
ProductFeature scroll, responsive.
AthletesAthlete imagery, vertical scroll.
ApplicationSingle-column responsive form.
05 · Impact
Designed and shipped end to end
14
Web components extended from the app system.
100%
Mobile responsive parity, no diluted version.
2
Distinct audiences served on one canvas.
1
Brand language, inherited and extended.
2×
Surface area the black-and-white language scaled to, cleanly.
06 · Learnings
What this project taught me
Inheriting a system is harder than building one. Every choice has to earn its place against existing patterns. The work is in restraint, knowing what's proven and getting out of its way.
On a brand site, photography is the product. Without a UI to demo, every section earns credibility through imagery and typography.
Designing for two audiences on one canvas is a hierarchy problem. The IA never forks, but the priority order does, deciding what a fan and an athlete each need before they scroll.
Want to see the full design?
The full UI screens and process work live in Figma, happy to give you a walkthrough.