Type: Web / Brand
A fitness brand
Date: 1 January 2016View the Website
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.
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.”
I started with a site map that mirrored the old website, then tweaked it to optimize user flows and better support our business goals.
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
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
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
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
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
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
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.
You can view the style guide right here.
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.”
Studio Member / Online Subscriber