Caio Terra Academy – Web
Introduction
Following A Successful App Project, A Web Refresh
In mid-2024 when we had completed the design for the app, the company owner for Caio Terra Academy wanted a redesign for the website as well. Basically he was not happy with the dated look of the site and being happy with the app redesign, he wanted a new website refresh to match. Similar to before this started off with a visual refresh request but we would include some sales and usability improvements in order to hopefully increase conversions and retention as well.
The Problem
The Old Website Did Not Preview Premium Content
When reviewing the website to be designed, I noticed that it lacked a preview of the high quality video content. As a consequence, potential subscribers may not be aware of the quality of the video, thinking the website was an indicator of the video quality. In fact the video was beautifully shot in high definition with good editing, music, and voice over narration. In the world of BJJ instructional videos, it is easily one of the best if not the best for the actual quality of cinematography and editing for the reasons mentioned. The problem is that the website did not readily show this. Instead, it explained the website using text and images, a traditional approach.
Old Checkout Experience May Feel Untrustworthy
Our happy path would be for new users to complete sign up and subscription payment. But the old website used a custom UI that may steer users off the path if they did not trust the payment processing. While perhaps an edge case, we wanted to ensure trustworthiness throughout the whole experience.
The Dashboard Lacked Discoverability
The dashboard only shows videos of a selected category, or it shows all the videos ever uploaded chronologically. A better approach would be to show a set of videos from each category without necessarily requiring filtering. As it is, a user cannot scroll very far before getting to the end because of this approach. We imagined that this would put the onus on the user to know what to search for, which is a shame given that there are thousands of videos. A better approach would be to allow them to simply scroll through categories of videos and expand the category if they want to view more.
The Process
Expanding the Styleguide to a Web and App Design System
Once the app redesign was finished we had a basic styleguide and design system. There was a general look and feel with main colors, vibe, and attitude of the design as exemplified in the colors, typography, use of photography, and so on. Because this brand style was established it was much easier to then create a website than it was the app. With the app we had to establish what kind of brand style the company wanted, but now that had already been established it was much easier to get to work building the website.
Planning Marketing and Dashboard With Wireframes
As soon as I got started I wireframed out the desktop, mobile, marketing, and dashboard. I reviewed these with the company owner while also pitching some general top level landing page concepts. In theory visual design comes after wireframing but in practice concepts come all at once so we reviewed both web visual concepts and interaction design in wireframes at the same time.
The Solution
Video Focused Landing Page Would Allow Users To Quickly Ascertain the High Quality of the Content.
For the marketing page landing site we hypothesized that seeing a preview of the video right away was the best selling point to get users to want to sign up. Because previously they had to make guesses based on just text and images, now they could see their latest content instead. There was really no better selling point than showing video samples because of how good the video is. While an outsider to jiujitsu may not understand the importance of seeing professor Caio Terra in video, someone familiar with the space would be able to quickly see the quality of the content by watching his careful movements in video.
The Sign Up Process Was Improved With More Clear Tier Designs and Checkout
Previously the website had hidden and unclear suscription tiers. Some users may not even be aware that there were 3 tiers, bronze silver and gold. With the new design we wanted to elevate the design of the tiers by allowing users several opportunities to view these plan cards and select the one they want. Additionally we made the CTA more prominent for the suggested silver plan, which is an annual subscription with a discount for annual payment.
Because the old website had a custom UI for checkout, we feared that some skeptical users may drop off here. So in the redesign, we decided to go with a Stripe checkout UI as most people in the US have used Stripe at some point and that was already our payment processor. There would be no additional fees since we were already using Stripe, and we could leverage their familiar and trustworthy UI to push any lingering users over the edge and finish checkout.
Improved Content Discovery With New Dashboard
Previously, the dashboard only showed videos chronologically or by category once filtered. Now, users could see a selection of videos from each category and click to expand. We hypothesized that this would improve user satisfaction by allowing them to more easily discover content without needing to know what categories or terms to search for.
Impact
The New Website Design Would More Easily Convert Visitors and Retain Subscribers.
By implementing a more convincing landing page that features video, clear tiers, and a trustworthy sign up page, as well as a preview of the dashboard and user testimonials, we hope that this new website would convert a higher percentage of visitors.
For the subscribers, implementing better content discovery through showing groups of videos for each category we hoped would allow users to view interesting content that they would not have found otherwise. Previously they would have had to know what terms or categories to filter for, and probably they just would not view the videos at all. Now, we hoped that a greater percentage of our users would be more aware of the different kinds of content and thus want to stick around longer.