Brazilian Jiujitsu (BJJ) is a martial art that evolved from Japanese judo. It focuses on ground fighting and submissions, distinguishing it from other martial arts. Introduced initially by Mitsuyo Maeda in the early 20th century and adapted by Brazilians into a submission wrestling art form, BJJ has become a global phenomenon, especially among adults in the U.S. BJJ practitioners are very dedicated and passionate about their sport, creating a high demand for instructional content outside the gym. This is where instructional platforms and apps come in, meeting their demand for instruction to get a competitive edge in the gym and in competitions.

Realizing the potential impact of a redesign, we transitioned from a casual project to a professional engagement, complete with research, concepts, and design. To kick off our project we started with a whiteboard session that revealed the platform’s issues and goals, setting a clear direction for the project.

During client intake sessions, we identified that 95% of users were CTA gym members, many of whom churned after belt tests. Our goals were to retain users post-test and elevate the app to match the brand’s high standards. Additionally, we aimed to increase sign-ups with in-app purchases for subscriptions and premium content.

The market has a lot of competitors from cross-brand general jiujitsu platforms to other BJJ affiliations with their own platforms. Luckily for Caio Terra Online, the competition will be easy to defeat in app design, and provide another way for them to stand out among the competition.

When we kicked off our project, I knew the first thing I wanted to do was talk to the users. I approached them and asked them all the same questions, what they used the platform for, what they liked, didn’t like, and what they would change. A few interesting insights came up.

The theme we kept discussing was that of user engagement and interest, and it seems their attention span gets shorter all the time. If we are to keep users engaged after they accomplish their goal of a belt promotion, we need to continue to provide value to them beyond studying for the test. Our goal is to share the love of jiujitsu, not just provide a study guide for a belt test. When discussing these ideas, the client and I discussed how entertainment apps like Netflix and YouTube keep their audience engaged with constantly refreshing their home feed. Based on our discussion about engaging users we came up with some general ideas in our session:

User Pain Point #1: Don’t know where to start:
Solution: Let’s have an infinite scrolling home feed to take away user indecision and just show them content.

User Pain Point #2: Need help studying for belt test
Solution: Prioritize favoriting videos and sorting by curriculum to help those studying for belt tests.

User Pain Point #3: Can’t find hidden gems in the huge list of videos
Solution: Feature some videos so that we surface hidden gems and provide context for those who need more guidance.

Next I dove into a creative phase with the client to align the app with the brand image. This is important because the client views design as very important to the brand image. This is shown through their logo design and photography. Their brand style features sleek, minimal, and dark or imagery with stark black and whites. Their audience is mostly male, competitive, and many are involved in high tech businesses.

This is a great way to get a sense of their desired taste for aesthetic direction and alignment with the brand’s goals. As they do not have any official brand guidelines, the potential is pretty wide open. So it was important to get some feedback here so they can skip ahead to preview what type of style the app would be. This way, I can make sure that what we make is to their liking and aligning with their brand message.

While sharing mood boards of visuals, Caio joked about gold. Actually gold makes sense in this context because as a single spot color, yellow looks great on a dark palette. Secondly, which is perhaps more obvious, is that gold is the color of the gold medal. It makes perfect sense to use gold as a spot color on a dark palette which matches the mood of a lot of their minimalistic and dark photography. Based on the feedback, the client liked the darker palette with the gold, even though it started as a joke, it hit a lot of the points we had been talking about. So I went back and worked on these until they were ready for prototyping.

Based on the visual research and feedback, I made 3 competing prototypes that featured different visual styles. One of course uses the gold Caio mentioned but 2 also used styles that Caio also liked. Each one utilized the primary concepts in the concept phase of content suggestions and featured videos, but with a different interaction pattern and visual style.

Based on the visual research and feedback, I made 4 competing prototypes that featured different visual styles. One of course uses the gold Caio mentioned but the other 3 also used styles that Caio also liked. Each one utilized the primary concepts in the concept phase of content suggestions and featured videos, but with a different interaction pattern and visual style.Now that I had the prototype done I could show it to a few people. Here is the feedback I received.

After we showed our prototype and got feedback we wre ready to do detailed design. You can see in the mocks here we cleaned up the pages and focused on the content-first approach shown in concept #4. In the second mock we added curriculum to the top of the page so there is no possible confusion, and it is also in the home feed. Third, the left hand navigation is extremely simple and places Favorites, an oft requested feature, at the fore. Previously users had to look for favorites in their My Account page. Now it is surfaced up to the top. Additionally users can purchase premium content.

When it came to detailed design after the initial concept was made, everything fell into place easily. I outlined the app architecture with a home screen and screens that revolved around that home screen feed, such as the category dropdown list and the full video list view. If users tap on a section title on the home screen they can see all the videos in that category. This removes a lot of the guesswork and friction users had about needing to understand what something is in order to search for it by showing them thumbnails titles and descriptions of lesson plans in the category

Next I created user flows to help communicate the ideas of this app with developers. By including all these deliverables, they would not need to rely on me as much to understand the design. Using typography and element hierarchy I direct the users eye in order down the page. I also sparingly use the yellow spot color for important actions and call-outs like featured videos. Last but not least, the way that the navigation opens is critical to maintaining the illusion of screens floating above the surface, as intended in the design. You can see how every close button is directly over the navigation button. The reason for that is because you don’t have to move your finger at all to close it, you simply tap the same place twice.

Forecast sales of memberships by app channels to increase 20% YOY from web alone.
Increase user retention, increasing overall member volume 10%.
Improve brand perception of CTA as top jiujitsu brandIncrease user satisfaction rating.

Working on this app was an amazing experience to design for a sport and martial art I participated in for so long. I was glad to be able to address some of the pain points of the CTA users as well as elevate the brand image of the company through design. As it stands, they are poised to develop an excellent product that will set them apart in the market.