CrossFit Madtown

CrossFit Madtown Website


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 details

View 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.

Design Planning

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.

Version 1 Design Wireframes and Mockups

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.

CrossFit Madtown Homepage Wireframe

Home Page Wireframe

CrossFit Madtown About Page Wireframe

About Page Wireframe

CrossFit Madtown Internal Page Wireframe

Internal Page Wireframe

CrossFit Madtown Homepage Mockup

Home Page Mockup

CrossFit Madtown About Page Mockup

About Page Mockup

CrossFit Madtown Internal Page Mockup

Internal Page Mockup

Version 2 Design Mockups

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.

CrossFit Madtown Homepage Version 2

Version 2 Homepage Mockup

CrossFit Madtown Navigation Version 2

The new side navigation supports a variety of categories and classes that the gym has to offer.

CrossFit Madtown Internal Page Version 2

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.