Designing a brochure webpage for a Women's gym company in Chicago
BadB!tch Gym is a concept fitness brand and web experience built to reject performative wellness and celebrate unapologetic strength. The project explores how bold branding, clear information hierarchy, and confident UX patterns can create an inclusive, motivating experience without relying on stereotypes or intimidation. This case study focuses on brand expression, conversion-driven layout, and scalable UX foundations.
BadB!tch Gym
2022
Health and Fittness
Chicago, IL
The Problem
Many fitness websites rely on exclusionary language, aspirational body imagery, and cluttered pricing structures that alienate users—especially beginners and people who don’t identify with traditional gym culture. Users often struggle to quickly understand membership options, class offerings, or whether a space aligns with their values.
Design Challenge
How might a gym’s digital experience communicate confidence, inclusivity, and clarity—without softening its identity or overwhelming users?
Process
Research & Analysis: I began by analyzing digital experiences across boutique gyms, large fitness chains, and strength-focused fitness brands. The goal was to understand how tone, content structure, and visual hierarchy influence trust and conversion.
Key findings:
Critical information such as pricing, class formats, and expectations is often obscured by marketing-heavy language
Many fitness brands unintentionally create intimidation through imagery or jargon
Strong branding is most effective when paired with predictable, low-friction UX patterns
These insights shaped a design approach that prioritized clarity and confidence—allowing the brand voice to stand out without compromising usability.
Information Architecture: The information architecture was designed to help users quickly answer three core questions:
Is this gym aligned with my values and goals?
What does it offer, and how much does it cost?
How do I take the next step?
Content was grouped into clearly defined sections with intentional sequencing:
Brand and value proposition first
Offerings and pricing surfaced early
Supporting content (trainers, testimonials) used to reinforce trust
This structure supports both scanning and deeper exploration, accommodating users with varying levels of intent.
Wireframing & Prototyping: Low-fidelity wireframes were used to establish layout, content hierarchy, and interaction patterns before introducing visual styling. This phase focused on:
Clear visual separation between sections
Consistent CTA placement
Responsive layouts that translate cleanly across breakpoints
Interactive prototypes were then created to validate flow and pacing, ensuring the experience felt intentional rather than overwhelming despite the bold brand direction.
Usability Testing: Lightweight usability testing was conducted through informal reviews and self-guided walkthroughs, focusing on:
Pricing comprehension
CTA clarity
Overall navigability
Feedback highlighted the importance of maintaining generous spacing and strong typographic hierarchy to balance the high-impact visuals. Iterations were made to improve scannability and reduce cognitive load.
Visual Design & Style Guide: The visual system was designed to communicate strength, confidence, and inclusivity without relying on fitness clichés. Key elements include:
Bold, high-contrast typography to reinforce brand voice
A restrained color palette used intentionally for emphasis
Reusable components and spacing rules to maintain consistency
A lightweight style guide was created to support scalability and future product expansion, ensuring the brand remains cohesive across new features and pages.
Conclusion
BadB!tch Gym demonstrates how a bold brand and disciplined UX can coexist without compromise. The final experience delivers clarity, confidence, and momentum—guiding users through the product with intention rather than pressure.
On desktop, the design feels expansive and declarative, giving the brand room to lead while maintaining clear structure and flow. On mobile, that same confidence translates into a focused, high-impact experience where content hierarchy, spacing, and CTAs remain effortless to navigate.
Together, the desktop and mobile experiences reinforce a core principle of this project: strong visual identity earns attention, but thoughtful UX sustains trust. The result is a concept that feels powerful, usable, and ready to scale