selfLove.Yoga — Redesign Program

Why We Built 10 Different Concepts

The current selfLove.yoga site is a default Wix template with broken pages, no visible pricing, and no real commerce, LMS, or booking system (full audit in the critique & research doc). Rather than guess at one redesign, we researched how the best-performing yoga, athletic, and wellness brands actually build their sites, then produced 10 genuinely different, fully-built concepts — same real content, ten different visual and technical approaches — so you can compare them side by side and pick (or mix) the direction that fits the brand best.

Jump to the 10 concepts ↓ See the 20 reference sites Read the full research & critique

What we researched

Three research passes fed every decision in these 10 builds:

Pass 1

Yoga & wellness platforms

Alo Moves, Glo, Peloton, CorePower Yoga, YogaWorks, Down Dog, Gaia, Yoga With Adriene, and EkhartYoga/YogaEasy — for how they structure a class library, present membership pricing, and brand themselves.

Pass 2

Premium athletic & fitness brands

Nike, Equinox, SoulCycle, Barry's Bootcamp, Gymshark, Whoop, ClassPass, and Lululemon — specifically for what makes a site feel like a $10k+ production instead of a template: full-bleed video, disciplined color, oversized confident type, generous whitespace, and pricing dressed in trust/story rather than a bare number.

Pass 3

Booking & scheduling platforms

Mindbody, Vagaro, Acuity Scheduling, Calendly, and Momence — to design a real-feeling class-schedule + waitlist system and a separate 1:1 appointment-booking system, the two patterns real studios actually use.

Full per-brand notes, sources, and the original site audit are in critique.html.

What every one of the 10 sites includes

Every concept below is a genuinely different visual style, but they all share the same functional foundation you asked for — LMS, commerce, and scheduling/booking — built on the same real site content so nothing was left out:

🎓 LMS — online class library

A filterable class/module library (lms.html) with tier badges (Free / 200hr), a lesson player page with progress tracking (lesson.html), and the full Yoga Teacher Training program page (ytt.html) with curriculum, tiers, and pricing.

🛍️ Commerce — digital & physical products

A shop (shop.html) split into digital products (training manual, guidebook, meditation audio) and physical products (mat, tote, gift cards), a product detail page, and a working cart with live subtotal and promo codes.

📅 Live class scheduling

schedule.html now shows real studio-style capacity: a color-coded "spots left" chip per class (green → amber → full), an In-Person/Live-Virtual format badge, and an automatic waitlist flow once a class fills — modeled on how Mindbody and Vagaro actually handle it.

🗓️ 1:1 appointment booking — new

A brand-new appointment.html page on every site: pick a session type (discovery call, mentorship, admissions interview), pick a day on a real calendar, pick an open time slot — the Calendly pattern — separate from the class-schedule system because real studios never mix the two.

Everything above is a static, front-end prototype — booking, cart, and login flows are fully interactive in the browser but not wired to a real payment processor or database yet. That's the natural next step once a style is chosen.

The 10 concepts

Click a card to open the full 13-page site. Click "Why this concept" for the style rationale, tech stack, and specific inspiration behind it.

01 · Alo Moves-inspired

Editorial Luxury Minimal
Why this concept

Style: Full-bleed cinematic photography/video, quiet confident type, black/white/gold restraint — the same "brand over sales pitch" language Alo Moves uses, applied to a teacher-training program instead of apparel.

Why it fits: Barry's differentiator ("real teaching over fancy shops") reads as quiet confidence, not loudness — this is the concept for a magazine-quality, aspirational positioning.

Tech: Tailwind CSS (CDN), Fraunces + Inter (Google Fonts), vanilla JS, muted looping hero video (Mixkit), IntersectionObserver scroll-reveal.

02 · Gaia-inspired

Dark Cinematic Streaming
Why this concept

Style: Netflix-style dark UI with horizontal carousels for classes/modules, glowing violet/teal accents on near-black.

Why it fits: selfLove.Yoga already has 30+ hours of video content and a real YouTube channel — this concept treats it like a premium streaming library, the format users already understand.

Tech: Tailwind CSS (CDN), Space Grotesk + Inter, vanilla JS carousels, embedded real YouTube playlist, muted looping hero video (Mixkit).

