Family Black Belt Academy
Professional Service and Course Listing Website for Seattle-Based Martial Arts Studio
Family Black Belt Academy is a premier martial arts school that teaches students discipline, focus, leadership, anti-bullying tactics, and a wide variety of values. While many martial arts schools focus on teaching kicks and hand strikes, Family Black Belt Academy wants its students to learn life lessons that can positively impact the their experiences in the studio, in their academic lives, and beyond.
Family Black Belt offers classes and camps for youth as well as special events and classes for adults and families.
A primary focus of this project was to add cohesion to Family Black Belt’s digital marketing materials. In addition to completing a redesign of the company’s website, we were also tasked with setting the tone by touching up the logo.
For the website itself, Family Black Belt Academy wanted to convey the authority and expertise of the studio’s staff. The design needed to be modernized and the content more intuitive to navigate. Family Black Belt’s desired user path included making it easy for users to find information about the school, watch video testimonials, learn about upcoming events, and ultimately sign up for a free private lesson.
The number one objective was twofold: Bring in new business and increase the retention rate of current students by encouraging them to upgrade to the leadership program.
Website Design and Development Successes
To begin, we consulted with the client about final logo design. The completed logo work then provided us inspiration for other elements across the site; our design team incorporated the logo’s bright blue throughout the design as an accent color to bring attention to critical calls to action (like those centered on class information and the benefits of learning martial arts).
The high-contrast nature of the logo’s color palette is likewise replicated across the website. We opted for a mostly black background across all pages that helps the imagery and large white and blue text pop. For legibility, information sections heavy with text are treated to the reverse—a white background with bold, deep gray text. Headings appear much larger than body text to establish hierarchy, and additional font stylings (like a bolder weight) are used sparingly to emphasize key phrases and add visual interest to each page.
The homepage masthead area is an immediate attention grabber—it features a full-width background video of students in action (if a picture says a thousand words, a video says a million). Our team optimized the video prior to building it in to ensure the page load time was unaffected by this feature.
As noted, a major focus of our design and development work was on making the class schedule as accessible and easy to update as possible. We dedicated an entire section of the website to describing each class, answering frequently asked questions, and advertising the free introductory class options. High-contrast block separations and specially developed features—like the accordion-style content blocks for the FAQs—help shorten page scroll, keeping users interested while steering them toward the primary CTA near the bottom.
We also separated the class schedule section into two separate parts—one for new students and one for ongoing/regular classes. On these pages, we pull content from a third-party application onto the site via inline frame, making it easy for students to sign up and learn about course offerings without having to navigate away from Family Black Belt’s primary domain.
Each of these page areas is available from the main navigation “megamenu” which collapses into a hamburger-style menu on mobile. Other elements on each page stack appropriately on smaller screens, ensuring that the site is both stunning and accessible to all users regardless of which device they’re accessing it from.
Building the website on FusionCMS—a customizable content management system—allowed us to be as flexible as required with this design. Call-to-action and masthead spaces are easy to update on the backend and help improve the scalability of this website as the business itself grows.
Health & Fitness