Lee Beckwith Portfolio
ProjectsResumeContact
Lee Beckwith
Home
Resume
Linkedin
Dribbble
Contact
Caio Terra Online Website Refresh to Improve Retention & Brand Perception
Wireframing
Visual Design
I/A
Visual Design
Interaction Design
Prototyping
Responsive Design
After we had designed the app, there was a need to bring up the visual image of the website. Since I had already created a color and typography system for the app it was easy to take that work and apply it to a visual refresh of the website. The purpose of redesigning the website are the same as the app. To improve brand perception of the CT brand, to improve user retention from subscribed members, and to improve visitor sign-ups.
Some of the goals of a design refresh are:
  • Eliminating negative bias around associating old design with low quality
  • Showing more samples of the videos, which are extremely high quality. Currently the website does not provide any video samples, and you would be surprised by how good the videos are based on the old, simple website, which gives no indication as to what the videos are like.
  • Making the visual style match the app, which is on brand for minimalist, dark, and tech-forward.
  • Improving brand perception with a visual refresh, placing the jiujitsu brand at the front of the pack in perception of quality.
  • Improving user retention and user satisfaction with a better dashboard UI. Improvements like account management and video categories are added to make the site easier to use for subscribers.
  • Increase conversions of website visitors by having a more persuasive marketing page.
The site to be redesigned.
Screenshot taken from caioterra.com June 2024.
The dated website design fails to demonstrate what the user gets out of this site by focusing too much on introducing Caio and not enough on showing content.
The new design solution will focus on showing previews of content and summarize information about Caio and the platform in a quick and fun way.
Features of new design solution
The first thing new users will notice is the entire landing page is taken up by a high quality instructional video snippit. This looping video take inspiration from apps that the users will be exposed to such as TikTok and YouTube Shorts. This looping video shows professor Caio’s smooth, technical movements, and methodical and precise demonstration method. It also features their background music which is attractive and melodic but not overwhelming. This is the most important feature of the new website, which shows how high quality the video content is. Just viewing the video in the landing page should do a great deal to persuade the visitor.
The new website focuses on showing the user the value they would gain with a subscription. The first thing they see is an auto-playing footage of Caio demonstrating a technique, which for a BJJ practitioner is extremely compelling, due to the high level of his ability.
The new about Caio section sums up quickly that he is a 12 time world champion and has produced other champions with his teaching, the two main points.
We answer the user’s question “what’s in it for me?” Each point is made by scrolling the image carousel and can be skipped for brevity.
We summarize the various points about the platform here plus a choose plan CTA right below it.
Previewing the dashboard can be an attractive selling point to take away the mystery and hesitation about purchasing.
Social proof was an important missed opportunity in the old version. Here, you can hear from other students.
Pricing information made more accessible and clear. Attractive plan information is available just by scrolling down and is not hidden. Also it is accessible tapping “get started”.
The checkout experience was brought to a more standard modern experience that users are already likely familiar with.
Various opportunities are taken to show video samples so as to demonstrate value to either sell a new customer or remind an existing customer of the good content inside. Create account and Sign in screens are modernized and include social log in options.
Mobile version of marketing site
The new dashboard will extend the design system used on the app and marketing site to make it a modern and seamless experience.
Dashboard Design
The first thing new users will notice is the entire landing page is taken up by a high quality instructional video snippit. This looping video take inspiration from apps that the users will be exposed to such as TikTok and YouTube Shorts. This looping video shows professor Caio’s smooth, technical movements, and methodical and precise demonstration method. It also features their background music which is attractive and melodic but not overwhelming. This is the most important feature of the new website, which shows how high quality the video content is. Just viewing the video in the landing page should do a great deal to persuade the visitor.
The new dashboard focuses on serving content right away without having to filter first, which would necessitate the user knowing ahead of time what to look for, or just guess. The sections are also organized by position, so users can clearly see what is being taught in each section without having to sort through filters.
The new dashboard focuses on serving content right away without having to filter first, which would necessitate the user knowing ahead of time what to look for, or just guess. The sections are also organized by position, so users can clearly see what is being taught in each section without having to sort through filters.
My Favorites. The favorites text list is replaced by a proper grid of video thumbnails and titles.
News. Another requested feature, adding a blog section to post important announcements.
My Account page. Easy account management was a requested feature and included in the top level of the profile page.
Store for both signed in and signed out users. Attractive store page makes viewing products and checking out easier and more persuasive.
Additional flexibility is given for light mode, dark mode, and mobile web.
Light mode
Mobile dashboard - light mode.
Mobile dashboard - dark mode.
Estimated impact
The new website design will increase brand perception by modernizing the design language and making the content more easily accessible. It will also increase user satisfaction for current members, thereby increasing user retention. Due to increased spread, brand image, and retention, the overall market dominance of the CTA brand will increase with the redesign. It will set itself apart as a market leader with a clearly superior website compared to the competition. It will also increase revenue as more visits are converted to subscribers, and it will continue to retain existing members more easily.
Click on the link to email me
Copyright 2024 Lee Beckwith
Lee Beckwith
Home Page
Projects
Links
Resume
Linkedin
Behance
Dribbble
Twitter / X
Contact
Email Me