LEAN : Woman's fitness
Rebuilding LEAN from the ground up. New identity, system and product logic.
Project Details
- Mobile app
- Fitness & Wellness
- Client
- Role
- Timeline
- Platform
- Industry
Business Need
LEAN is a fitness platform built around UK-based trainer Lilly Sabri. It covers workouts, nutrition, guided programmes, and educational content. The app had been live for years but the UI hadn't kept pace with Lilly's growing brand or her audience's expectations.
Problem
The existing LEAN app had three core problems:
- Outdated visual identity: The UI was generic, flat, and disconnected from Lilly Sabri's elevated personal brand, creating a credibility gap between her content and her product.
- No design system: The app had no coherent foundation underneath it. No tokens, no component logic, no scalable structure. Every screen was effectively a one-off.
- Aesthetic mismatch with the audience: LEAN's users expect a premium, editorial experience. The old app looked like every other fitness app from 2019.
Without a full visual overhaul, users would continue experiencing a product that felt beneath the brand they'd subscribed to. And the app would remain impossible to scale or maintain consistently without a proper design system underneath it.
Goals
For the Visual Identity
- Rebuild the UI from scratch with a warm, editorial aesthetic, premium without being cold
- Establish a clear typographic system and colour palette that could carry across every screen
For the Design System:
- Build a full design system from zero : tokens, components, spacing, colour, and typography
For the App:
- Restructure navigation around what users actually do daily not a feature dump
- Introduce Progress & Habits tracking to transform the app from a workout delivery tool into a holistic lifestyle platform
- Surface Nutrition as a first-class feature, not a buried tab
Project Strategy
- Rebuilt the visual identity around warmth rather than whiteness, muted chocolate as the primary brand colour, Pearl Beige backgrounds, full-bleed editorial photography, and tight typographic hierarchy using Public Sans.
- Built a full three-layer token architecture where primitives feed into semantics, semantics feed into component tokens, swap the primitive layer and the whole brand updates.
- Restructured every screen around a single question: what does this user need to do right now? Navigation reduced, home became a daily dashboard, nutrition moved front and centre, and progress became a reason to open the app on rest days.
Understanding the users
LEAN's user base is almost entirely women. No formal research was conducted for this project, the direction was PRD-led, but the audience is well-documented across App Store reviews, TikTok, and Instagram. Two distinct profiles emerged.
Rebuilding the visual identity
The Problem : The old LEAN app had no coherent visual language. Pink header, flat cards, generic nav, it looked like a template, not a brand. There was nothing in the UI that reflected Lilly Sabri's editorial, elevated aesthetic.
The Shift : The new identity is built around warmth, not whiteness. Muted chocolate as the primary brand colour, Pearl Beige backgrounds, full-bleed editorial photography, and tight typographic hierarchy using Public Sans across every scale.
- Replaced cold whites with warm neutral surfaces (
#fcfbf8,#f7f4ee) - Full-bleed photography as a design element, not decoration
- Consistent typographic scale from text-xs (12px) to display-2xl (72px)
- Dark, warm UI language that matches Lilly's brand across every screen
Building the design system
The Problem : There was no system. Every screen was patched independently, inconsistent spacing, ad hoc colours, no shared components. In a Genflow context running multiple creator brands, that's not just a design problem. It's a business problem.
The Shift : Built a full design system from zero. Three token layers: primitives feed into semantics, semantics feed into component tokens. Swap the primitive layer and the whole brand updates. That's how you run LEAN, Shreddy, Bare, and Kinobody from one system.
- Full colour token architecture:
Primitives/Chocolate→Semantics/Brand/primary→Semantics/Components/button/primary - Typography system: Public Sans, 4 weights, 8 size steps, semantic naming
- Spacing tokens 0–80px (8 steps), shadow scale from shadow-xs to shadow-3xl with skeuomorphic variants
- Every component built from tokens, reusable, swappable, scalable
Redesigning the core app flows
The Problem : Navigation was a feature dump, five tabs with Store and Community competing for space alongside core daily actions. No progression logic, no tracking, no hierarchy.
The Shift : Every screen rebuilt around one question: what does this user need to do right now? Home became a daily dashboard, workouts became structured briefings, nutrition moved front and centre, and progress became a reason to open the app on rest days.
Onboarding flow
Old: Pink splash screen, teal buttons, dense sign-up forms, cluttered paywall with no clear hierarchy. Multiple versions patched on top of each other with no consistent logic or visual language.
New: Clean editorial splash, Lilly full-bleed, warm neutrals from screen one. Step-by-step flow: account creation, personalisation, plan selection, guide discovery. Every screen has one job. The paywall is calm, clear, and confident.
Delta: Chaotic multi-version patchwork → single coherent onboarding journey that reflects the brand from the first tap.
Home screen
Old: Two tabs, greeting, hero banner, stacked cards, no progression logic. Five-tab nav cluttered with Store and Community.
New: Three tabs (Today / My Guide / Meal Plan). Date visible. Day counter ("Day 2 of 35"). Persistent current guide shortcut. Meal plan as a first-class feature. Nav reduced to four focused tabs.
Delta: Content dump → structured daily dashboard. User lands knowing exactly where they are in their journey.
Guides & programmes
The decision level. Choosing and committing to a programme.
Old: Pink and teal hero banners, countdown timers on cards, cluttered guide detail pages with prize info, meal plan previews, and enrolment CTAs all competing on the same screen. Felt like a sales page, not a product.
New: Editorial programme cards with clean metadata, level, duration, trainer. Guide detail shows week structure, content previews, and a single enrolment CTA.
Delta: Visual noise → structured content discovery. Users find what they need without being shouted at.
Content
Old: Exercise list with small thumbnails, teal progress indicators, Spotify/Apple Music floating awkwardly at the top, flat completion screens. Multiple patched versions with no visual consistency.
New: Dedicated content hub, Weekly Guides at the top, Full Programs, New Content, Studios & Classes, and Challenges. Each tier has its own visual treatment. Guide detail shows programme metadata, week structure, and optional add-ons inline.
Delta: Patched exercise list → structured content destination with a clear hierarchy from programme to session.
Meals & nutrition
Old: Teal-accented recipe cards, flat grid layout, basic category tabs, minimal metadata. Recipes felt like a static library, no dietary context, no personalisation, no connection to the user's programme.
New: Warm editorial food photography. Dietary preference filters (Standard, Pescatarian, Vegetarian) applied inline. Macro breakdown on every card, kcal, protein, carbs, fats, before you open a recipe. Full recipe detail with method and ingredients tabs. Custom meal builder for users tracking their own food.
Delta: Static recipe library → personalised daily nutrition tool with macro tracking and custom meal logging.
Workout player
Old: Exercise list, teal progress toggle, Spotify/Apple Music floating at the top, flat completion screen. Functional but clinical, no sense of momentum or brand presence.
New: Full-bleed video player with clean overlay controls. Exercise progression visible throughout. Countdown between exercises. Post-workout completion screen consistent with the rest of the app.
Delta: Disconnected session experience → cohesive in-workout UI that feels like the same product from first tap to last rep.
Progress & habits, new feature
The app had no way to measure progress. I built it from scratch, weekly day tracker, monthly calendar with completion markers, and a score built on consistency over time. Workout stats exportable as branded sticker cards for #LEANProgress social sharing.
Delta: No tracking → full accountability layer covering fitness, nutrition, and daily habits in one place.
Outcome
Delivered a complete redesign, new visual identity, new design system, restructured navigation, and a Progress & Habits feature built from scratch.
The product went from a generic fitness app that looked five years behind Lilly's brand, to an editorial platform that matches what the audience expects and gives the business a scalable foundation.