Damian Hassan
UX, Interaction and Visual Designer
Zang TKD
Agency: DH Creative
Role: Research, Strategy, UX Design, Visual Design, Web Development, Project Management
Introduction / Overview
Zang TKD is a family-oriented martial arts school that builds character in its students through the Korean art of Taekwon-Do. The school was founded in 2009 by Grand Master Robert Zang, a 9th Degree Black Belt in Taekwon-Do. Since then, the school has grown to over 100 active students and a network of instructors. I have been his designer and webmaster since 2013.
When the pandemic shut down schools and in-person activities in 2020, GM Zang, like many other business owners, had to revisit his entire business model. He needed to devise a virtual class model to keep his students engaged and provide enough value to maintain his monthly revenue base.
At first, he used a combination of Facebook Live and Zoom to provide virtual classes, using his Facebook and mailing list to share class information. We revamped the website to function like a blog, providing timely updates and videos to help students practice at home.
Throughout 2020, it was unclear when the school would reopen, and in what capacity. We also knew that changes in public health or state policy could shut the school back down at any time. During this time, GM Zang and I discussed ways to redesign the website so that when the school did reopen for classes, students would have the resources they needed to train at home as well as in person.
We also discussed the need to drive new student registrations. To do this, we would need to provide a better user experience for website visitors.
Understanding the Problem
Early research and feedback from several students and parents helped identify some clear usability issues:
- No clear path for prospective students or parents to get started
- Student resources were confusing, and required a user account to access
- The class schedule was not available for prospective students or parents
I am one of GM Zang’s students and had many conversations with fellow students and parents about what they need from the school.
Research
The project began with comparative research of four similar martial arts schools, providing an audit of each school’s website and a brief highlighting strengths, weaknesses, and key takeaways.
I ran a Hotjar heatmap study to gather data on user behavior. In addition, as we spread the word that the website would be redesigned, I received user feedback from students and parents, either in person or relayed by GM Zang and his assistant instructor. This feedback was noted in a spreadsheet.
Based on this research, I discovered that:
- The most-clicked elements on the heatmap were Contact, Student Resources and Families / Children, followed by Online Store.
- Most traffic came from mobile devices, followed closely by desktop
- Most student feedback came from parents looking for testing requirements and other student resources
- Every other martial arts school website I reviewed included a trial offer for new students with a lead form
I created three personas to represent the target audiences for the website: Parents, Adult Students and Families. Parents looking for activities for their children are the most popular persona, followed by families looking for a group activity. All three represent people I know and interact with at the school on a regular basis.
Early Ideation
The initial solution was to make the site more exciting. GM Zang liked the idea of using videos, page transitions and animation, and we noted that a few of his competitors used video backgrounds in the hero area of their home pages. I chose the Bridge WordPress theme and a template called brdgFITNESS as a basis for the new design, and the plan was to customize it to fit the Zang TKD brand.
Information Architecture
The goals for revamping the website’s information architecture were:
- A clear user flow for prospective students (or decision makers) to learn about the school and take steps to get started, including a call to action on every page.
- A trial offer would allow new students to try six classes and get a uniform with no long-term commitment. This offer can be redeemed through a lead form.
- No more user accounts to access student materials. The student section would be revamped to provide complete testing requirements for every belt level, along with study resources, including step-by-step PDFs and videos.
- Create a YouTube library of each Taekwon-Do pattern, as performed by GM Zang. Embed pattern videos on website pages for accessibility.
- Offer more content for prospective students, including better class descriptions for kids, adults and families, a complete weekly schedule and COVID policies.
- Create pages for each class type to align with target audiences – Parents, Adult Students and Families. Rewrite class page copy to directly address each target audience’s needs and concerns.
- Add testimonials from current students to provide social validation.
A user flow was developed to describe the steps users would take from entry on the home page to completing the Free Trial lead form.
Wireframes
Wireframes helped map out the new UI. The layout was based on the brdgFITNESS template, using components and design patterns that aligned with the overall content strategy.
Visual Design
The first visual design used a dark color scheme and was developed in browser using CSS and a WordPress theme. This design leveraged many of the design elements from the brdgFITNESS template. Ultimately, this version was determined to be too dark and heavy, and was scrapped in favor of a lighter version.
The second visual design was developed a Figma library, organizing colors, typography, buttons and other components to develop a simple design system for the website. This design was based in white, using the red, gold and black from the brand logo as well as a light gray and charcoal for additional depth.
Another visual element was the addition of custom photography, images provided by several student families, as well as some of GM Zang’s archival photos.
Refinement
After working with the brdgFITNESS template, I found that it was cumbersome and took way too much effort to customize for our purposes. Rather than try to make the website fit the template, I scrapped it and went back to the drawing board, designing a new layout that was truer to our goals and focused on providing the content that our target audiences needed.
Handoff
There was no formal handoff, as I also developed the website. However, I did use the component library, prototype and inspect tool in Figma to inform the development process. These artifacts helped me to develop a Dev site that accurately reflected the prototype. Once the Dev site was proofed and approved by GM Zang, the website was soft launched to gather user feedback.
Additional Refinement
During the soft launch, we implemented a survey to gather user feedback on the redesign. Students were encouraged to participate with a random prize drawing where they could win free school swag by completing the survey. We ended up with over 80 responses. Some of the feedback I implemented included:
- Add school hours and class schedules (these had been removed while the school was virtual). General operating hours were also requested.
- Clarify some of the language from the Taekwon-Do Encyclopedia (there was confusion about an article title “Meaning of the Patterns”, which provides a general explanation of what patterns represent in Taekwon-Do, while many students clicked it in search of the meaning of their individual pattern, a requirement for testing).
- Provide more information on the online payment tools (GM Zang had implemented an online payment system that required detailed instructions).
- Provide navigation connecting color belt and Black Belt resources (especially useful for families who might be testing for multiple belt levels).
Final Solution
Reflections
I enjoyed this project very much, because I care deeply about my school and fellow students. It’s personally fulfilling to provide a better user experience for them, to help each one find the tools and resources they need to improve their skills.
Along the way, I learned some valuable lessons. Here are a few reflections:
- Trust the process. For years, I’ve jumped into design before doing the necessary research to identify the problem and build empathy for the user. On this project, I learned the hard way that jumping right into design wastes valuable time. Eventually, I had to go back to the drawing board by clearly defining the problem, documenting my understanding of the user and designing based on these facts, rather than what a template could provide.
- Ask the user. The most valuable insights I gained during this project came directly from users. In many cases, the feedback I received contradicted my assumptions and made me rethink my designs.
- Documentation is key. When I started this project, I based my assumptions on what I thought I knew – past conversations with students and my interpretation of what they needed. By documenting the feedback I received in spreadsheets, I was able to review it all and gain valuable insights, such as how often certain features were requested. This helped inform decisions on what to add, how to organize content and when to leave this as they were.