ROBERT JACKSON
Graphic Artist/ Animator
Cheung Kuen Kung Fu
Tools
Figma
Client
Cheung Kuen Kung Fu (Martial Arts School)
The Product
Design a specialized mobile app for a martial arts school.
Year
2024
Project Duration
5 months
The Problem
Students and practitioners are not always able to make it to class always. Obligations such as work, family, exhaustion, etc. plays a factor to why they can’t make it to class
The Goal
Design an Martial Arts App will let users access classes and tutorials which will affect users who can't make it to classes by helping users get and maintain fitness, stay up to date on missed classes / demonstrations, and maintain training routine.
My Role(s)
UX Design & Research Lead
As the UX Design and Research Lead for this project, I was responsible for the full UX design process. My duties included conducting user research (gathering feedback from fellow martial arts students), creating user personas, affinity diagramming, developing user journeys, leading rapid sketching exercises, storyboarding, wireframing, prototyping, iterating on designs, and user testing.
User Summary
Research revealed that while most martial arts schools have websites, many are outdated with broken links. Students frequently miss classes due to scheduling conflicts, traffic, fatigue, family obligations, or travel. A specialized martial arts app would allow these students to stay current with lessons and continue their training, regardless of attendance.
User Pain Points
Traffic
Adults commute one-way travel time was 26.8 minutes. 8.9% commuted one-way was 60 minutes or more in 2023, according the Census Bureau.
Fatigue
Fatigue from work, and commuting back and forth plays a role to students missing classes.
Time / Schedule
Different Work schedules, school classes and events, etc. makes attending class not possible.
Motivation
It can difficult to keep motivated to keep up with training.
Distance
Relocating to a different city or state. Users would have to find new school to train, which the user will have to ‘start over’ or not continue training
User Persona
Jay is a State worker who needs An app to keep them updated on the lessons they have missed because Commuting directly home from work to class isn’t always convenient, and can be tiring.
User Journey Map
Mapping out Jay’s User journey shows how convenient it would be for users to have access to the martial arts schools video lessons and tutorials via the app, should they cannot make it in-person.
The Design
Paper Wireframes
The goal for this paper wireframes is to create a simplistic design with a gamification feel style as the user progresses through the videos.
Digital Wireframes
First Lo-Fi design; I wanted to keep the overall design simple, and minimalistic. I have the menu on the bottom middle; between the messaging icon and the progress icon. The search icon I place at the top left in case the user wanted to search for a video
Based on the feedback, I decided to to add the contacts and search options to the menu instead of having them separate. This allowed to add more buttons to the bottom. I also moved the menu to the top left, and added the tutorials at the bottom
Low-fidelity prototype
The Low-Fidelity prototype connected to the user flow of the app to how the user navigate to the Martial arts video lessons.
To view the low-fidelity prototype, click the following link: Low-Fidelity prototype
Usability Study
Once the initial mockups were developed, I went back to the users to evaluate the app's navigation and overall flow. Although they liked the interface's clean look, they considered the design overly simplistic and noted that the absence of a prominent search feature hindered their workflow significantly. Additionally, they expressed a desire for more features, including demo videos and the option for private lessons.
Round 1 findings
01
Was confused that the logo was the home button
02
Add a login page before homepage
03
Add demonstration videos
Round 2 findings
01
Users wanted more visuals
02
Would like to see private lesson option
03
Add confirmation page after private lesson
After the usability study the participants thought the design was too simple. They thought adding more to the homepage would lessen the confusion to where to navigate, and find video lessons and resources. So i decided to move the menu to the top left of the homepage, and added the search and message buttons. The tutorials, etc on the bottom middle bar can be accessed by swiping up.
I initially wanted to do a carousel that side scrolls the different styles to select. I decided to have the styles all on one page to select. Upon clicking the option, a brief description of the will be available for the user to view.
Mockups
Final Iterations
“It’s really amazing! I would definitely sign up when completed!”
Participant A
Reflection
Throughout this project I have learned how important research is when creating user experience. I gained a better understanding that the user must come first, then the design. Not the other way around. The persona portion was good to learn as it helps you to put yourself in the user’s shoes. Their feedback plays a critical role on what steps to take when iterating designs to create the best UX experience possible.
Next Steps
01
Continue to refine the design to make it better. So, getting more user feedback to The end goal is to have a fully working UX design.
02
Improving the responsive website. Maybe adding more pages, using the feedback from the user participants.
03
Address the pain points the users provide to deliver the best design possible.