Black Belt Bae's and Black Belt Jung's Taekwondo, established in 2014, are launching their Carrington, Calgary branch in January 2023. Founded by Master Hyunmin Jung and Master Jihyeok Bae, this academy boasts top-tier instructors offering martial arts education, self-defense, Olympic-style sparring, and life skills development in Canyon Meadows, Mahogany, Seton, and Carrington.
November 2, 2023 to December 3, 2023
Figma, Webflow, Adobe Photoshop
As I've created the websites, my role has expanded beyond the usual UX design tasks. It's not just about visuals, user behavior, and experience anymore; I've also got to dive into rewriting some of the content. Since the business owners are swamped with their class schedules, I've also provided support and assistance with the content.
The owners aim to take charge of website management, seeking the freedom to tweak and refresh content post-website development. The new website enhancing the mobile experience for customers is a priority, aiming for a sleek and contemporary site. Specifically, on the mobile interface, they seeking a way to ensure the call-to-action button remains ever-present for visitors and encourages them to engage actively with the site, ultimately driving lead generation.
I tried accessing the website on my phone to get information about class schedules, but it was so hard to navigate. I wish it was more mobile-friendly because I'm always on the go.
I wanted to refer a friend to the Taekwondo classes, but when I tried to show them the website on my phone, it was so difficult to use. It would be great if the site could be made more mobile-friendly for sharing information.
I conducted five face-to-face interviews with parents at the studio to explore their opinions and issues related to the website. In these conversations, I identified challenges like subpar mobile usability, inconsistent design aesthetics, and problems with interacting with the call-to-action (CTA) button.
User pain points:
Similar to many small businesses in the city, business owners often hire someone solely for logo design without completing a media kit or brand guide. While this may appear unnecessary to most, these media kits and brand guides establish crucial standards for their web and marketing endeavors, ensuring consistency across all channels, including their website.
The website's information architecture prioritizes user-friendliness. The main menu features sections such as "Home," "About Us," "Birthday Parties," "Summer Camp," and "Locations." Subcategories under "About" encompass "Mission Statement," "Instructors," and a "Contact Form." Instructors' profiles highlight their expertise, "Birthday Parties" includes details on "Parties Info" and "Booking," and the "Locations" section offers a redirect link to the Google Map location for each studio, alongside a contact form. This structure ensures convenient access to information about classes, instructors, and studio locations.
Replace low-resolution and less elegant images from the previous website, as these visuals are key elements of its brand identity.
Implement a sticky menu and call-to-action (CTA) that remains visible on the screen at all times. This encourages customers to easily take action and sign up for a free trial class.
Streamline the submission process for parents by incorporating drop-down menus on forms. Given the numerous class and location options, this feature allows for faster and more convenient information submission.
Wireframing Black Belt Taekwondo's website is essential because it provides the owners with a visual representation of each page at an early stage of the project. This visual understanding enables them to gain approval and make informed decisions before the creative phase commences. By outlining the site's layout, structure, and content placement, wireframes offer a clear blueprint that helps owners visualize how the final website will look and function. It allows for feedback and adjustments to be made efficiently, ensuring that the project aligns with the owner's vision and goals from the very beginning, ultimately saving time and resources as the project progresses into the creative phase.
Adopting a mobile-first approach for Black Belt Taekwondo's website design is crucial in today's digital landscape. With the increasing prevalence of mobile device usage, prioritizing mobile responsiveness ensures that the website is accessible and user-friendly on smartphones and tablets. This approach not only caters to the growing mobile audience but also improves overall user experience. By starting the design process with mobile devices in mind, I can focus on optimizing content, navigation, and functionality for smaller screens. This not only enhances the site's performance on mobile but also makes it easier to scale up for larger screens, creating a seamless and consistent user experience across all devices. Furthermore, taking a mobile-first approach aligns with search engine algorithms that prioritize mobile-friendly websites, potentially boosting the site's visibility and rankings in search results.
I conducted a second round of usability testing with another customer at the studio to validate whether the app's designs effectively met their requirements. The test comprised a scripted scenario, instructing the customer to perform tasks such as booking a free trial class from the main dashboard, reserving a spot for the summer camp, and utilizing the new feature for finding the studio's directions. Both the business owners and I closely observed the participant's interaction with the prototype. The session revealed that the customer found the forms to be user-friendly and straightforward. Additionally, the customer expressed appreciation for the feature that allows for easy access to Google Maps via a button under each location, greatly enhancing the mobile experience.
The UX project's results for Black Belt Taekwondo's website and mobile site redesign have been highly favorable. The redesign improved the overall user experience, enhancing navigation, information accessibility, and class booking, including free trials. The addition of Google Maps for each studio location further improved mobile usability. This project underscores the advantages of user-centered design, leading to increased satisfaction and streamlined user interactions, benefiting both the organization and its users.
Found to be user-friendly and straightforward, streamlining class registration.
Usability testing and customer feedback confirmed the website and app effectively address user needs.
Ongoing monitoring and refinement are essential to maintain a seamless user experience.
Emphasis on user-centered design underscores the importance of iterative testing for optimal results.