SuperAthlete School

Project Detail

SuperAthlete School

Project summary :

SuperAthlete School is an online coaching & mentoring program built on Shopify to deliver personalized athletic training, nutrition guidance, and business-skill lessons to youth athletes worldwide. The goal was to create an immersive, video-driven experience that scales from mobile to desktop and supports weekly live Q&A, on-demand resources, and a seamless enrollment flow.

  • Custom Shopify Theme: Built a lightweight, modular theme leveraging Shopify Sections and Liquid templates for maximum flexibility.

  • Video Hosting & Playback: Integrated YouTube-embedded testimonials and password-protected resource vault videos via a custom page template.

  • Interactive Curriculum: Designed “How It Works” panels with hover-driven tooltips and animated SVG icons to break down program steps.

  • Mobile-First UX: Employed a sticky hamburger menu, full-viewport hero carousel, and collapsible content accordions—ensuring 95 % mobile Lighthouse performance.

  • Performance Optimization:

    • Lazy loading for images/videos

    • Minified CSS/JS bundles

    • Critical-path inlining for hero section

  • SEO & Accessibility:

    • Schema.org markup for Course, Organization, Person

    • ARIA labels on accordions & buttons

    • Lighthouse A11Y score: 100/100

  • Enrollment Flow:

    • “Enroll Today” CTAs linked to custom Shopify Checkout button

    • Dynamic FAQ accordion on checkout page

    • Mailchimp email capture with Klaviyo integration

  • Discovery & Wireframes: Mapped user journeys for first-time visitors, returning students, and parent dashboards.

  • High-Fidelity Mockups: Created in Figma, focusing on brand colors (black, white, gold) and full-bleed hero imagery.

  • Shopify Section Build: Developed reusable sections for hero, benefits grid, testimonials, and curriculum modules.

  • Custom Liquid & JS: Enhanced interactivity with Alpine.js for dynamic accordions and slide-in CTAs.

  • QA & Accessibility Testing: Screen-reader checks, keyboard navigation flows, and cross-browser validation.

  • Launch & Training: Deployed on Shopify, provided admin walkthrough, and delivered custom style guide.

  • On-Page SEO: Unique title/meta descriptions per page, structured <h1>–<h4> hierarchy.

  • Schema Markup:

    • Course for program overview pages

    • VideoObject for embedded YouTube reviews

    • Organization & Person for coach bio section

  • Performance Monitoring: Google Analytics 4, Shopify Analytics, and hourly GTM event tracking for CTA clicks.

  • Hero Video Embed: Autoplay muted looping background with overlaid testimonial iframe.

  • Benefits Grid: Three-column list of “What You’ll Receive” with scroll-triggered fade-ins.

  • Program Workflow Blocks: Four-step “Journey Start → Core Benefits → Weekly Regimen → Personal Growth” with responsive stacking.

  • Curriculum Carousel: Swipe-enabled mobile slider of program modules and imagery.

  • Sticky Enroll Button: Persistent bottom CTA on mobile for instant signup.

  • Footer Signup: Email capture form integrated with Klaviyo for drip campaigns.

  • Fully adaptive layouts—from 320 px to 1920 px.

  • Collapsible menus & accordions for streamlined mobile navigation.

  • Hero section height set to viewport-minus-header for consistent look on any device.

  • Image srcsets and <picture> tags to serve optimized assets by screen size.

Target Audience

  • Young Athletes: Ages 10–18 seeking specialized training.

  • Parents & Coaches: Looking for remote mentoring and progress tracking.

  • Sports Teams & Schools: Interested in group enrollment and bulk packages.

Performance Gains

  • Mobile Lighthouse: 96/100

  • Desktop Lighthouse: 99/100

  • Time to Interactive: < 1.2 s

  • First Contentful Paint: < 0.9 s

  • Bounce Rate: – 18 % in first month post-launch (vs. prior benchmark)

  • Conversion Rate: + 27 % in “Enroll Today” click-through

Client Details

SuperAthlete School

Service Provided

Custom Shopify theme build Mobile-first UX/UI design Video integration & resource vault Performance & SEO optimization Ongoing maintenance & support

Project timeline

Design & Prototyping: 3 days Development & QA: 1 week

My Other Projects

Magna voluptatum dolorem! Dolores! Sociosqu commodo nobis

Leave a Reply

Your email address will not be published. Required fields are marked *