Agency: DH Creative
Role: Research, Strategy, UX Design, Visual Design, Web Development, Project Management
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.
Early research and feedback from several students and parents helped identify some clear usability issues:
I am one of GM Zang’s students and had many conversations with fellow students and parents about what they need from the school.
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:
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.
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.
The goals for revamping the website’s information architecture were:
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 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.
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.
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.
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.
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:
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: