let's work together

get in touch

let's work together

get in touch

summary

I was tasked with designing an app for Gracie Barra Brazilian Jiu-Jitsu Association, with over 800 schools on six continents. The app was focused on e-learning, as well as building an online community, that would break the physical barriers and connect all students in the Gracie Barra family. The app featured an experience that allowed students to learn, interact with each other, and receive support.

summary

I was tasked with designing an app for Gracie Barra Brazilian Jiu-Jitsu Association, with over 800 schools on six continents. The app was focused on e-learning, as well as building an online community, that would break the physical barriers and connect all students in the Gracie Barra family. The app featured an experience that allowed students to learn, interact with each other, and receive support.

problem

Gracie Barra is one of the greatest brands in the world of martial arts. They have a culture and long tradition of being one big family. Throughout the years, they enjoyed a great community among its members. But as digital technologies became widespread, Gracie Barra needed to evolve as well. My goal was to build a digital community of practice, focused on learning and building relationships. There was an existing website for the brand that included digital content but lacked the needed community features.

target audience

For the persona, I focused on prospective students that want to learn the art of Jiu-Jitsu, but also want to find a community that they can belong to.

target audience

For the persona, I focused on prospective students that want to learn the art of Jiu-Jitsu, but also want to find a community that they can belong to.

student sean

Sean is a Brazilian jiu-jitsu student. He wants to lose weight, get into better shape, and get better at jiu-jitsu. To keep growing and feel motivated, he needs a community in which he can fit. He also wants to work on his craft, even when he is away from the school, while traveling.

process

For this project, my process was heavily driven by constructing user journeys. I had requirements to target certain use cases, while also designing a coherent and holistically sound experience. Building the prototype included a few iterations of prototypes, gradually moving from sketches to high-fidelity designs. I did use some basic existing brand guidelines, which I had to adapt for a mobile experience.

final design
final design
sketches

competitor analysis

user journeys

Mid-fi prototype
personas

branding

competitor analysis

Mid-fi prototype

branding

final design

Competitor analysis

user journeys

mid-fi prototype

personas

branding

sketches

typography

For typography, we wanted to go for something simple and legible. Focus was put on letting the pictures and video shine visually, with the font taking a bit of a back seat and just working very well for effective reading and overall clean design.

colors

The colors came from the existing brand guidelines. As I was interpreting the brand, I went for a fairly conservative use of color, due to the very strong colors visible in the brand. I wanted a clean design that does not overwhelm users.

news feed

A big part of the design for the community was the news feed. In this space, instructors and school staff could share posts and share relevant news. This allowed Gracie to keep its students engaged and informed of any thing that is happening at the school.

library

The library feature was added to make remote learning possible. Through the video content, students could consume content and learn, while on the go.

community

To further connect the students and Gracie, the community tab was introduced. Here, students can ask questions and learn from each other, and as well as the instructors. The group feature further helped focus discussions into separate topics.

schedule

The relevant Gracie events for a student are shown on the schedule page. This helps students remember their events and keep in touch with their schedule.

summary

I was tasked with designing an app for Gracie Barra Brazilian Jiu-Jitsu Association, with over 800 schools on six continents. The app was focused on e-learning, as well as building an online community, that would break the physical barriers and connect all students in the Gracie Barra family. The app featured an experience that allowed students to learn, interact with each other, and receive support.

problem

Gracie Barra is one of the greatest brands in the world of martial arts. They have a culture and long tradition of being one big family. Throughout the years, they enjoyed a great community among its members. But as digital technologies became widespread, Gracie Barra needed to evolve as well. My goal was to build a digital community of practice, focused on learning and building relationships. There was an existing website for the brand that included digital content but lacked the needed community features.

target audience

For the persona, I focused on prospective students that want to learn the art of Jiu-Jitsu, but also want to find a community that they can belong to.

student sean

Sean is a Brazilian jiu-jitsu student. He wants to lose weight, get into better shape, and get better at jiu-jitsu. To keep growing and feel motivated, he needs a community in which he can fit. He also wants to work on his craft, even when he is away from the school, while traveling.

process

