← UX Case Studies
Case Study 02
Elevate
Volleyball Club
Volleyball Club
UX Research · Wireframes · Token Design · Brand Identity · Website
UX Designer & Brand Lead · Freelance · 12 Weeks
View L ↗01
Project Overview
Elevate Volleyball Club needed an online platform to manage private, semi-private, and group lesson registrations while providing clear information about its mission, values, and programs. As the club grows, the platform needed to serve athletes, parents, and coaches seamlessly.
The Problem
No centralized booking system. Athletes and parents relied on text messages and calls to schedule sessions. No web presence to communicate programs, coaching staff, or club values.
Solution · A user-friendly website with streamlined scheduling and registration, serving as an informational hub for athletes, parents, and coaches.
02
Target Audience
Three distinct user groups with different needs, goals, and levels of digital comfort.
Primary
Young Athletes (Ages 8–17)
Competitive + recreational · School-age players
Core Need · Easy session booking, skill-specific training, and visibility into improvement over time.
“I don’t know when the next clinic is or how to sign up.”
Secondary
Parents & Guardians
Ages 30–50 · Mobile-first · Busy schedules
Core Need · Flexible scheduling, clear pricing, reliable communication, and easy rescheduling.
“I can’t keep track of session times and payment is confusing.”
Tertiary
Coaches & Trainers
Professional coaches · Schedule-heavy · Admin-burdened
Core Need · Efficient registration management, reduced admin overhead, clear session visibility.
“Booking is manual and I lose track of who signed up.”
04
Design Thinking Process
Applied a full Design Thinking process — ensuring the website meets real athlete, parent, and coach needs through continuous research, iteration, and testing.
01 Empathize
User Research · User Interviews · Entrant Analysis
02 Define
User Persona · User Journey Map · Goal Statement · Empathy Map
03 Ideate
Brainstorming · Card Sorting · User Flow
04 Design
Paper Wireframes · Visual Design · Prototype
05 Test
Usability Testing · Survey Insights · Improvements
05
Project Timeline — 12 Weeks
PeriodPhaseActivities
Weeks 1–2EmpathizeUser research, interviews, surveys, competitor analysis
Weeks 3–4DefineUser personas, journey maps, goal statements, empathy maps
Weeks 5–6IdeateBrainstorming, card sorting, IA, user flows
Weeks 7–8DesignPaper wireframes, visual design, token system
Weeks 9–10PrototypeInteractive Figma prototype, design system documentation
Weeks 11–12Test & IterateUsability testing, survey insights, final improvements
06
User Research & Key Insights
Interviews, surveys, observations, and competitor analysis across all three user groups.
→ Athletes Need Skill-Specific Training
Players want focused sessions on passing, setting, and hitting — not just general practice.
→ Parents Prioritize Flexibility & Communication
Scheduling conflicts are common. Parents prefer easy rescheduling and clear program details.
→ Coaches Need Efficient Tools
Manual registration is time-consuming. Coaches want a centralized system with roster visibility.
→ Mobile-First is Non-Negotiable
Most parents and athletes access club info via phone. Desktop-only forms created significant friction.
07
Empathy Maps
Three empathy maps built from interviews — capturing what each user group thinks, feels, sees, says, does, and hears.
Young Athlete
Pain Points — Struggles to maintain focus when sessions feel too easy or too hard · Doesn’t know how to train for specific positions · Sometimes feels discouraged. Needs — Tailored lessons · Flexible times · Clear guidance on specific areas to improve.
Parent
Pain Points — Juggling multiple activities leaves little room for flexibility · Worry about committing to long-term programs without knowing outcome. Needs — Easy rescheduling · Short-term commitments with clear progress milestones.
Trainer
Pain Points — Struggling to manage bookings · Athletes drop out after a few sessions · Limited access to feedback tools. Needs — User-friendly booking system · Way to attract and retain students · Progress tracking.
08
User Personas
Four personas synthesized from research — representing core audience segments the platform must serve.
→ Persona 01 — Young Athlete (Age 14)
Competitive player improving specific skills. Needs easy booking and progress visibility. Frustrated by unclear skill levels and lack of feedback.
→ Persona 02 — Parent (Age 42)
Busy professional managing two kids’ schedules. Values flexibility and clear pricing. Wants simple rescheduling and reliable club communication.
→ Persona 03 — Beginner Athlete (Age 10)
New to volleyball, looking for fun and support. Needs encouragement, clear fundamentals, and a welcoming first experience.
→ Persona 04 — Coach (Age 35)
Experienced coach managing multiple sessions. Needs centralized roster visibility, reduced admin, and efficient communication with athletes and parents.
09
User Journey Maps & User Flow
Two journey maps capturing the full experience from awareness to reflection. User flow diagrams the booking path from landing to confirmation.
StageActionFeeling
AwarenessHears about club from friend or social mediaCurious but unsure where to start
ResearchVisits website, looks for programs and pricingInterested but confused by lack of clear info
DecisionSelects a clinic, attempts to bookMotivated but frustrated by manual process
ExperienceAttends session, receives coachingExcited and engaged
ReflectionWants to rebook, looks for progress feedbackSatisfied but wants progress tracking
011
Site Map
Information architecture defining the full navigation structure — built from card sorting sessions with all three user groups.
Home
Hero · About · Programs overview · Testimonials · CTA to book
Who We Are
Mission · Coaching staff · Club values · History
Clinics
Beginners · Professional · Private & Semi-Private · Pricing
Register / Login
Account creation · Session booking · Schedule management · Payment
News
Club updates · Event announcements · Training tips
012
Wireframes & Design System
Low-fidelity wireframes mapped core user flows before visual design. A token-based system ensured consistency across all screens and breakpoints.
Typography
Primary — Montserrat Bold · Headlines, hero text, CTA labels
Secondary — Open Sans Regular · Body copy, form labels, nav items
Spacing Tokens
Base unit 8px · Scale: 8 / 16 / 24 / 32 / 48 / 64 / 96px
Applied consistently to padding, margin, and grid gaps across all components
Component Library
Session cards · Booking forms · Navigation · Pricing tables · Modals
All components mobile-first with 4 breakpoints: 375 / 768 / 1024 / 1440px
Key Screens Wireframed
Homepage · Clinics overview · Booking flow · User dashboard · Confirmation
Paper wireframes iterated 3 times before moving to high-fidelity Figma prototype
010
Brand Identity & Color System
A brand built around motion, precision, and community. Gold accent on deep black — athletic confidence without intimidation.
Color System
Neutral
Neutral tones used for the majority of UI.
#fffefd
#f8f5f2
#f2e9dc
#e5d8c6
Primary
Primary tones used as the main hue for the UI.
#cc9901
#daa520 ✦
#7c0a01
#3d0c01
#1b1811
Accent
Accent colors to convey semantic purpose — success, error, warning, info.
#fff5cc
#ff9900
#117a65
#767d4e
Typography
Primary — Headlines
Montserrat
Aa Bb Cc 0 1 2 3
Bold · Hero text · CTA labels · Nav items
Secondary — Body
Open Sans
Aa Bb Cc 0 1 2 3
Regular · Body copy · Form labels · Captions
Logo
013
Usability Testing
3 rounds of usability testing with 8 participants across all three user groups. Key improvements made after each round.
Finding 01
Issue: Athletes had difficulty finding skill level indicators on session cards
Fix: Added Beginner/Intermediate/Advanced badges directly to session cards
Finding 02
Issue: Parents couldn’t find pricing comparison quickly
Fix: Added ‘Programs & Pricing’ as a standalone top-nav item — previously buried
Finding 03
Issue: Booking form felt long — users hesitated at the age field
Fix: Removed age field from primary form. Moved to optional athlete profile step post-booking.
Finding 04
Issue: Mobile tap targets on calendar were too small
Fix: Increased calendar cell height from 32px to 48px on mobile — improved touch accuracy significantly
3
User Groups
Researched
Researched
12
Weeks
Full Process
Full Process
3
Usability Test
Rounds
Rounds
8
Participants
Tested
Tested