Karate Kai

Mobile Application
Project Overview
Karate Kai is a Karate school academy located in the suburban area of British Columbia. Karate Kai wants a platform where busy parents and students (new and old) can accessibly, quickly and easily shop for good quality, long lasting and inexpensive karate attire for their karate lessons.

‍Project goal: Create a mobile shopping app that allows returning students and new users to shop for Karate attire for their Karate classes at Karate Kai.
My Contributions
My role: UX designer designing a shopping app for Karate Kai from conception to delivery.
‍
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Research Summary
I conducted interviews and created empathy maps to understand the users I'm designing for and their needs. A primary group identified through research was busy parents who don’t have time to shop online.

This user group confirmed initial assumptions about Karate Kai’s customers, but research also revealed that time was not the only factor limiting users from shopping online. Other user problems included not wanting to shop through mobile because most are comfortable shopping at a in person retail store because they have more control in selecting a product they desire. However factors such as reliability, security, variety and having brands they recognize would make users open to shopping through mobile.




Pain points




Personas
Wireframes
Taking the time to draft each screen of the app on paper ensured that elements that made it to digital wireframing would be well-suited to address user pain points. Throughout the wireframes I added different Icons to help users with disabilities such as change language and screen reader. I also Ideated different layouts to find which would be the most easy to use, easy to understand, secure and fastest way to shop in the mobile app.

‍
As the initial design phase continued, I made sure to base screen designs on feedback and findings from research.
‍
Easy navigation was a key user need to address in the designs in addition to providing easy access to key information on the products being sold.

The low-fidelity prototype connected the primary user flow of selecting an item and purchasing the item, so the prototype could be used in a usability study with users.  
‍Visit the Prototype here.


Usability Study Findings
After the usability study I added headings, product names, price, ratings and pictures so users can better identify what they are buying.

In my usability study, navigation was a reoccurring issue. To fix this I added cues for scrolling so users can better identify how to see other products. These features were added for all screens as well as animations requested.

The High-fidelity prototype presented cleaner and better navigation and user flows for purchasing an item.
‍Visit the Prototype here.
Mockups


Takeaways

Impact: The app made users feel like Karate Kai really thinks about how to meet their needs.

One quote from peer feedback: "Overall the experience was very user friendly, I believe that people of all ages with some relative technology background would be able to use this and make it work." - Participant 5/5

What I learned: While designing the Karate Kai app, I learned the first Ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the design.

Mockups, Wireframes and Prototypes made with Figma.

View Case Study
Powered by Webflow
LinkedIN