CrossFit Madtown is a CrossFit gym in Madison, Wisconsin. However, while CrossFit Madtown offers CrossFit, they also offer many other Athletic Development programs including: Youth Development programs, High School and Sport Specific Athletic Performance training, and Olympic Weight Lifting.
Update: As of April, 2016, I created a new design for Crossfit Madtown. The old design no longer served the content and needs of the client. See below for detailsView Live
CrossFit Madtown attracts and grooms elite atheletes, but they didn't want to be know as a "hard core" gym because they are also very friendly to beginners and children.
I performed competitive market and SWOT analyses of the Madison-Area CrossFit gyms. I found that many gyms were designed and portrayed as "intense" or "hard core" often using dark colors and images of very fit individuals.
Because I wanted to avoid this stereotype, I decided to design with lighter colors, and treat the images to make them look a little more vintage/friendly. I also did the photography for the site and made sure include pictures of their wide demographic of athletes.
This is the first version of the website. Two of the most important page designs were the about page and the internal page.
The about page helps to give potential clients a sense of the trainers. I added pictures next to each description to give a sense of familiarity.
The internal page design houses all of the content for the CrossFit Madtown programs. Most programs (Youth Athletic Performance Training, High School Athletic Performance Training, CrossFit, etc.) have several different classes. I used an accordion menu to allow for the addition of new classes. This component also helps to reduce the amount of content on the page at once.
Home Page Wireframe
About Page Wireframe
Internal Page Wireframe
Home Page Mockup
About Page Mockup
Internal Page Mockup
In the year after the website went live, the gym outgrew it's old space. A year later, it has outgrown it's website. The structure of the old site no longer supports all of the programs that the gym offers, and the old content managment system doesn't allow for enough flexibility in adding new programs. For this reason, I used the old structure, while re-designing the experience.
The gym started using brighter, more friendly colors in their marketing, so I updated the colors and icons on the website to reflect that change and create a consistent brand experience. I also moved the navigation off-canvas to accommodate the constantly growing array of programs they offer their athletes.
Finally, I built the site using Jekyll and integrated it with CloudCannon. CloudCannon is a content management system that will give the gym owners an easy way to add new classes, upload photos, and update existing content.
Version 2 Homepage Mockup
The new side navigation supports a variety of categories and classes that the gym has to offer.
This version of the internal pages has a default background pattern included with Jekyll if the web administrator doesn't have an image to add for a particular program.