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.
“A large percentage of students sign up right before belt test periods to prepare for the test, and then cancel their subscription after the test is over.”
These are the insights I outlined with the client during our intake whiteboarding sessions.
- Because Caio Terra uses testing for student belt promotions, and because the material on the test is not only taught in class but also on the website, many gym students utilize the website subscription to help prepare for the test. However, many cancel the subscription after the test is over, and we would like to interest them in continuing.
- The current app's poor design fails to showcase its high-quality video content, deterring potential subscribers. Someone investigating BJJ apps may not understand from the way the app is presented how much great content is inside.
- One of the most important factors in the redesign was to bring the level of the app up to the standards for the brand’s image. Our client wants to be the best brand in jiujitsu, and this app is part of that desire.
- We aimed to boost revenue by adding in-app purchases for monthly subscriptions and premium content. By including app subscribers, we can add to the total number of subscribed members.
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.
“This older content is so good but it’s buried behind like 12 pages.”
Someone mentioned it’s hard to find interesting older content since it gets buried as the feed is arrange chronologically by recent only. - maybe there’s a way to surface good content regardless of recency?
“Ok so there’s all these great techniques, but how do I know which one to do?”
Lack of context was mentioned, as in how to apply a greater overall understanding of the goals of jiujitsu. This is more of an instructional design than UI design feedback, and would require changes to the curriculum but perhaps there are other ways of addressing this need.
“Favorites help me study but I can’t favorite lesson plans!”
More than once favorites was mentioned. It was not possible to favorite a lesson plan currently and that change was requested. Also they mentioned using their favorite list to help assist in preparing for belt tests, the main concern of many subscribers.
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:
“Feature some videos so that we surface hidden gems and provide context for those who need more guidance.”
– Concept in response to user needs #1 and #3.
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.
Wireframe concept 1: Scrolling home feed
- Addresses user pain point: don’t know where to start, can’t find hidden gems
- Addresses business goal: retain users interest beyond belt testing
- Addresses business goal: modernize app design to elevate brand image
Wirefame concept 2: favoriting videos, lessons, and reviewing favorites
- Addresses user pain point: want a way to favorite a lesson plan not just individual videos
- Addresses user pain point: wish the favorite screen wasn’t just text links and wasn’t so hidden in the IA.
- Addresses business goal: Improve user satisfaction by making desired features for studying more accessible and informative by including thumbnails not just text.
Wireframe concept 3: Featured videos
- Addresses user pain point: need context, don’t know where to start
- Addresses user pain point: can’t find interesting content if it’s not recent
- Addresses business goal: retain user interest beyond belt testing
- Addresses business goal: demonstrate value of platform that may be missed by current website.
Concepts that made it
- Scrolling home feed
- Favoriting
- Featured videos
- Sign up for subscription
Concepts that were removed
How we changed for feedback and constraints
- Made category dropdown match the backend infrastructure of website so it does not need a separate backend
- Feature curriculum at the top
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.
“Let’s put gold and dragons and sparkles in it”
– Caio joking during review
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.
“Users preferred the interaction model most familiar to them (#4) that focused on content and titles.”
– User testing feedback insight
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.
- First of all it was well received, Caio thought it was already a finished product because it was so convincing.
- Showed multiple prototype concepts. Users and clients preferred featured video prototype for simplicity and following norms they’re familiar with already.
- They liked the last one prototype #4 because it was the most familiar in interaction design to them and most clearly focused on content and titles.
“Users expressed need to clearly see curriculum so they can study for the test. Position alone is not enough.”
– User testing feedback insight
- Users expressed need to clearly see curriculum so they can study for the test. Position alone is not enough.
- Users requested showing the curriculum of the week, but the client declined, saying that there are many different gyms and they all have different weekly schedules.One option is to give them an idea to save for the future where the user’s location changes what curriculum of the week they see.
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.