New brand, one-page site, clear voice. I led UX/UI and wrote a tough-love headline system (‘Rise Above the Standards’) to drive inquiries—then packaged a component library and dev handoff so the build shipped fast and clean.
Challenge:
Stand up a new athletic coaching brand from zero—Logo, voice, and a one-page site that speaks to Gen-Z athletes with direct, tough-love energy and a clear path to inquire.
Role:
Lead web designer & brand writer; UX, UI, prototyping, copy platform, developer handoff.
(Logo created collaboratively with the studio team.)
Process:
Discovery & Positioning: Mapped audience (high-school athletes + parents), tone (“gritty honesty, no fluff”), and conversion goals (inquiry form + trial signup).
Information Design: Chose a one-page flow to keep the story tight: Hero → Proof (coach cred) → Program → Pricing → FAQs → Contact.
Voice & Messaging: Built a headline bank around tough-love coaching: “Rise Above the Standards,” “Earn the Inches,” “Work Works.” Wrote microcopy for CTAs and form helper text.
UI System: Dark athletic canvas with a teal highlight; bold condensed display type + clean sans body; collage cutouts and motion streaks for speed/effort cues.
Prototype & Testing: Figma wireframes → hi-fi prototype; tested with 6 athletes for scan/clarity; tuned hierarchy and button contrast.
Responsive & Motion: Component library (cards, accordions, stats, form) with snappy scroll reveals and reduced-motion fallbacks.
Accessibility & Perf: 4.5:1 contrast floor, logical tab order, descriptive alt text; image compression and lazy-loading targets shared for build.
Handoff: Dev-ready specs, component redlines, copy doc, favicon set, and CMS content guide for easy updates.
Solution:
A fast, single-scroll site with unmistakable voice and clear CTAs. Visual energy comes from high-contrast type, teal accent zones, and dynamic athlete cutouts; the copy keeps it motivational without going corny.
Outcome:
Post-launch (first 60 days): +42% hero-CTA click-through vs. prototype baseline, 2.1× inquiry submissions, mobile bounce down 28%. The headline bank became the source for social posts, banners, and print handouts.
Deliverables:
One-page website design system (desktop/mobile), Figma prototype + component library, copy/voice guide with headline bank, developer handoff package (specs, assets), and CMS update guide.
Back to Top