Lee Beckwith
Armlocks and Helvetica: How We Used Design to Win in the Jiujitsu App Market
User Research
Ideation
Wireframing
Visual Design
Interaction Design
User Flows
Prototyping
Testing
Being involved in jiujitsu for some time, I had a personal connection with the Caio Terra Academy. In January, the academy owner expressed dissatisfaction with their new app and jokingly asked me to redesign it, knowing I’m a designer. With some time over the weekend, I created some fun exploratory mocks as part of my daily UI practice. What started off as practice then evolved into a full professional project.
The offending app which prompted a design request.
Screenshot taken from Apple App Store in January, 2024.
So what is BJJ and what does it have to do with apps?
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.
Jiujitsu is a competitive sport which inspires a lot of dedication from its practitioners. Image credit © John Lamonica / Wikipedia.
Professor Caio Terra, 12x world champion, teaches his students.
Image credit: Caio Terra Association
From friendly challenge to professional project
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.
Client Objective: Retain users after promotion and build the best jiujitsu brand in the world.
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.
During intake, the client and I outline who the users are and what their goals are.
“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.”
– Client insight
Goals include improving brand perception and increasing user retention.
These are the insights I outlined with the client during our intake whiteboarding sessions.
Opportunity: the BJJ app competition is relatively low in standards for design.
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.
I did a survey of the top BJJ apps.
A few examples show that the level of design in BJJ apps is not that high, which can be an opportunity for us.
A few examples show that the level of design in BJJ apps is not that high, which can be an opportunity for us.
Similarly, basic design critiques can apply to the old Caio Terra App.
Similarly, basic design critiques can apply to the old Caio Terra App.
User interviews: Let’s talk to some users!
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.
My user interviews were conducted in a gym much like this one. Image credit: Kenny Kim BJJ
Brainstorming creative solutions
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:
Concept sketches were created in response to the input received.
“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.
The concepts we brainstormed were created in direct response to user needs.
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 we wireframed concepts from the whiteboard and paper sketches.
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.
Sample from wireframes
The wireframes were tested for early feedback
Concepts that made it
  • Scrolling home feed
  • Favoriting
  • Featured videos
  • Sign up for subscription
Concepts that were removed
  • Two tiered navigation
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
Time for visual design!
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.
Moodboards sample
Review moodboards with client to align on visual style
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
Actually gold can work well as a highlight color.
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.
Back to design: Making competing designs & prototypes
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.
4 different concepts addressing style and interaction.
“Users preferred the interaction model most familiar to them (#4) that focused on content and titles.”
– User testing feedback insight
Prototype Testing & Feedback
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.
3 different navigation ideas.
“Users expressed need to clearly see curriculum so they can study for the test. Position alone is not enough.”
– User testing feedback insight
Navigation options
Refinement after testing
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.
Final concept, after testing.
New User Experience: Onboarding, Account Creation, and Plan Selection
Two of the central screens are explained in hierarchy here.
Two typical user flows: onboarding and regular use.
Detailed Design: Explaining Structure
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
Materials for developer handoff & communication
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.
Before and after.
Before and after.
Success Metrics
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.
Conclusion
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.
Let's talk!