Date: 1 January 2016View the Website
barre3—a fitness brand with hundreds of studio locations as well as online classes—hired me to guide the design direction of their custom Rails website, which they were building to replace their a clunky older Wordpress site. From rearranging the site architecture to putting finishing touches on CSS transformations, I was deeply involved in every step of the year-long process. The resulting digital rebrand was intended to guide the design direction of the rest of barre3's departments, so a large part of my role was to make choices that worked across the company's studio, retail, and social media design as well as on the website.
I began the project by diving into UX research with a series of user interviews and surveys. It quickly emerged that the main usability issue was the difficulty in finding content, whether that meant locating a studio location, an online workout, or a recipe. The other main problem was simply that the website was off-putting, and therefore off-brand. Barre3's current users had an incredibly positive impression of the brand as a whole, but felt that the old website didn't match the rest of their experience:
“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.”
Almost every part of the barre3 brand was up for reevaluation, except for the logo and primary orange brand color. I spent some time playing around with various typefaces, additional colors, and visual treatments to find a style that felt fresh and new but wasn't too radical a departure from the old brand.
I replaced Helvetica with Futura for the main typeface, because I wanted a one that was as classic and simple, but also a little more bold and with more personality. I planned to continue to evolve my designs with many different weights and styles of Futura, to keep mixing things up while retaining an underlying consistency.
One of the more challenging elements of the redesign was the global navigation. There were a lot of questions as to what needed to be included that I ticked off a list one by one. For example, these initial mockups show that I was originally planning to name a section "Online Classes", to keep it consistent with "Studio Classes". I changed my mind because "Studio Locations" and "Online Workouts" were better terns for SEO. I also rearranged and renamed other topics and subtopics to be more intutive for users, and removed the global search bar (which also yielded vast and confusing results, due to wealth of barre3's interconnected content).
The old website was very limited by the Wordpress platform, so it was satifying to break away from those constraints and rearrange webpages with simplicity and usability top of mind.
Index pages were converted from unwieldy lists into visually-driven rows of categorized carousels, with drop-down filter menus that offered more of the filters that users has requested in my inital interviews.
I flipped the content pages to a layout with the more common and recognizeable left-hand sidebar. Then I reorganized information to maximize usability.
Landing pages were streamlined and simplified. I rebuilt them in modular components, so that sections could be easily added and removed for testing.
When the design was complete, I created a living style guide as a resource for barre3's other designers and collaborators, as well as for the developers on my own team. Based on the success of my eLocal style guide, I used it to provide not just brand guidelines, but also a working system of elements that our developers could take advantage of to streamline the entire team's workflow.
View the entire style guide here.
After the site launched, another round of user interviews confirmed that it was now much easier for users to find content, and my main goal to modernize and simplify the site had been accomplished:
“I’m obsessed with the look of your new website! It's very user friendly and not jumbled or overwhelming. It really reminds me of what it feels to be in a barre3 studio.”
The new website design was responsible in part for the huge gains that barre3's online business made after we relaunched, including the business's MRR tripling from December 2015 to December 2016, and churn rate decreasing from 15% to 9% in the same time period.