For this project, my process was heavily driven by constructing user journeys. I had requirements to target certain use cases, while also designing a coherent and holistically sound experience. Building the prototype included a few iterations of prototypes, gradually moving from sketches to high-fidelity designs. I did use some basic existing brand guidelines, which I had to adapt for a mobile experience.

final design
sketches

competitor analysis

user journeys

Mid-fi prototype
personas

branding

competitor analysis

Mid-fi prototype

branding

final design

Competitor analysis

user journeys

mid-fi prototype

personas

branding

sketches

typography

For typography, we wanted to go for something simple and legible. Focus was put on letting the pictures and video shine visually, with the font taking a bit of a back seat and just working very well for effective reading and overall clean design.

colors

The colors came from the existing brand guidelines. As I was interpreting the brand, I went for a fairly conservative use of color, due to the very strong colors visible in the brand. I wanted a clean design that does not overwhelm users.

news feed

A big part of the design for the community was the news feed. In this space, instructors and school staff could share posts and share relevant news. This allowed Gracie to keep its students engaged and informed of any thing that is happening at the school.

library

The library feature was added to make remote learning possible. Through the video content, students could consume content and learn, while on the go.

community

To further connect the students and Gracie, the community tab was introduced. Here, students can ask questions and learn from each other, and as well as the instructors. The group feature further helped focus discussions into separate topics.

schedule

The relevant Gracie events for a student are shown on the schedule page. This helps students remember their events and keep in touch with their schedule.

summary

I was tasked with designing an app for Gracie Barra Brazilian Jiu-Jitsu Association, with over 800 schools on six continents. The app was focused on e-learning, as well as building an online community, that would break the physical barriers and connect all students in the Gracie Barra family. The app featured an experience that allowed students to learn, interact with each other, and receive support.

problem

Gracie Barra is one of the greatest brands in the world of martial arts. They have a culture and long tradition of being one big family. Throughout the years, they enjoyed a great community among its members. But as digital technologies became widespread, Gracie Barra needed to evolve as well. My goal was to build a digital community of practice, focused on learning and building relationships. There was an existing website for the brand that included digital content but lacked the needed community features.

target audience

For the persona, I focused on prospective students that want to learn the art of Jiu-Jitsu, but also want to find a community that they can belong to.

STIDENT SEAN

Sean is a Brazilian jiu-jitsu student. He wants to lose weight, get into better shape, and get better at jiu-jitsu. To keep growing and feel motivated, he needs a community in which he can fit. He also wants to work on his craft, even when he is away from the school, while traveling.

process

For this project, my process was heavily driven by constructing user journeys. I had requirements to target certain use cases, while also designing a coherent and holistically sound experience. Building the prototype included a few iterations of prototypes, gradually moving from sketches to high-fidelity designs. I did use some basic existing brand guidelines, which I had to adapt for a mobile experience.

final design
sketches

competitor analysis

user journeys

Mid-fi prototype
personas

branding

competitor analysis

Mid-fi prototype

branding

final design

Competitor analysis

user journeys

mid-fi prototype

personas

branding

sketches

typography

For typography, we wanted to go for something simple and legible. Focus was put on letting the pictures and video shine visually, with the font taking a bit of a back seat and just working very well for effective reading and overall clean design.

colors

The colors came from the existing brand guidelines. As I was interpreting the brand, I went for a fairly conservative use of color, due to the very strong colors visible in the brand. I wanted a clean design that does not overwhelm users.

news feed

A big part of the design for the community was the news feed. In this space, instructors and school staff could share posts and share relevant news. This allowed Gracie to keep its students engaged and informed of any thing that is happening at the school.

library

The library feature was added to make remote learning possible. Through the video content, students could consume content and learn, while on the go.

community

To further connect the students and Gracie, the community tab was introduced. Here, students can ask questions and learn from each other, and as well as the instructors. The group feature further helped focus discussions into separate topics.

schedule

The relevant Gracie events for a student are shown on the schedule page. This helps students remember their events and keep in touch with their schedule.

gracie barra

DATE

Aug 2019 - Sep 2019

Role

UI/UX Designer

gracie barra

DATE

Aug 2019 - Sep 2019

Role

UI/UX Designer

gracie barra

DATE

Aug 2019 - Sep 2019

Role

UI/UX Designer

gracie barra

DATE

Aug 2019 - Sep 2019

Role

UI/UX Designer