Hustle Basket Academy – Website Design for a Basketball School
Stages
Goal
The objective was to design a website for a basketball academy that would attract new students, explain the training system clearly, and allow quick sign-ups for different age groups. The site had to be dynamic, mobile-first, and emotionally engaging — conveying that basketball is for everyone.
Result
The result is a fully responsive website with a clear structure, detailed program descriptions, and a modern visual style. The design communicates trust and professionalism, helping the academy grow its visibility and make the enrollment process easier.
Research & Discovery
Before designing any screens, we began with research to deeply understand the academy's users: kids, parents, and adult players.
We conducted interviews, reviewed local competitors and other EU-based sports schools, and identified three main user types — each with different needs.
We mapped:
- Their motivations and doubts (e.g., "Is this right for my child?" or "What's the commitment?"),
- Key blockers in other websites (e.g., unclear schedules or confusing sign-up),
- Their decision-making triggers (trust in coaches, visuals, testimonials).
This helped us craft an experience that speaks directly to each persona.
Information Architecture
From that research, we created a site structure that matches how real users think — not just how businesses talk.
Navigation was grouped by decision flow:
- Learn about programs
- Explore training options by age or skill
- Read about the team
- View photos and results
- Get in touch or register
Everything was kept shallow — no more than 2–3 clicks from homepage to action.
UX Approach
We focused on making the experience simple, motivating, and easy to navigate — especially for parents and teens new to the academy.
Key user journeys like selecting a program, viewing coaches, or submitting an application were reduced to 2–3 clear steps. Instead of overloading with text, we used bold visuals and intuitive CTAs to guide action.
Smooth scroll rhythm and subtle interactions kept the experience dynamic without overwhelming users.
Wireframes
Before moving into UI, we created over 36 wireframes to cover all key pages: homepage, program listings, coach bios, application forms, and gallery. These wireframes helped validate both content hierarchy and the logic of transitions — particularly important on mobile, where space is limited.
This step ensured that nothing would get in the way of the user's decision-making process. We focused on clarity, rhythm, and simplicity.
UI Design
The final website includes all the necessary sections to drive engagement and conversions. There's a welcoming homepage with fast access to key actions. A structured programs page categorizes training by age and skill. Each coach has a dedicated bio with achievements and photos. A gallery shows real training moments, while the news section builds community by sharing tournament updates and academy events. The contact page features an interactive map and application form, and testimonials add trust from real students and parents.
Visual System & Scalability
We designed a visual language that feels energetic and welcoming — just like the academy. The Montserrat typeface gave the interface structure and personality, while a warm orange (#D86840) added vibrance and sportiness. A responsive 12-column grid ensured seamless adaptability across all devices.
To support future growth, we built a scalable Figma component system with reusable cards, forms, nav elements, and CTA modules — allowing the client to update content and add new pages like tournaments or merchandise without redesigning anything from scratch.
Client Impact
After launch, Hustle Basket Academy saw an increase in web-driven sign-ups, higher engagement with content, and better clarity from users during initial contact. The new website became not only a marketing tool, but also a digital extension of the brand — one that communicates clarity, confidence, and commitment to sport.
The school is now equipped with a scalable and conversion-ready platform that will support its growth for years to come.
