navigate_before
navigate_next
Header Image for emotQuest: iPhone Mockups. Soap & Prose Title Image Header Image for Urban Warrior: iPhone Mockups.
arrow_back

Urban Warrior

Martial Arts Academy App // Conceptual Project

Duration
  • 4 Months
Platform
  • Mobile
Tools
  • Figma // Photoshop
My Role
  • UX Designer // Project Lead
Header Image for Urban Warrior: iPhone Mockups.

Project Overview

Urban Warrior Logo

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.

The Goal

Create a user-centric digital platform for informed decision-making and convenient class management for martial arts students.

My Responsibilities
  • UX/UI Design
  • ux strategy
  • UX Researcher
  • Art Direction
4
wks of research
2
wks of User Testing & synthesizing
8
wks of prototyping

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

User Persona Picture, Iris and Rōz

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.

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

User Persona Picture, Kat

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.

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

Urban Warrior Paper Wireframes mockup
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.

Figma Screenshot of Wireframe of Home Page on Macbook
Home Screen
Home Screen Wireframe
Meet the Instructors
Meet Senseis Screen Wireframe
Meet Sensei Summers
Meet Sensei Summers Screen Wireframe
Schedule
Schedule Screen Wireframe
Payment
Payment Screen Wireframe
Book
Book Screen Wireframe
Confirmation
Confirmation Screen Wireframe
00

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

Schedule Screen Wireframe

Missing back button.

Opportunity for
more information.

After round 1

Schedule Screen // Post Usability 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

About Sensei Screen // Post Usability 1

Font was difficult to read

After round 2

About Sensei Screen // Post Usability 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.

Urban Warrior Original Branding Visual
Urban Warrior Branding Revamp Visual
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.
GIF showing revamped home screen functionality
001
New Home Page
  • Selectively used the stylized fonts and accent colors.
GIF showing revamped Meet your Senseis functionality
002
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.”

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.

Thank you!

Soap & Prose Title Image Header Image for emotQuest: iPhone Mockups.