Client
25th hour
Project Type
Web Design, Interactive, Product Design
Contrubution
Visual Designer, Product Designer
Team
Orangetheory
Overview
“I don’t have enough time.” It’s the #1 excuse for why people around the world don’t exercise. But it’s just that, an excuse. A mental obstacle people have that is preventing them from living their healthiest, happiest life. And as a fitness brand with a mission to help people all over the world live a healthier, more vibrant life, we felt we had an opportunity to tear this excuse down.
Challenge
Orangetheory Fitness needed a way to attract new customers. Traditional fitness marketing often fails to engage people who are full of excuses for not working out. The challenge was to create an engaging online experience that playfully acknowledges these common excuses while seamlessly driving registrations for free Orangetheory classes, effectively turning casual interest into tangible leads.
Solution
Reaching potential Orangetheory Fitness customers who are disengaged by typical fitness marketing and prone to making excuses. My solution: design and develop an interactive website, based on the creative team's campaign, that tackles these excuses head-on with a fun, quiz-like format, effectively converting engagement into leads for free classes in a interesting and interactive environment for desktop and mobile.
Orangetheory Fitness's "25th Hour" campaign aimed to challenge the excuses people make to avoid fitness. I was tasked with designing and developing the campaign's central online hub, a microsite that needed to stand apart from Orangetheory's established brand aesthetic. The creative team's concept centered around playfully exposing these excuses. My role was to bring this vision to life, creating a highly interactive experience optimized for both desktop and mobile, with a strong focus on SEO. Given the short deadline (a week and a half for design, animation, and handoff), I prioritized mobile-first design and streamlined the development process.
My process began with a deep dive into the "25th Hour" campaign brief, clarifying the campaign's objectives and target demographic. I then conducted a comprehensive review of previous Orangetheory Fitness campaigns, analyzing their visual styles, messaging, and overall user experience. To ensure consistency and provide a springboard for my design work, I created a comprehensive style guide library documenting Orangetheory's established fonts, color palettes, and other key design elements. This groundwork allowed me to effectively build upon their existing brand while still achieving the fresh look and feel requested by the creative team.
Following my initial research, I broadened my perspective by conducting a light competitive analysis of brands like SoulCycle and CrossFit, focusing on their website design, user experience, and overall digital strategy. I also considered their market positioning and identified some of their key strengths and weaknesses. This analysis, combined with an inspiration board, helped me identify key trends and best practices within the fitness industry, which I synthesized into tangible design concepts through a series of sketches and layout explorations for the "25th Hour" campaign microsite.
My initial design explorations for the "25th Hour" campaign microsite focused on creating a sense of urgency and inspiring action. I experimented with large, dynamic hero imagery featuring extreme sports and outdoor adventures, hoping to convey the feeling that time was slipping away. A UI concept emerged that visualized this concept literally, with an animated orange circle and dot tracking the seconds as users viewed images of people actively engaging in fitness and leisure. For the activity quizzes, I explored incorporating Orangetheory's prominent orange branding, experimenting with interactive question formats like drag-and-drop to enhance user engagement. This initial phase was about getting all my ideas out, even the ones that didn't quite fit, allowing me to critically evaluate each approach and refine my direction.
(Various concepts below)
With a limited timeline, I opted for internal user testing within the agency to gather quick feedback on the initial prototype. The input I received was invaluable. Concerns that the site felt "too exclusive to fitness people" and "the interactions were boring" led me to re-evaluate my design direction. I realized the imagery-heavy approach was missing the mark. Taking the feedback to heart, I simplified the design, focusing on the quiz questions themselves and integrating the creative team's promotional video with clear contextual explanations on the homepage, linking the microsite to the overall campaign. I streamlined the user flow, simplified the interactions, and adopted a cleaner aesthetic, minimizing the use of orange and emphasizing white space. Animations were added to draw attention to the questions and create a more engaging experience. The revised design resulted in an interactive quiz that effectively guides users toward one of three personalized recommendations: joining the Orangetheory team, trying a free workout to complement their active lifestyle, or signing up for a free workout to become more active.
(Example of one of the pages of the interactive quiz below.)
The "25th Hour" campaign, centered around the interactive microsite I designed, capitalized on Daylight Savings Day to achieve remarkable results for Orangetheory Fitness. The campaign generated a record number of new members, contributing to the brand's continued success. In 2018, Orangetheory's the "25th Hour" campaign played a key role in driving a 60% increase in same-store leads. The microsite's user-friendly design and engaging quiz format were instrumental in capturing user interest and converting it into tangible leads, as evidenced by the significant increase in same-store leads.