Designing the mobile experience for a brand built for fighters — and making it work for everyone else.
● SHIPPED
Role
User Experience Designer
Timeline
2 months
Product
mobile app
Team
1 senior designer
OVERVIEW
Turning a fighter's brand into a beginner's app
UFC Gym is the world's leading MMA-inspired fitness brand — but its identity spoke to the professional fighter, not the everyday person trying to find a class near them.
BL3NDlabs was brought on to modernize UFC Gym's full digital platform.
My focus, as part of that team, was the mobile experience: turning an athlete-first brand into something approachable, and turning that brand into a working, reusable component library.
My ROLE
Owned the Mobile Experience
Designed the end-to-end mobile app experience — sign-up, class booking, schedules, gym details, and account — under the mentorship of a senior product designer
Iterated Through Structure, Not Just Style
Went through multiple rounds of wireframes over 2–3 months before landing on a final navigation structure and screen set
Built a Reusable Component Sheet
Translated the brand's typography, color, and UI patterns into a documented component library — buttons, cards, navigation, inputs — so the mobile UI could scale consistently across screens
Designed for the Edges, Not Just the Happy Path
Included empty states and secondary flows (menu links, detail pages) alongside the core booking experience — the parts that are easy to skip early in a career
IMPACT
call rate
3%
conversion
13%
engagement
15%
sales
23%
CONTEXT
A narrow lane inside a much bigger project
BL3NDlabs' engagement with UFC Gym was broad — brand strategy, a fragmented multi-team website, and a look and feel that felt inaccessible to anyone who wasn't already a serious athlete. That larger strategic work belonged to the senior team I was supporting.
My scope was narrower and specific: take the direction the brand was moving toward, and figure out what it actually meant on mobile — where someone is trying to find a gym, check a class time, or book a session in under a minute.
PROBLEM
Built for fighters, not first-timers
UFC Gym's brand spoke fluently to fighters. It didn't yet speak to someone nervous about walking into their first class.
On mobile specifically, that showed up as:
Intimidating visual tone
Bold, combat-sport-first styling that didn't invite a beginner in
No consistent mobile patterns
Every screen risked being designed in isolation without a shared system
Booking friction
Finding a gym, checking a schedule, and joining a class needed to feel fast and obvious, not effortful
SCOPE
Working inside an established brand, not defining one
I wasn't setting UFC Gym's visual identity — that direction came from the broader BL3NDlabs engagement. My job was translation: take that identity and make it hold up as a real, usable mobile product, screen after screen, without a designer having to reinvent a button every time.
process
Wireframes first, styling second
We landed on a bottom tab bar (Home, Reservations, Schedule, Profile) for quick, one-handed access to the actions people needed most — and iterated the schedule card layout until time, class name, instructor, and location could all be scanned at a glance.
solution
A component sheet that let the app scale
Beyond the core booking flow, I mapped out sign-up, detail pages, menu links, and — deliberately — empty states: what someone sees before they've booked a single class or earned their first reward point. It's a small thing, but it's the difference between a demo and a real product.
outcome
My first system, start to finish
The mobile experience and component sheet shipped as part of BL3NDlabs' broader UFC Gym platform relaunch. For me, it was the first time taking a project through full structural iteration — wireframes to final system — under real client constraints and senior mentorship, rather than in a classroom.
looking back
What I'd build differently now
What I'd do differently now:
Push earlier for lightweight usability testing on the booking flow, even informally
Set up basic design tokens/variables rather than a static style sheet, to make future updates faster
Document component usage guidelines for handoff, the way I later did on BBN
