Karate App
Personal Achievement Martial Art - Case Study
My Roles - UX Design, UX Research and UI Design - Worked with WANDR
Duration - 8 Weeks
PROBLEM BACKGROUND
During my 8 week internship course with WANDR, I was given a task to find a problem within 100 websites chosen by WANDR or find a problem to solve within my own experience. I decided to choose an app that my family and I use weekly, Personal Achievements Martial Arts. It's a app that I felt could really use some help within their design system.
CHALLENGE
Simplify the booking process for Personal Achievement Martial Art
Personal Achievement Martial Arts is a karate studio in Wheat Ridge, Colorado. They teach martial arts to everyone, regardless of age, gender or experience level. They strive to create an environment for individuals to achieve, develop and succeed on their personal goals.
I use Personal Achievement Martial Arts app weekly to enroll my two children for their karate classes. Every time I use the app I seem to find myself very frustrated by the time I have accomplished the task of enrolling each child individually to their weekly classes.
Goals for simplifying the booking process:
• Simplify the user flow for booking a class.
• Ability to select multiple options
• Filter/sorting system
• Eye appealing, toning down colors.
• Help update the overall look and feel.
HOW MIGHT WE (HMW)
While conducting my research I came up with a couple how might we questions to better understand my users needs for using this app to book classes.
How might we make a more user-friendly booking process?
How might we make the booking processes simple for the user to use?
PRIMARY RESEARCH
An interview guide was created to use as a script during the user interviews. With the short amount of time given for this step WANDR setup a meeting with one of their product designer, Jamie Li.
Interview:
Jamie Li, was a great person to interview, right away she had experience booking an online class for cycling. Jamie was able to give me a quick detailed run down of her experience during this process. Explaining her favorite part of the process was it's simple and easy to use.
Questions:
While asking Jamie questions about her thoughts, needs and wants throughout the home screen of Personal Achievements Martial Arts app. She continued to say the app felt incomplete and the red color was so alarming it was hard to get past.
Booking process questions:
This is where Jamie gave me a lot of information and details about her perspective. Her first impression of this screen was she knew that it was for booking a class. But expressed how all the classes mixed together were overwhelming and difficult to distinguish which one was which. Saying some kind of sorting button would be great for the users. She expressed this screen having no clear hierarchy and could use some structure. The repeating of times on the descriptions were confusing, it would be nice to see the time once with the duration, then have descriptions more consistent throughout.
I was able to ask Jamie what she would change on this screen and why? Her response was interesting, she thought the calendar was a great anchor, she enjoyed being able to see how many more bookings you have, but said the class description should be more consistent. It almost felt like she was being spammed with all this not needed information and of course the red needed to change. Also adding some images/pictures/icons to represent the different types of classes might help break things up, as well as creating a more scannable product.
In Conclusion:
My interview with Jamie was amazing. I received lots of great feedback and hearing someone else's perspective on this app was much needed. Felt like a lot of great information came from this session.
​
At this point, I feel the short amount of time allocated for this step was not enough and more time is needed to have more interviews to gather users insights.
Factory X
Kaizen Karate & Self Defense
SECONDARY RESEARCH
Field Study
To get a new perspective on how might we solve this problem I looked through booking sites. Such as Sign-up Genius, Calendly and Google Calendar. They all had great tools, tips and tricks but not what could actually solve the problem I was working on.
Looked at inspiration on designer sites. This was to gain a broader understanding of a solution. Found a website https://simplybook.me/en/. SimplyBook.me is an online booking system for service based industries. They offer many options, booking website templates are their main feature. They're template options are build for the user to plug in their own information. The site was very easy to use, gathered quite of bit of knowledge about booking process.
​
Competitor Analysis
Looked at local martial art studios in the surrounding area. The most challenging part was gaining crucial information from competitors without a membership. With that said, being able to go through the whole booking process was unsuccessful. I was able to glance at three competitors. The classes at Kaizen Karate & Self Defense used a simple tab system. Easton Training Center proceeded with a filter icon to break down classes. Factory X has a menu drop down to simplify the group of classes.
Easton Training Center
HEURISTICS EVALUATION
Flexibility and Efficiency of Use
Accelerators, unseen by the novice user, may often speed up the interaction for expert users. Allow users to tailor frequent actions.
Issues: They have no shortcuts, every action seems to take a long time to get through.
Recommendation: Some kind of filter or sort menu would come in handy when selecting the classes you need. Instead of seeing them all. Being able to narrow down the list would be a time saver.
Help and Documentation
Even though it is better if the system can be used without documentation. It may be necessary to provide help and documentation. Concrete and direct.
Issues: While using this app there is no clear help features or any documentation for direction. While going through this app I did notice they have a red circle with an i in it above the reserve button for class. Thought this would be a help instead it gave me more info on the class.
Recommendation: Giving the user some sort of help menu for how to use this app would be great or a walkthrough at the initial stage. Also moving the red circle with an i in it to under the actual class or change the icon all together so users know what it is and what it’s for.
Aesthetic and Minimalist Design
Dialogs should not contain information which is irrelevant or rarely needed.
Issues: While booking a class it seems in the class description there is information that is duplicated and not needed. There is already a time frame next to the description, why do they need to repeat that time in the description block.
Recommendation: Giving the user one place for the time and the time frame of the class would be better use of space and the user retaining the information.
USER FLOW
Visualizing hierarchy of the site was implemented to create a user flow. By using the actual flow and creating ideal flow from the research information. This information was taken from the insights, observations, and quotes.
INFORMATIONAL ARCHITECTURE
By conducting a card sort this identified certain categories listings. Using the matrix from this card sort an information architecture of the app configured. A visual diagram of the top-level feature pages that appear in the navigation bar all the way to subpages that are reached through one of those top-level features.
LOW-FI
Creating low fidelity screens by taking all research conducted up to this point. I was able to work with a member from the WANDR team to revamp these low-fi screens.
BRANDING
Colors were used based on the companies original color format.
MID-FI
Mid-fi was created from the low-fi by implementing the branding colors and typeface. These were then used to create prototypes for usability testing.
1st Round
2nd Round
TESTING RESULTS
Conducted a few usability tests, which had great feedback. Users said the app was clear straight to the point. They liked how they could see their classes booked on the first screen. Completing a class booking was smooth and time efficient.
Still had some work to be done.
Alert menus were easy, but could use different verbiage. Verbiage on button could use some work for consistency. User also expressed certain places needed informational descriptions.
USABILITY TESTING
Worked with the WANDR team to come up with a script for the usability testing. Being sure to touch every issues/problem.
NEXT STEPS
First I would like to go back to the beginning of this challenge and get more user interviews. I feel 3 or more would give clearer expectations of how the user feels, needs and wants.
Do more user testing A/B testing and implement those findings into this design.
