Last  All Projects Next 

barre3 Rebrand

Concept / Design / Code

barre3 Rebrand
Project Details

Type: Web / Brand

For: barre3

A fitness brand

Date: 1 January 2016

View the Website
About the Project

Barre3 hired me to guide the design direction of their new website. They needed a custom platform to support their business, which includes hundreds of studio locations, an online workouts subscription service, a blog, and an eCommerce shop. I was deeply involved in every step of the year-long process, from overarching concepts to minute details of the execution. I also translated my work into a style guide that set the tone for the rest of the company’s print, retail, and social media design teams.

The Research

I started by diving into UX research with a series of user interviews and surveys. I found that the website’s biggest usability issue was its cluttered and disorganized layout. Users had a hard time finding content, and it felt off-putting and off-brand.

“Whenever I take a class in one of your studios, I always think how clean and modern they are. The website doesn’t really match how the studios feel.”

Jennifer

Studio Client

The Planning

I started with a site map that mirrored the old website, then tweaked it to optimize user flows and better support our business goals.

Sitemap Evolution

barre3 Rebrand

The Design

Almost every part of the barre3 brand was up for reevaluation, except for the logo and orange primary brand color. I spent time playing around with various typefaces, additional colors, and visual treatments to find a style that felt fresh but wasn’t too radical a departure from the old branding.

Button and Link Exploration

barre3 Rebrand

For the primary typeface, I knew I wanted something classic and simple, but with more personality than Helvetica Neue (their old font). I replaced it with Futura, intending to mix things up by using many of its different weights and widths. For contrast and a friendly touch, I added a handwritten accent font.

Visual Treatments Exploration

barre3 Rebrand

The Launch

The old website was very limited by its Wordpress platform, so it was satisfying to break away from those constraints and focus solely on simplicity and usability.

Old About Page

New About Page

barre3 Rebrand

Index pages were converted from unwieldy lists into visually-driven rows of categorized carousels. Drop-down menus offered more filtering options (a feature that many users requested in my initial interviews).

Old Recipe Index

New Recipe Index

barre3 Rebrand

I systematized layouts with a sidebar to all be on the left (before it had been a mix of left and right). Then I reorganized information to maximize usability.

Old Online Workout

New Online Workout

barre3 Rebrand

Landing pages were streamlined and simplified. I rebuilt them in modular components, so sections could easily be added and removed for testing.

Old Sales Page

New Sales Page

barre3 Rebrand

The Style Guide

When the design was complete, I created a living style guide as a resource for barre3’s collaborators, developers, and other designers. As with my eLocal style guide, the new guide not only informed branding decisions but also provided a system of CSS selectors for our developers to use.

barre3 Rebrand

You can view the style guide right here.

barre3 Rebrand

The Feedback

After the site launched, another round of user interviews confirmed that it was now much easier for users to find content. My main goal to modernize and simplify the site had been accomplished. There was also a flurry of unsolicited feedback from users who loved the new look:

“I’m obsessed with the look of your new website! It’s so user friendly, clean, and PRETTY! It really reminds me of being in a barre3 studio.”

Kathleen

Studio Member / Online Subscriber