Champion Martial Arts
Design Lead for Responsive Web Site: February 2022 - April 2022
Project Goal and Target Audience
Champion Martial Arts is a local studio that wants to allow visitors to read testimonials, learn about their classes, request information and register for sessions.
​
The website allows visitors to see the classes offered, request information using a submission form and to expedite the registration process by allowing student sign-ups and payments through their website.
Project Overview
Members of the community are looking for local classes providing physical activity. There are also parents in search of camps, after school care and martial arts classes in the area.
​
Set up a website that allows visitors to see the classes offered, request information using a submission form and to expedite the registration process by allowing student sign-ups and payments through their website.
Key Challenges and Contraints
There are various martial arts studios in the area. Most sites are informational, but through research, I found several local studios that offered information requests through their sites. I also discovered one studio that offered registration for a free trial class through their site.
​
While designing the website, I wanted visitors to get a good sense of the studio and see the students in action completely through the site. Their top requests included being able to read testimonials, see a gallery of students and most importantly, register for classes or request information through the site.
Research Study Details
1
Unmoderated Usability Study
Florida Residents - Remote
2
Five Participants
3
20-30 Minutes in Length
LoFi Wireframes
Visitors wanted a quick and easy way to find featured information. The request form was added above the fold, and frequently requested information was included right underneath.
Visual navigation to frequently requested information
Easy to find form to request information
Usability Study Findings
1
Time
Visitors wanted to do research online before travelling to various studios in the area.
2
Request Information
Users wanted a quick and easy way to request information and ask specific questions.
3
Register
Ensuring easy registration and secure payments through the website.
The registration process wasn’t as clear initially. Visitors expected to see the registration immediately, but the FAQ and Request Information boxes were at the top. We switched the order and removed the location map to organize the the information in a concise manor.
Before
After
The schedule page was cluttered. The accent image at the top caused too much scrolling before the class options appeared. The image was moved to the left and the information was reorganized on the right. A registration button was also added to make it easier to get to the registration page.
Before
After
HiFi Key Mockups
Responsive Tablet and Mobile Phone Designs
Accessibility Considerations
1
All color combinations have been checked to ensure appropriate contrast for readability
2
The tab order follows a traditional sequence of left to right and top to bottom
3
Headings have been used appropriately to denote main categories and subsections
Project Takeaways
What I learned
Sense of flow and navigation were key factors. I learned to simplify information and considered the hierarchy for the most important information. Balancing visual aesthetic with function was key.
Next Steps
1
Expand site to include various resources for the larger organization.
2
Create a way for students to receive notifications and alerts.
3
Add sign-in capabilities for students to track their progress and see their class schedule.