Bringing martial arts online with a user-friendly experience that drives action.
Project Type
Website redesign
Role
UX Designer
Tools Used
Figma
Duration
2 Months
Team
1 UX Designer, 2 Business owners
Focus Areas
Mobile-first, increase form conversion
This project focused on redesigning the Black Belt Taekwondo website to improve user engagement, streamline navigation, and help new visitors quickly take action, whether booking a trial or finding the nearest location.
Black Belt Taekwondo had a clear message built on discipline, respect, and community, but the website did not deliver the same impact. New users struggled to find key information, calls to action were scattered, and the overall structure made navigation confusing. The business was strong in person, but online it lacked clarity and momentum. This redesign set out to change that, making sure every visitor could easily connect with the brand and take the next step with confidence.
The goal was simple but meaningful, create a website experience that matched the energy and professionalism of the Taekwondo school itself. We wanted new visitors to feel welcomed, informed, and ready to take action. That meant clarifying the content, improving mobile responsiveness, and guiding users toward clear next steps like booking a trial or finding a nearby location. Everything needed to support both the brand’s mission and the practical needs of busy families looking for the right fit.
We designed the experience with two groups in mind which are parents and potential students. For parents, the website needed to be fast, clear, and reassuring. They were often visiting between errands, looking for key details like schedules, pricing, and how to book a trial. Trust and clarity were essential. For students, especially younger ones and teens, the site needed to feel modern and inspiring. It had to reflect the energy and discipline they’d experience in class, while also being easy to explore on a phone or tablet. Understanding both perspectives helped us shape a design that felt approachable, informative, and action-ready.
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.
Before jumping into design, I took time to understand what was getting in the way. A quick audit of the existing site revealed scattered navigation, inconsistent messaging, and too many calls to action competing for attention. Pages felt crowded, especially on mobile, and users struggled to find class details or contact forms without digging. I also reviewed analytics and user behavior patterns. Most visitors landed on the homepage, scrolled briefly, then dropped off, often without clicking further. This signaled a lack of clarity in both layout and message. These insights shaped our priorities: simplify the experience, guide users with intention, and make every page feel like a confident step forward.
The old site lacked energy. It did not reflect the discipline, movement, or pride you feel the moment you walk into a Taekwondo studio. The experience felt flat and generic, missing the dynamic spirit that defines martial arts. To change that, I introduced a bolder and more focused visual direction. Strong typography, confident spacing, and a refreshed black and red palette helped convey strength and precision. Imagery was selected to highlight real students in motion, showcasing effort, growth, and a sense of belonging. (which will be introduce in the following sessions) Every visual element was crafted to bring the brand’s purpose to life and help users feel the same motivation they would stepping into class.
There was no formal branding to start with no guidelines, no type rules, no color standards. But there were clues. I began by pulling from what the business already had: the logo, uniforms, signage, and social media posts. From there, I developed a visual system that felt authentic to their identity. Strong, modern typefaces paired with a bold red-and-black palette reflected the discipline and energy of martial arts. This foundation became more than a style which it gave the site consistency, confidence, and a look that could grow with the brand.
Once we understood what users were looking for, it was time to rethink how the content was organized. The original site buried important details like trial class info, locations, and schedules under vague menu labels. It took too many clicks to get anywhere, and the navigation felt more like guesswork than guidance. I restructured the site map around what users actually needed, starting with clear top-level categories like Programs, Locations, and Book a Trial. Content was grouped by task, not by internal logic, so users could move through the site without getting lost. This new structure gave the design a clear backbone and made every page feel easier to navigate, especially on mobile.
With the structure in place and the brand visuals defined, I brought the pages to life. Each screen was designed to guide users with intention, starting with a clear call to action, followed by focused content blocks and supportive imagery. I kept layouts clean and flexible, giving each section room to breathe while maintaining a strong visual rhythm. On mobile, everything was designed with quick scanning and easy tapping in mind. Buttons were large enough to use comfortably, menus were simplified, and key actions stayed visible throughout the journey. From homepage to contact form, every interaction was shaped to feel simple, confident, and purposeful.
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.
Before finalizing the visuals, I started with low and mid-fidelity wireframes to map out the layout, content flow, and key interactions. These early versions helped us focus on structure without getting distracted by styling. I tested the wireframes with a small group of internal stakeholders and real users, asking them to complete simple tasks like finding class info, booking a trial, or locating a studio. Their feedback was clear, some labels needed work, buttons were getting missed on mobile, and users wanted quicker access to the trial signup. Small changes in spacing, wording, and hierarchy made a big difference. By the time we moved to high-fidelity designs, the foundation was strong and the flow felt natural.
With the wireframes in place and direction confirmed, I moved into high-fidelity design to bring the new visual identity to life. I introduced bold typography, clear layouts, and focused calls to action to better reflect the energy and values of the brand. Each page was refined with consistency and ease of use in mind, helping users engage with confidence. Working closely with the business owner, we made sure the final design stayed true to their voice while creating a smoother and more inviting user experience.
Since many users accessed the site from their phones, mobile responsiveness was a top priority. I restructured layouts to prioritize readability, tap targets, and scrolling flow on smaller screens. Navigation was simplified, forms were shortened, and buttons were placed where users expected them. This ensured that whether a parent was registering on the go or checking class times from the car, the experience remained smooth and stress-free.
The original site lacked clear messaging and often buried important information beneath dense paragraphs. To fix this, I rewrote key content to be concise, welcoming, and action-driven. Headlines were crafted to reflect the brand’s values of discipline, confidence, and growth. Calls to action were made more intentional, guiding visitors toward sign-ups, trial classes, and contact forms with clarity and purpose.
To support future growth and updates, I built a modular design system in Figma that the team could easily manage. Each section from class offerings to instructor bios was designed as a flexible block that could be reused and rearranged as needed. This approach allowed the site to grow alongside the business, without requiring a full redesign every time something changed. Clean layouts, consistent styling, and mobile responsiveness made the site both professional and practical.
A large portion of visitors accessed the site from their phones, but the old layout wasn’t designed with mobile in mind. Pages were hard to read, buttons were too small, and important information often got lost. I restructured the layout to prioritize clarity on small screens to ensuring quick access to schedules, contact info, and calls to action. Now, whether users are on the go or at home, they can easily navigate, sign up, or get in touch with just a few taps.
Before the redesign, calls to action were buried in text or scattered across unrelated pages. Visitors interested in booking a trial class or getting in touch had to dig for the next step. I reorganized the content flow and placed clear, consistent CTAs across the site, always visible, always relevant. Whether users landed on the homepage, program details, or the contact page, they were guided toward one action: taking that next step with confidence.
Final Site: https://www.blackbelttaekwondocalgary.com/
Final Site: https://www.calgarytaekwondonw.com/
With the core structure in place, I built a flexible layout system that could easily evolve alongside the business. Each section, from class offerings to instructor bios, was designed using modular components, allowing the team to add or adjust content without disrupting the overall experience. I kept the design lightweight and responsive, making sure it worked seamlessly across devices. The result was a future ready site that could scale with new programs, promotions, and community updates without needing a complete redesign.
“The class schedule is easy to understand and actually works on mobile, which saves me a ton of time.” - Parent
“The site actually makes me proud to be part of the school. It looks strong and focused.” - Student
“Everything I needed was right there. I booked a trial lesson in under five minutes.” - First time visitor
After launch, the difference was clear. Parents were able to find class schedules and sign-up forms faster, inquiries through the contact form increased, and the site’s bounce rate dropped noticeably. Even existing students mentioned how much easier it was to navigate and stay up to date with announcements. While the business continued tracking deeper metrics over time, early feedback and behavior patterns already showed that the redesign made it easier for families to connect with the studio and take action.
This project was more than a visual refresh. It was about helping a small business tell its story clearly and confidently online. By grounding each decision in user needs and business goals, I was able to build a site that reflects the values of Black Belt Taekwondo and supports its growth. From defining a visual identity to improving the user journey, the work created real change for both new and returning visitors. Most importantly, it reminded me that even the smallest shifts in clarity and structure can have a big impact when they’re rooted in empathy and purpose.
This project proved that even small businesses can benefit from strategic design thinking. By aligning the digital experience with the values of discipline, community, and growth, we helped the studio build stronger connections with families and new students. Watching a local brand come to life online with clarity and confidence was one of the most rewarding outcomes of this work.