Self-Defense Training Made Easy

JabMix is an iOS app that helps people find martial arts trainers and partners. It’s for anyone who does not want to commit to a gym, yet wants to learn self-defense.

My task was to create the overall user experience with flowcharts, personas, wireframes and prototypes. I also created the app branding, graphics and marketing materials that would compliment the user interface designs.

Architecture

Site architecture and layout was created to establish a sitemap of all the pages and their relationship with each other. This is a good way to see how your user will move through the app and interact with it. It’s also a good way to account of all the pages and stay organized.

Personas

Personas are fictitious users that are meant to represent your user-base. Although there is a target user, there is still a lot of diversity within that target market. I’ll create 3-4 personas to represent as closely as possible all of the target users. Personas are also useful down the line as reference points; for example, let’s say you’re deciding to add a feature. You could ask yourself: what would Cathy think about this feature or how would bill feel about the addition?

Wireframes

Wireframes were created as the most basic interface in order to start visualizing how the app would look. It was important to create lo-fi designs to see what changes were needed and what could be added. After a few iterations it was apparent which features and elements should stay and which should go.

Prototype

Once the wireframes were in place and approved, initial designs were created. I wanted these designs to represent the final product as close as possible in order to test them with actual users. Using Invision to create the prototype, I was able to simulate the look and feel of the app.

Style Guide

The style guide would dictate every detail of the design from color to typography and icons to buttons.

Final Designs

The final designs were ultimately created with the style guide as reference. It features a lighter interface as compared with the prototypes and a more sleek experience.

Branding

The clenched fist logo came from the word “jab” in JabMix. I gave it rounded corners with a light blue gradient and tilted the whole graphic -15 degrees.

Landing Page

The landing page was created to ultimately direct potential users to the App Store page where they’ll be able to download the app. It was important to exclude unnecessary social media links to keep the visitor’s attention and not drive prospects off the page. The prominent links had to be the App Store page.

It’s also effective in educating and informing potential users about Jabmix and its features.