Urban Warrior
Martial Arts Academy App // Conceptual Project
Duration
-
4 Months
Platform
-
Mobile
Tools
-
Figma // Photoshop
My Role
-
UX Designer // Project Lead
Project Overview
The Urban Warrior Martial Arts Academy is a fictional, multi-method martial arts school in a bustling metropolitan area.
Our mission is to make martial arts accessible to everyone and provide an engaging experience for our students. Transparency is essential to us, and we strive to provide up-front information to empower individuals looking to transform their lives through body-mind balance and discipline.
Our target audience consists of individuals seeking personal growth and positive life changes through martial arts practice.
The Problem
Ambiguity //
-
Prospective students seek detailed information before enrolling.
-
They seek details on classes, curriculum, and instructors' qualifications.
-
They're interested in understanding the personal benefits and growth opportunities that come with the practice.
Inconvenience //
-
Martial arts schools often lack convenient online scheduling.
-
A user-friendly class scheduling system is needed.
My Responsibilities
-
UX/UI Design
-
ux strategy
-
UX Researcher
-
Art Direction
Understanding the User
In order to better understand my users, I conducted interviews with five individuals. The group included two adults who have never practiced martial arts, two adults who currently practice or have taken classes in the past, and one parent with a child who currently practices martial arts.
After analyzing the data, I determined that the primary user group consists of prospective students who want to make informed decisions when choosing a martial arts class. The study confirmed my initial assumptions and also revealed new contributing factors.
The research indicated that some students require more information on the various types of martial arts available in their area and are hesitant to participate in classes with unfamiliar people. Parents expressed concerns about the safety and well-being of their children in a new learning environment.
Pain Points
Convenience //
-
Most Martial Arts school websites do not provide the ability to book classes online.
Awareness //
-
Most Martial Arts school websites do not provide details about the instructors who teach at the school.
Accessibility //
-
Students may wish to participate in a class but cannot do so in person.
User Persona 1
Iriss & Rōz Martinez
I have a full-time job, so I miss out on spending time with my little sister after school. I want to find something fun and enriching for her to do during that time.
Iriss Martinez
AGE 24 // BA Biology // Phila. PA // horticulturalist
Iriss is the legal guardian of her younger sister, Rōz, and they reside in a cozy apartment in Philadelphia. Iriss strives to be an exemplary role model for her sister, who has a passion for sports but quit playing lacrosse in school due to feeling inadequate.
Iriss believes that martial arts could be a perfect outlet for Rōz’s energy and creativity, as well as a great way for her to spend time outside the house while Iriss is at work. However, Iriss wants to ensure that the martial arts school is safe and of high quality before enrolling her sister. She also wants to find the right instructor who can connect with her sister. Iriss is looking for a way to vet the martial arts school without having to make a phone call to the studio or go in person.
Goals //
-
Find the perfect martial arts program for Rōz.
-
Ensure safety and quality of the chosen martial arts school.
-
Assess compatibility with the instructor for for Rōz
Frustrations //
-
Limited options for activities that match Rōz's interests.
-
Difficulty in vetting the safety and quality of martial arts schools.
-
Uncertainty about whether the instructors will be the right fit for Rōz
User Persona 2
Kat Fischer
I'm looking for a fun and creative physical activity that will help me take my mind off work and enjoy some quality time with my wife.
Kat Fischer
AGE 61 // Juris Doctor // Phila. PA // Lawyer
Kat, a dedicated lawyer, devotes long hours to her work within the confines of her office. Anticipating the end of each day, she eagerly awaits the opportunity to be reunited with her beloved wife. As they both seek to explore a fresh shared pastime, Kat contemplates proposing martial arts. She believes that engaging in this practice together would not only allow them to immerse themselves in something new but also offer a platform for mutual accomplishment and growth.
Goals //
-
Find a new hobby to enjoy with her wife
-
Engage in a creative physical activity to take her mind off work.
-
Have fun and create shared experiences with her wife.
Frustrations //
-
Limited time available due to her demanding lawyer job.
-
Struggling to find a compatible hobby for her and her wife.
-
Seeking a way to de-stress and be creative.
The competitive audit
I performed a competitive analysis to pinpoint the advantages and disadvantages of my rivals in El Paso, TX, consisting of three direct and one indirect competitor. I conducted extensive comparative research on various factors that impacted my strategic goals and decision-making process. Ultimately, I identified five key components that guided my project.
Championship Martial arts //
✖ Visible Pricing
✔ Student Login
✖ Visible Schedule✔ Style Variety
✔ Remote Option
Shaolin Wushu Kung FU //
✖ Visible Pricing
✖ Student Login
✖ Visible Schedule✖ Style Variety
✖ Remote Option
Hayashi's Martial arts academy //
✖ Visible Pricing
✖ Student Login
✔ Visible Schedule
✔ Style Variety
✖ Remote Option
Apple Fitness Plus //
✔ Visible Pricing
✔ Student Login
✔ Visible Schedule
✔ Style Variety
✔ Remote Option
The Results //
Based on the results of my competitive audit, several key findings emerged. Firstly, my competitors generally demonstrated a lack of transparent pricing. This highlights my emphasis on providing clarity to my customers.
Secondly, I observed that student login functionalities were missing among my competitors, not permitting students to access personalized accounts and track their progress easily. Additionally, my competitors underplayed the importance of a visible class schedule, enabling students to conveniently plan their training.
Furthermore, my analysis highlighted that most competitors boasted diverse martial arts styles, catering to a broad spectrum of interests and preferences. Lastly, while my competitors primarily offered in-person training options, the availability of a remote option was an area where I identified a potential opportunity for differentiation. These findings provide valuable insights that will guide my strategic decisions moving forward, enabling me to capitalize on my strengths and address areas for improvement.
Defining the problem
Martial arts students need an accessible, comprehensive overview of available martial arts schools in their area to save time by avoiding going to the school in person to get more information. Students also want a convenient way of scheduling classes for in-person or remote classes.
Ideate
Paper Wireframes
-
I created wireframes to plan the digital versions of my ideas. I created a set of priorities and made a point to highlight those things in my wireframes.
I prioritized instructors and scheduling on the home screen to make booking easier for customers.
Prototype
Low-Fidelity Prototype
I created a basic prototype using the digital wireframes I had made. The goal was to simplify the process of scheduling classes, so the prototype was perfect for a simple usability test. My intention was to gain useful feedback and insights on the system's ease of use.
Test
Usability Studies
I conducted two usability studies to refine the design process and enhance user experience. The studies helped guide the design from wireframes to high-fidelity prototypes, identifying areas that needed further refinement. I continually optimized the design with a user-centered approach.
Round 1 findings //
-
Users want easy access to instructor details from the scheduling interface.
-
Users want effortless navigation.
Round 2 FINDINGS //
-
Users found the stylized font too hard to read.
-
Users want more info on martial arts styles from the scheduling page.
Round 1 refinements
While my early designs had a scheduling page that provided ample information about each class, the usability study inspired me to create a separate button that led to an instructor’s bio page so students could quickly learn more about their instructors before taking a class with them.
Before Round 1
Missing back button.
Opportunity for
more information.
After round 1
Added stylized
back button.
Added link to
the sensei bio.
Round 2 refinements
After conducting a second usability study, it was discovered that some users had difficulty reading the original stylized font I had chosen. To address this, I updated the font to something more legible while still preserving the graffiti-inspired aesthetic of the original font.
Before Round 2
Font was difficult to read
After round 2
Changed the font
to make it easier to read,
while keeping the same aesthetic
Revamp
After finishing the second round of high-fidelity mockups, I identified several next steps for the project. One of them was to give the entire app a visual overhaul. They looked amateurish and uninspiring, and I wasn’t happy with them. However, I knew I wanted to keep the “urban” theme I had originally envisioned. Additionally, I had intended for the app to have a darker theme, and the colors in the first design didn’t match that. Therefore, I started working on improving the designs.
Before //
-
Typography pairing was not well-matched due to similar heights and sharp corners.
-
background had a dark green concrete texture that seemed out of place.
-
Buttons had 100% corner radius, which felt dated and too playful.
-
The buttons and fields had a lighter theme that didn't align with the branding I was searching for.
-
There were only animations for hovering or pressing, which was a dull experience.
After //
-
New graffiti font with rounded edges and unique ligatures complementing the sleek sans-serif font.
-
Changed the background to a black brick texture, creating an on-brand dark mode.
-
Adjusted the corner radius to 5, which gives it a sleek, modern touch.
-
Buttons were changed to a darker theme,
-
Included sliding and clicking animations.
New Home Page
-
Selectively used the stylized fonts and accent colors.
Originality
-
Used Adobe Photoshop to create original items and effects.
-
The hamburger menu is made from the site's stylized font's dash symbol, reshaped and stacked.
-
Similarly, the back and close buttons utilize the stylized font's typography.
High-Fidelity Prototype
The ultimate high-fidelity prototype showcased a captivating and informative process for scheduling a class.
Considerations & Takeaways
“Sweet, they let you schedule online. That’s my favorite thing to do because I hate talking to people. You can attend virtually too? That's awesome.”
Participant 2, 1st usability study
Accessibility Considerations
-
The pages have a structured hierarchy with specific fonts and sizes to aid those who use screen readers in navigating them.
-
Utilized a highlighting function that appears when hovering over or pressing on linked images and form fields for visibility.
-
All website images will have alt text for screen reader users.
Impact
-
According to the feedback from the usability studies, this app empowers people to make an informed decision when scheduling a martial arts class.
What I learned
-
Throughout designing this app, I have come to appreciate receiving feedback. It's helpful to hear suggestions for improvement, as it allows me to learn and grow. The insights shared by others resulted in better designs.
Next Steps
Create an interactive "My Account" page and include stats, awards, and challenges.
Follow up with another usability study to identify any new pain points.
Conduct a usability study with only users with disabilities that would force them to interact with the app in alternative ways to spot any pain points regarding accessibility.