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
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:
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
Orangetheory.com screengrab from the browser
Workout page capture
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