Elevate Martial Arts
Responsive Web Design
Role :
UX/UI Designer
Platform :
Desktop/Mobile
Tools :
Style Guide, Wireframes, High Fidelity Screens, User Testing
Year :
2024
Project Overview
Brief Introduction
Elevate Martial Arts offers taekwondo classes for all ages, focusing on self-actualization, healing, and strength. They aim to build physical and character strength, confidence, flexibility, and resilience, emphasizing values like courtesy, integrity, and perseverance. Serving Southern Orange County, they teach traditional taekwondo in a modern style.
The Problem
While Elevate Martial Arts social media presence is strong, a more robust web presence is needed. There are inconsistencies in typography and color shades throughout the site. The schedule layout could be improved for better clarity. The "Join Us" call to action should directly lead to a sign-up appointment form, instead of requiring clients to submit brief information and then contacting them to set up an appointment. Consider removing in-person client sign-ups in favor of a digitized form/log. Additionally, implementing a merchandise shop and an events/calendar tab could help parents stay up-to-date.
The Solution
The solution is to enhance the website for a better user experience by improving the website consistency in typography, color, and CTAs. Streamlining the “Join Us” or “Free Trial” CTAs directs users to the sign-up form. Additionally, the website is to feature a clearer schedule layout, merchandise shop, and an events/calendar tab that is fully responsive on different devices.
Research
User Interview Insights
I interviewed users to get a sense of their first impressions of the website layout and how easy it felt to sign up if they were interested in joining.
User experiences with site
"Look and feel is modern and clean. Some colors clash." - Alex
"Love the logo design and colors. Layout could use some work." - Taylor
Pain points
Collectively participants had trouble navigating through the website on a mobile device. There were a lot of usability and functionality issues on mobile.
Digital sign-up
"A sign-up process that goes straight to an appointment form would be great." - Alex
"A direct appointment form would be a nice touch and save time." - Jordan
EMA Affinity Map
After the interviews, I organized the feedback using Affinity Mapping to visually group similar ideas. This helped me spot common themes and better understand what users really needed.
Ideation Process
User/Task Flows
I created a user flow that maps out the steps someone would take to sign up for a free class. The flow makes it simple for users to browse class options, pick a time, and complete their registration without any hassle.
Sitemap
The sitemap was organized to match the current layout, showing how the pages are structured and serving as a guide for easy navigation. It helps users quickly find key sections like signing up for a class, learning about the instructors, checking the schedule, and exploring the member dashboard.
Design Process
Low-Fidelity Wireframes
Starting with low-fi wireframes, I focused on layouts and navigation. Participants were asked to find the calendar and events page, as well as sign up for a free class and complete the form.
High-Fidelity Wireframes
Once the lo-fi structure was validated, I created a hi-fi wireframe that maintained the same theme and layout. Participants were asked to review the calendar page to plan their activities, check out the events page for details on upcoming classes, and sign up for a free trial class by clicking the Free Trial / Book an Appointment button and filling out the form.
Testing & Iterations
Usability Test Results
Initial testing showed that users found it straightforward to navigate through the requested tasks. While the sign-up process for a free class was easy to locate, the use of both "try a free class" and "book an appointment" caused some confusion.
Success Metrics
Completion Rate : % of participants able to complete the tasks successfully.
Error Rate : Number of errors made by users during tasks.
Feedback
Users found it to be straightforward when navigating through the requested tasks.
Sign-up process for a free class was easy to locate but "try a free class" and "book an appointment" was used causing confusion
Results
100% of the participants completed all three tasks.
60% of the participants asked how to leave the appointments booking page
100% of the participants mentioned the inconsistency of the CTAs ("try a free class" & "book an appointment")
Revisions
Based on the feedback, I made adjustments so the CTAs had consistency to omit confusing when signing up as well as implementing a cancel CTA in the sign up screen.
Prototype
The final prototype let users interact with the website, helping them sign up, explore class options, check event details, and complete the registration form for a free trial class. It highlighted how the website could improve the user experience on both desktop and mobile.
View Prototype
Reflection
It was incredibly rewarding to work with a stakeholder and make changes and improvements to their website. Applying what I learned from UXA to a real-world project showed me how valuable and practical these skills are. Seeing the positive impact of my work on an actual stakeholder's site was both exciting and fulfilling.
Elevate Martial Arts
Responsive Web Design
Role :
UX/UI Designer
Platform :
Desktop/Mobile
Tools :
Style Guide, Wireframes, High Fidelity Screens, User Testing
Year :
2024
Project Overview
Brief Introduction
Elevate Martial Arts offers taekwondo classes for all ages, focusing on self-actualization, healing, and strength. They aim to build physical and character strength, confidence, flexibility, and resilience, emphasizing values like courtesy, integrity, and perseverance. Serving Southern Orange County, they teach traditional taekwondo in a modern style.
The Problem
While Elevate Martial Arts social media presence is strong, a more robust web presence is needed. There are inconsistencies in typography and color shades throughout the site. The schedule layout could be improved for better clarity. The "Join Us" call to action should directly lead to a sign-up appointment form, instead of requiring clients to submit brief information and then contacting them to set up an appointment. Consider removing in-person client sign-ups in favor of a digitized form/log. Additionally, implementing a merchandise shop and an events/calendar tab could help parents stay up-to-date.
The Solution
The solution is to enhance the website for a better user experience by improving the website consistency in typography, color, and CTAs. Streamlining the “Join Us” or “Free Trial” CTAs directs users to the sign-up form. Additionally, the website is to feature a clearer schedule layout, merchandise shop, and an events/calendar tab that is fully responsive on different devices.
Research
User Interview Insights
I interviewed users to get a sense of their first impressions of the website layout and how easy it felt to sign up if they were interested in joining.
User experiences with site
"Look and feel is modern and clean. Some colors clash." - Alex
"Love the logo design and colors. Layout could use some work." - Taylor
Pain points
Collectively participants had trouble navigating through the website on a mobile device. There were a lot of usability and functionality issues on mobile.
Digital sign-up
"A sign-up process that goes straight to an appointment form would be great." - Alex
"A direct appointment form would be a nice touch and save time." - Jordan
EMA Affinity Map
After the interviews, I organized the feedback using Affinity Mapping to visually group similar ideas. This helped me spot common themes and better understand what users really needed.
Ideation Process
Sitemap
The sitemap was organized to match the current layout, showing how the pages are structured and serving as a guide for easy navigation. It helps users quickly find key sections like signing up for a class, learning about the instructors, checking the schedule, and exploring the member dashboard.
User/Task Flows
I created a user flow that maps out the steps someone would take to sign up for a free class. The flow makes it simple for users to browse class options, pick a time, and complete their registration without any hassle.
Design Process
Low-Fidelity Wireframes
Starting with low-fi wireframes, I focused on layouts and navigation. Participants were asked to find the calendar and events page, as well as sign up for a free class and complete the form.
High-Fidelity Wireframes
Once the lo-fi structure was validated, I created a hi-fi wireframe that maintained the same theme and layout. Participants were asked to review the calendar page to plan their activities, check out the events page for details on upcoming classes, and sign up for a free trial class by clicking the Free Trial / Book an Appointment button and filling out the form.
Testing & Iterations
Prototype
The final prototype let users interact with the website, helping them sign up, explore class options, check event details, and complete the registration form for a free trial class. It highlighted how the website could improve the user experience on both desktop and mobile.
View Prototype
Usability Test Results
Initial testing showed that users found it straightforward to navigate through the requested tasks. While the sign-up process for a free class was easy to locate, the use of both "try a free class" and "book an appointment" caused some confusion.
Success Metrics
Completion Rate : % of participants able to complete the tasks successfully.
Error Rate : Number of errors made by users during tasks.
Feedback
Users found it to be straightforward when navigating through the requested tasks.
Sign-up process for a free class was easy to locate but "try a free class" and "book an appointment" was used causing confusion
Results
100% of the participants completed all three tasks.
60% of the participants asked how to leave the appointments booking page
100% of the participants mentioned the inconsistency of the CTAs ("try a free class" & "book an appointment")
Revisions
Based on the feedback, I made adjustments so the CTAs had consistency to omit confusing when signing up as well as implementing a cancel CTA in the sign up screen.
Reflection
It was incredibly rewarding to work with a stakeholder and make changes and improvements to their website. Applying what I learned from UXA to a real-world project showed me how valuable and practical these skills are. Seeing the positive impact of my work on an actual stakeholder's site was both exciting and fulfilling.
Role :
UX/UI Designer
Platform :
Desktop/Mobile
Tools :
Style Guide, Wireframes, High Fidelity Screens, User Testing
Year :
2024
Project Overview
Brief Introduction
Elevate Martial Arts offers taekwondo classes for all ages, focusing on self-actualization, healing, and strength. They aim to build physical and character strength, confidence, flexibility, and resilience, emphasizing values like courtesy, integrity, and perseverance. Serving Southern Orange County, they teach traditional taekwondo in a modern style.
The Problem
While Elevate Martial Arts social media presence is strong, a more robust web presence is needed. There are inconsistencies in typography and color shades throughout the site. The schedule layout could be improved for better clarity. The "Join Us" call to action should directly lead to a sign-up appointment form, instead of requiring clients to submit brief information and then contacting them to set up an appointment. Consider removing in-person client sign-ups in favor of a digitized form/log. Additionally, implementing a merchandise shop and an events/calendar tab could help parents stay up-to-date.
The Solution
The solution is to enhance the website for a better user experience by improving the website consistency in typography, color, and CTAs. Streamlining the “Join Us” or “Free Trial” CTAs directs users to the sign-up form. Additionally, the website is to feature a clearer schedule layout, merchandise shop, and an events/calendar tab that is fully responsive on different devices.
Research
User Interview Insights
I interviewed users to get a sense of their first impressions of the website layout and how easy it felt to sign up if they were interested in joining.
User experiences with site
"Look and feel is modern and clean. Some colors clash." - Alex
"Love the logo design and colors. Layout could use some work." - Taylor
Pain points
Collectively participants had trouble navigating through the website on a mobile device. There were a lot of usability and functionality issues on mobile.
Digital sign-up
"A sign-up process that goes straight to an appointment form would be great." - Alex
"A direct appointment form would be a nice touch and save time." - Jordan
EMA Affinity Map
After the interviews, I organized the feedback using Affinity Mapping to visually group similar ideas. This helped me spot common themes and better understand what users really needed.
Ideation Process
User/Task Flows
I created a user flow that maps out the steps someone would take to sign up for a free class. The flow makes it simple for users to browse class options, pick a time, and complete their registration without any hassle.
Sitemap
The sitemap was organized to match the current layout, showing how the pages are structured and serving as a guide for easy navigation. It helps users quickly find key sections like signing up for a class, learning about the instructors, checking the schedule, and exploring the member dashboard.
Design Process
Low-Fidelity Wireframes
Starting with low-fi wireframes, I focused on layouts and navigation. Participants were asked to find the calendar and events page, as well as sign up for a free class and complete the form.
Low-Fidelity Wireframes
Participants were asked to navigate and locate inventory, guides, and store pages
High-Fidelity Wireframes
Once the lo-fi structure was validated, I created a hi-fi wireframe that maintained the same theme and layout. Participants were asked to review the calendar page to plan their activities, check out the events page for details on upcoming classes, and sign up for a free trial class by clicking the Free Trial / Book an Appointment button and filling out the form.
Testing & Iterations
Usability Test Results
Initial testing showed that users found it straightforward to navigate through the requested tasks. While the sign-up process for a free class was easy to locate, the use of both "try a free class" and "book an appointment" caused some confusion.
Success Metrics
Completion Rate : % of participants able to complete the tasks successfully.
Error Rate : Number of errors made by users during tasks.
Feedback
Users found it to be straightforward when navigating through the requested tasks.
Sign-up process for a free class was easy to locate but "try a free class" and "book an appointment" was used causing confusion
Results
100% of the participants completed all three tasks.
60% of the participants asked how to leave the appointments booking page
100% of the participants mentioned the inconsistency of the CTAs ("try a free class" & "book an appointment")
Revisions
Based on the feedback, I made adjustments so the CTAs had consistency to omit confusing when signing up as well as implementing a cancel CTA in the sign up screen.
Prototype
The final prototype let users interact with the website, helping them sign up, explore class options, check event details, and complete the registration form for a free trial class. It highlighted how the website could improve the user experience on both desktop and mobile.
View Prototype
Reflection
It was incredibly rewarding to work with a stakeholder and make changes and improvements to their website. Applying what I learned from UXA to a real-world project showed me how valuable and practical these skills are. Seeing the positive impact of my work on an actual stakeholder's site was both exciting and fulfilling.
Elevate Martial Arts
Responsive Web Design