05 / UX/UI / Website / Fitness
Wade Warren
A focused path from ambition to a training plan.
Explore the website ↗
The task
A prospective training customer needs to understand the program choices before deciding where to inquire.
My contribution
I designed the trainer’s visual direction and responsive website, then implemented the pages and interaction patterns.
The approach
A self-initiated training website with shared program comparisons, connected pages and repeated contact actions.
What I built
A responsive training website with program comparisons and a clear inquiry path.
Visual System
Color
#0E0E0E
#2A2E31
#FEED07
#FFFFFF
Typeface
Montserrat
AaBbCc Gg Qq 0123456789
RegularMediumBold
Actions & patterns
High-contrast filled and outlined actions in the training brand.
Explore the actual work
Explore the website.
Explore the training introduction, compare programs and follow the inquiry path. Strong typography and restrained motion keep the direction clear.
01
The task & my contribution
My contribution
I designed the trainer’s visual direction and responsive website, then implemented the pages and interaction patterns.
The task
Introduce the trainer, explain the available training formats and make the inquiry path easy to find.
02
Visual & interaction decisions
An introduction with direction
The homepage’s Start Here action connects the trainer introduction to personal-training options. Strong type provides the hierarchy around the photography.
Compare the training formats
Individual and small-group plans share a comparison structure before contact actions. The page gives the choice a clear place in the journey.
Navigation stays familiar
The Programs dropdown groups the training routes. Repeated navigation and action styling keep the homepage and program page connected.
03
Functional & interaction QA
Journey review
Start Here leads from the homepage to personal-training plans. Shared plan structure makes the individual and small-group options easier to compare before the inquiry.
04
Reusable systems
Program comparison pattern
Shared headings, plan treatments and contact actions let individual and small-group options sit within one page structure.
Cross-page consistency
The original navigation, typography and button treatments repeat across the homepage and personal-training page.
05
Design through implementation
Connected program pages
I implemented shared navigation across the trainer introduction, results, personal training, online coaching and contact pages. Each program explains its format before offering a path to an inquiry.
Shared responsive patterns
The same navigation, typography, program cards and action styles connect the pages. Responsive layouts preserve the energetic brand while allowing training information to be scanned on a phone.
06
Accessibility
Clear reading and interaction
Readable program headings and repeated contact actions support a clear path through the training information. Responsive stacking keeps the plan comparisons legible on smaller screens.
07
The finished work
Built
A responsive training website with program comparisons and a clear inquiry path.
Delivered work
Connected program comparison and inquiry journeys
