The Porrada BJJ app is designed to enhance a fighters training regime by providing easy access to review techniques and movements.

Type  Product Design - iOS app

Role  UX / UI Design

Duration  April 2019 - May 2019

Tools

 

1.0

DEFINE

1.0  DEFINE

The Problem

Brazilian Jiu-Jitsu is full of complicated techniques that are hard to remember during down time or between training sessions.

The Objective

We aimed to tackle this problem by creating a tool that would augment the training process for BJJ practitioners.  Specifically providing them with professionally instructed detailed video tutorials focused on reviewing individual techniques.

How might we help Brazilian Jiu -Jitsu practitioners remember techniques in-between training sessions?

Create a direct and visually engaging platform

Tailor to the specific needs of BJJ practitioners

Allow users to easily access and view techniques

2.0  RESEARCH

It is very important to understand the needs and wants of our target demographic. We started our research interviewing the main stakeholders..  Then we moved on to interviews and surveys of current Brazilian Jiu-Jitsu practitioners and instructors.

85% of people interviewed expressed an interest in having a supplemental source of training on top of their in-class sessions. 

Expert Interviews

To get things started we interviewed the main stakeholder gaining product insights that allowed us to dive deeper into the problem and ask better questions.

User Surveys

From this research we confirmed our target market, discovered their motivations, pain points and created our user persona.

Competitors & Inspiration

Searching for inspiration we noted down the specific features, styles and technologies that we believed would benefit our design.

Once the interviews and surveys were completed, the data was used as a guide for how the product would be designed in order to satisfy the needs and desires of our users.
The insights gathered are the following:

Motivations

Why do you practice Brazilian Jiu -Jitsu?

Challenge my mind and body

Release aggression/stress 

Pain Points

Are there difficulties you have with training?

Find it difficult to remember all the moves learned in class.

Techniques are forgotten during down time caused by injuries etc...

The Journey

Our users journey would consist of three main stages: Determine technique of Interest, review technique, and save technique for later review. 

1. Arrive home having missed training

2. Open the PBJJ App

3. Search techniques

4. Review technique

5. Save technique

6. All Done!

"As a BJJ practitioner I want to be able to review techniques during my down time so that I can be at the top of my game."

3.0  DESIGN

One of the main design challenges was figuring out the most meaningful organizational logic for dividing the many fighting techniques and their respective sub-techniques.

Sketches & Wireframes

4.0  TEST

The next challenge was figuring out if our design actually achieved what was intended.  We set out to test and make adjustments to our wireframes before proceeding to create Hi-Fi mockups.

Goal

To observe if the app assists the user in finding the desired fighting technique

Task

You are looking to review a technique you learned at the gym. Enter the app and find the Reverse DLR move video.

Feedback

Straight forward process 

Easy to find tasks

Some buttons that repeated made the user a bit confused

5.0  PROTOTYPE

Now that we confirmed what works, we moved on to producing Hi-Fi mock-ups and creating a Minimum Viable Product.

The Splash screens represent an introduction into what the app does.  It needs to gain the attention of the user and draw them into the onboarding process.

Splash Screens

Onboarding

Our onboarding asks specific questions in order to build a path specific for that user.

To define the onboarding questions, we interviewed stakeholders and BJJ practitioners.  It was important to create a personal experience and lead them to a brand connection & personalized content throughout the app. 

Techniques

Via our research, we identified each parent fighting technique and their sub-techniques.   Each user views different techniques based on their skill and other onboarding preferences.

Each sub-technique features video tutorials highlighting the key elements of each move.

Mood & Colours

Our colours and visual design elements established the branding and identity creating the right mood for the user.  Poradda Brazilian Jiu-Jitsu is all about strength, peace and discipline.  The mood and branding needed to reflect this spirit. From the imagery and colours to the shapes and fonts, we developed the project to be in line with the core elements that make this discipline what it is.

Starting from an idea, we researched, sketched and designed a mobile app that would tackle the underlying issue; enhancing a fighters training by providing them with a resource for reviewing and practicing their techniques.   Specific design elements, colours and imagery all came together to create an experience the user would want to return to over and over again.