The
Challenge

I have been following WODPrep’s CrossFit YouTube channel for a couple months and subscribed to his email list to get weekly tips to incorporate into my CrossFit training. During one of his weekly emails Ben, Founder of WODPrep, sent out a shoutout to any designers to help him with his website. I decided to pursue this opportunity with Ben as it was something that I was also very personally interested in.

After a couple calls back and forth the project was a go. The WODPrep family (subscribers) had been growing and there was a need to start creating a website that would be the base for all his free and premium courses. He also wanted to start a blog, which would add another avenue for visitors to explore, other than just his YouTube and Facebook pages.

Services Provided
  • Web Design
  • UX / UI Design
Company
  • WODPrep
Year
  • 2017

Website
Flow Chart

At the time, WODPrep was made up of several landing pages from links found on YouTube videos and Facebook posts. This provided a great place to start, however I needed to work with Ben closely to figure out the scope of this project and how he envisioned this new website to operate.

By doing a simple flow chart, I broke down all the pages he envisioned on his new website. This allowed me to fully understand how everything would work together and the clear scope of the project.

Style
Guide

Before I would start designing out concepts for various pages, I knew I needed to make a simple design style guide. I needed a set of elements to abide by so I could maintain control of the design and keep everything looking consistent.

Furthermore, it would provide a guide for future pages and updates needed to be done on the website. This guide is basic as it only covers fonts, buttons and colors, yet it provided a great starting point for my design process.

Wireframe
Concepts

With the style guide in place, I now needed to create the wireframe concepts for each page. The goal here was to make the wireframes highly detailed with information, as Ben wanted a clear vision of how each page would look in the end. In addition, it would allow me to make efficient changes and only deal with graphic elements after the wireframe stage.

Ben stressed the importance to make the website mobile friendly as traffic largely came from people who viewed his links through their mobile devices. With this feedback, I needed to do wireframes for both desktop and mobile devices.

Every night I would show Ben my progress and get his feedback daily. This continual collaboration proved to be super valuable during this stage of the design process.

The
Photos

In building such a new comprehensive website, photography plays a crucial role. We both agreed that using stock photography would not do the website justice. Custom photography was the only way to achieve the true vision Ben had for his website.

With that decision, Ben organized to have several professional photos done surrounding each CrossFit movement with himself and several of his athletes. I then handpicked each photo to use on the website. While we largely used custom photography, we did end up using a couple stock photos that worked well with the consistent of the website.

Visual
Design

With the necessary resources, I was able to convert all my approved wireframes into fully fleshed out high fidelity mockups. I always enjoy this stage of the process immensely as I get to see the vision of everything coming together before it gets developed.

Showing the high fidelity mocks to Ben, and the rest of the WODPrep team, was a huge highlight. They really liked them and offered some great feedback on small changes to make before the developer would work their magic.

The
Result

The end result was excellent and early reactions were showing positive and steady conversions from website visitors, on both desktop and mobile devices. Ben, was extremely pleased with the launch and said this new website was far superior than what he originally had.

Not every webpage I designed could be built using the Thrive Themes Framework. I then had to do some last minute revisions that worked within their theme constraints. Thrive themes is a conversion focused WordPress framework that provides several tools to help with A/B testing, evergreen campaigns, email list building and customer engagement.

Being part of the WODPrep family, as a subscriber and designer, has been extremely rewarding and eye opening.