Online Video Fitness Classes


Constraints on Contraints on Constraints

We all have constraints in our professional lives. Even though I work in a creative space constraints still exist; client budgets, time and creative license to name a few. Working on was no different. How to be as creative as possible within those constraints are, in my opinion, the hallmark of a good designer.

Our goal was to be as creative as possible and as user-centric as possible in our given sandbox. Based on the designated budget, we couldn't redo and rethink everything and start from scratch. So we decided on giving the existing site a visual refresh. To keep costs down the refresh would be rolled out over time. More constraints to the project? The new parts of the site had to play nice with the old parts both visually and functionally... including an outdated code base.

Below you can see some screens shots from the old site.

The branding and style guide were a bit outdated and rather narrow. The first step to refreshing this brand was to expand and modernize the style guide. I couldnt touch the logo or signature green color, but everything else was fair game and I had enough wiggle room to make big improvements. Lets go over each change individually below.

Small Improvments

The Font

I don't 'not like' slab srifs. But I do feel they are used too frequently and improperly. This was true for FitnessGlo. The body copy was set in Museo Slab, a slab serif that has little "feet". Fonts like these are pretty strictly used for headlines. That was probably the greatest of all the offenses and I took care of it quickly.

Luckily, choosing a replacement font was easy. In keeping the brand on track I chose a close cousin of Museo Slab... Museo Sans. Same x heights and character of the predecessor but a cleaner and modern presentation (old is the first one, new is the second).

The Color Palette

The original branding had a whopping total of 3 colors! Green and grey with lots of white, barely supported by blue and red. This was not neccessarily bad, but it was restrictive creatively. I eventually opened up the pallet by adding another grey, a light orange, and making white a less prominent player.

This process was time consuming as the client and I tried to find a good tertiary color that complemented the brand and didnt look like a copy of a competitor. At the end we settled on a slightly yellow version of orange (as you can see on the "FEEL" tab below).

The Iconography

One of my favorite parts of this project was adding a set of icons to represent equipment requirements for any given class or program. A custom set of icons exclusive to the brand is a great way to add character and a visually defining element. This customization is worthy of additional resources because a tailored set of icons that reflect the overall brand of the client is nearly impossible to obtain off the shelf.

Where Things Really Got Interesting

The Photography

Our client had just had a photo shoot so we had some great material to work with, which isnt always the case. Great lighting, big smiles, and strong color blended well with the rest of the design elements.

Making photography a main visual focus was a no brainer at that point and we took a site with very few images (outside of class thumbnails) and made large background images, featured blog posts, and program hero images.

The Layout and New Dashboard

The layout was my largest point of struggle. Much of the layout could not change because of the code base and that created some unexpected headaches for me and my developers - especially in the dashboard section of the site. Simply switching the navigation from horizontal to vertical required a lot of reworking. Most of my energy was spent in applying the updated style guide and in making a new overview page for the dashboard.

Originally the dashboard defaulted to Recent Classes. But the client and I wanted to make a page that would serve as a true dashboard. Ideally it would give you an overview of new blog posts on the site, news, and (most significantly) a place to pick up where you left off in any enrolled programs. We combined a couple of other pages to consolidate the scheduling and tracking of your goals, which was sorely needed. lastly A couple other sundry changes were made to simplify the header and add a functional footer to the site.

We delivered a beautiful product that, in our beta so far, has been met with raving reviews! Its interesting to see what you can do with a "new coat of paint". Simple updates like expanding the color palette, picking a sleeker font, new icon set, and updating the footer and header go a long way. And the minimal intensive changes, like updating the dashboard, are the finishing touches that push the overall product the last mile looking as impressive as it functions.

You can sign up for a free trial and see the refresh in action here: