Screenshot of the IBJJA home page

IBJJA Website Redesign-2019

RyanWebsite Design

Screen capture of old IBJJA Web Design
Screen capture of new IBJJA Web Design

Indiana Brazilian Jiu-Jitsu Academy is a premiere martial arts academy in Indianapolis, Indiana. I redesigned this website to be mobile responsive, and to create more user-friendly experience.

For the redesign, I used Themeco's X Theme in Wordpress. I created the website to have a clean and organized look and feel, consistant with the Academy's branding scheme. I optimized the images and content from the original webpage to enhance SEO ranking, and I used JavaScript Lightboxes to make the media easily accessible.

My job here was not just to redesign the website, but also to restructure the content to help visitors understand the programs and the benefits with little to no prior knowledge.

I started training at IBJJA in 2010, and I started teaching introductory classes in 2019. So in this case I happen to have a good understanding of the company, the people, and their product. I also understand the perspective of potential students, typical objections and how intimidating Jiu-Jitsu can seem.

Although content generation is not one of my strengths, I found this process to be fascinating. How can I accurately portray this company while carefully building context on an obscure martial arts practice?

Here are some notes from my design process.

Old Design Problems:

1) Lack of brand consistency

IBJJA's primary brand elements can be seen in the old website's banner (fonts, graphics, colors), but was absent everywhere else in the website. The navigation bar didn't even have the company logo, just generic text.

2) Unclear content structure

At a glance it was difficult to determine exactly what this website is. The website was tedious to scan due to large blocks of text and a lack of visual cues.

3) Not mobile friendly
4) Design issues:
  • Inconsistent use of color
  • Large blocks of centered text
  • Inconsistent spacing, overlapping sections
  • Poorly designed contact form

Website Redesign Goals:

1) Drive more conversions:

The primary call to action is a contact form which registers the user for a free trial program. However, starting martial arts can be intimidating for most people. To drive conversions, I needed to help the audience see the family friendly environment of the academy, help them understand what the martial arts programs are all about, and how they can personally benefit. I also carefully outline exactly what they can expect in their free trial.

2) Improve user experience:
  • Carefully build context
    Brazilian Jiu-Jitsu is the main practice of this academy, and most first-time visitors will probably not understand what Brazilian Jiu-Jitsu is or why it's effective. I felt it was important to build context by first establishing the organization as a world-class martial arts academy, and then to carefully define the martial arts and training programs they teach.
  • Make content light and scannable
    Most people consume web content by scanning. We quickly scan a website to see if it contains what we are seeking. If it seems like we may not be in the right place, we click "back" and move along. To combat this, I first introduce the website with an interactive banner and two short paragraphs stating the company's values. Then I clearly outline the martial arts programs offered. This way a first time user can quickly determine what the website is about and learn more if they wish.
  • Structured information
    This website contains a lot of information about the separate martial arts programs, so I felt it was important to carefully structure that information to build context and avoid any confusion. First, I explain what the martial art is as concisely as possible. Then I explain why and how it is effective and awesome, and finally I explain why this academy is exceptional.
  • SEO - Search Engine Optimization
    Structured content is much more appealing to search engines. Careful consideration must be given to the content, the HTML tags, and the meta tags to ensure optimal placement in search engine results.

You can view the website here: Enjoy this before and after video!

  • Website Design
  • Redesign
  • Wordpress Administration
  • Copywriting
  • Photography

Check it out!