Orangetheory.com

New Site & Design System

ic-logo-color

Orangetheory.com redesign

As the fastest-growing fitness franchise in the world, Orangetheory had become so focused on members in the studio, they were missing key opportunities to reach new members on their website. Our design team was tasked to create a new visual language for Orangetheory.com.

 

Orangetheory.com at launch

otf_homepage_on_device2

Discovery Phase

We started with learning everything we could about the brand, talking to the client and friends that go the Orangetheory, reading online, researching the competition, and taking a free class at the gym to the brand unique competitive advantage. Collaborating with digital strategy and UX we started brainstorming what would work best for the brand. Meanwhile, the Design team started gathering inspiration and sketching together with the UX some possible solutions for the problems we needed to solve. Below are some early homepage explorations, where we explored pushing the brand further, introducing new colors, working with images, etc.

Some of the early explorations I did for the site:

v1
v2
v3
v4

Exploration and Review

We started showing our progress to people around us watching how they reacted to our work. What was the first thing they see? Would they book a class with Orangetheory. How does it work – and based on this we kept refining our designs. Later on we limited our exploration to 3 distinct directions and we showed them to the client, along with our inspiration and a UI kit summarizing the differences between each design direction.

We created a sample UI kit for each presented design, to show the differences at a building block level

Workshops, Prototypes, Content Creation and Development

 We worked closely with our client through all the phases and we had weekly meetings to show progress. We created desktop and mobile prototypes, shoot all the content for the site (video and photography) and worked closely with the our development team so we could launch the new 

Orangetheory.com screengrab from the browser

The workout page

The workout page explains the workout visually with a lot of images and short looping videos (cinemagraphs).

https://www.orangetheory.com/en-au/workout/

Workout page capture

The design system document

Using invision's DSM I created a design system document that helped document all the elements of the design system – typography, grid and spacing, color. Having such documentation in one place made the handoff to the dev team smoother and helped us to keep updated all the components, icons, and variations.

This is the design system document I crreated using Invision DMS

Now when people see us online, the experience matches the quality of our studios.

 

Kevin Keith
Orangetheory – Chief Brand Officer