Here is an overview of the Orangetheory rebranding, which includes:
An explanation of the website's overall system, functionality, and flow, with screen recordings for clarity.
A breakdown of the website showcased through motion graphics, demonstrating its presentation and functionality.
The reasoning behind each design choice made to develop the brand and website system.
Orange Theory Website Overview
The website includes several sections:
About Us: Learn about the studio and its mission.
Studio: Explore the studio spaces, featuring curated mockup visuals created with Photoshop.
Workout: Discover the workout formats offered at the studio.
Shop: Browse the merchandise collection.
Theory: Dive into the science behind the workouts, including color-coded heart rate zones showcased through motion graphics.
The entire website follows a cohesive color-coded system for a unified look and feel.
The Motion Graphic v.s. How it looks on the website
Zone 1
Zone 4
Zone 2
Zone 5
Zone 3
Below is an overview of the reasoning behind each design choice made to develop the brand and website system.