03 · Glo / YogaWorks-inspired

Warm Cream Calm
Why this concept

Style: Soft cream palette, rounded 2xl cards, gentle shadows — the calmest, most approachable of the 10.

Why it fits: Lowest-friction option for a first-time visitor who's nervous about a 200-hour commitment — the trial-first, "no pressure" tone matches Glo/YogaWorks' highest-converting pattern.

Tech: Tailwind CSS (CDN), Fraunces + Nunito Sans, vanilla JS, muted looping hero video (Mixkit), rounded card-grid class library.

04 · CorePower-inspired

High-Energy Sporty
Why this concept

Style: Bold orange/coral on white, rotating hero carousel, CTA-dense — built to convert, not just impress.

Why it fits: If the priority is maximum sign-ups for the $300-off promo right now, this is the highest-conversion-pressure option of the 10, closest to CorePower's proven playbook.

Tech: Tailwind CSS (CDN), Poppins, vanilla JS auto-advancing carousel, muted looping hero video (Mixkit).

05 · 2026 trend: bento + glass

Bento Grid Modern
Why this concept

Style: Asymmetric modular "bento box" card grid, frosted-glass nav, electric indigo accent — the most current 2025-2026 web-design trend of the 10.

Why it fits: Barry's background as a software engineer makes this the most "on-brand for the founder" option — it reads as tech-savvy and current rather than a typical yoga-studio template.

Tech: Tailwind CSS (CDN), Sora + Inter, glassmorphism (backdrop-blur), vanilla JS, muted looping hero video (Mixkit).

06 · organic/blob trend

Organic Zen
Why this concept

Style: Flowing blob shapes, sage/clay/sand earthy palette, asymmetric layout that avoids a rigid grid — feels hand-crafted and human.

Why it fits: Closest visual match to the "self-love," holistic-wellness meaning behind the brand name itself — the softest, most literally "yoga" feeling of the 10.

Tech: Tailwind CSS (CDN), Fraunces + Work Sans, SVG/CSS blob shapes as image masks, muted looping hero video (Mixkit).

07 · tactile brutalism

Bold Editorial Brutalist
Why this concept

Style: Thick black borders, acid yellow + hot pink, oversized type — deliberately loud, the opposite of typical soft "wellness pastel" design.

Why it fits: The riskiest/most memorable option — best if the goal is to stand out sharply from every other yoga-studio site rather than blend into the category.

Tech: Tailwind CSS (CDN), Archivo Black + IBM Plex Mono, high-contrast vanilla JS interactions, muted looping hero video (Mixkit).

08 · Yoga With Adriene-inspired

Personal Brand Warm
Why this concept

Style: Sparse nav, large photography of Barry himself, a handwritten accent font used only for small quotes — the site feels like it's from one real person.

Why it fits: Barry's actual differentiator is himself — 11+ years teaching, named Bay Area studios, a real voice in the blog — this concept sells the person, not just the program, closest to how Yoga With Adriene built a following.

Tech: Tailwind CSS (CDN), Caveat (accent) + Libre Franklin, vanilla JS, muted looping hero video (Mixkit).

09 · Down Dog-inspired

Tech-Forward SaaS Dashboard
Why this concept

Style: Feels like a polished software product — progress rings, stat tiles, dashboard-style panels even on marketing pages.

Why it fits: Makes the "self-paced, track-your-progress" LMS promise tangible immediately, rather than describing it in a paragraph — the student experience is visible before signing up.

Tech: Tailwind CSS (CDN), Manrope + JetBrains Mono (stats), SVG/conic-gradient progress rings, vanilla JS, muted looping hero video (Mixkit).

10 · EkhartYoga/YogaEasy-inspired

Boutique Studio Academy
Why this concept

Style: Elegant serif headlines, refined photography, gold accents, a classic Classes/Programs/Calendar/Academy navigation structure.

Why it fits: Structurally the closest real-world match to selfLove.Yoga's actual business (a certified teacher-training academy) — the safest, most immediately-credible-to-prospective-students option of the 10.

Tech: Tailwind CSS (CDN), Cormorant Garamond + Inter, glassmorphism nav, vanilla JS, muted looping hero video (Mixkit).