Black Belt Taekwondo

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.

Role

UX/UI Designer

Team

Business owners

Duration

November 2, 2023 to December 3, 2023

Tools

Figma, Webflow, Adobe Photoshop

Responsibilities

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.

Project Goals

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.

Target Users

Parent

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.

Parent

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.

Understanding the Problems

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:

  • Inconsistent Elegance: The lack of desired elegance in the appearance and content layout of the websites affects the overall user experience, potentially impacting engagement and trust.
  • Mobile Usability Issues: Content readability problems on mobile devices hinder user comprehension and accessibility, potentially leading to reduced brand recognition and user engagement.
  • Limited Brand Awareness: Visitors struggle to recognize and connect with the brand due to unclear or insufficiently highlighted branding elements on the website.
  • CTA Button Visibility and Placement: Users find it challenging to identify and interact with the Call-to-Action (CTA) button, especially as it lacks persistent visibility across desktop and mobile screens. Its placement does not align with user expectations.
  • Poor Mobile Experience: Overall, the mobile experience lacks efficiency and user-friendliness, exacerbated by illogical content arrangement, which may discourage prolonged user engagement and interaction.

Generate Visual Style

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.

Information Architecture

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.

Design Decisions

Optimize Website Images

Replace low-resolution and less elegant images from the previous website, as these visuals are key elements of its brand identity.

Introduce Sticky Menu and CTA

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.

Enhance Form Usability with Drop-Down Options

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

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.

Usability Testing

During the usability testing for our website, we had the valuable input of a customer named Ivy. Ivy's participation was instrumental in providing real-world insights into the user experience. As she navigated the website, we observed her interactions, challenges, and preferences. Ivy's feedback shed light on areas where improvements were needed, particularly in terms of user-friendliness and the ease of completing tasks such as booking a free trial class. Notably, she found difficulty locating the CTA (Call-to-Action) button, which highlighted a specific usability issue that we needed to address. Her input has been an essential part of our efforts to create a website that caters to the needs and expectations of our customers, ensuring that their online journey with Black Belt Taekwondo is as smooth and efficient as possible. We are grateful for Ivy's involvement in our usability testing process, which has been invaluable in shaping the website's design and functionality.

Design Refinements

Validating the Design

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.

Results and Takeaways

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.

Booking forms

Found to be user-friendly and straightforward, streamlining class registration.

Testing and feedback

Usability testing and customer feedback confirmed the website and app effectively address user needs.

Monitoring and refinement

Ongoing monitoring and refinement are essential to maintain a seamless user experience.

User-centered design

Emphasis on user-centered design underscores the importance of iterative testing for optimal results.