Product Designer
Orangetheory Live
Objective: Design a website for Orangetheory Fitness sister company that offers virtual classes
Role: User research, Interaction and Visual design, Wireframing, Prototyping, User testing
Client: Niaz Zia Design School
Tools: Figma, Miro, Google Forms, Google Docs
Duration: 10 weeks
Overview:
Orangetheory Fitness is a boutique fitness studio franchise headquartered in Boca Raton, Florida. They specialize in offering one-hour, full-body workouts that target Endurance, Strength, and Power. Their approach incorporates heart-rate-based interval training, which is designed to burn more calories post-workout compared to traditional exercise methods. Workouts are tailored to individual heart rate zones, ensuring effectiveness for all fitness levels.
With the onset of the pandemic, people's daily routines underwent significant changes, affecting Orangetheory Fitness members who were unable to access gym facilities for their workouts.
Challenge
The pandemic and subsequent lockdowns brought about significant changes in everyone's lives. Many businesses were forced to close their doors to customers, including Orangetheory Fitness studios. This meant that members of Orangetheory were unable to attend the gym for their workouts.
We were tasked with designing a website for Orangetheory's sister company, which offers online classes, and optimizing the registration flow. It was crucial to maintain consistency between the two websites and adhere to Orangetheory's workout style.
Timeline
The time span for this project was 10 weeks. So we started off by planning and making the timeline to stay on schedule. Some task took more time than what we planned for but at the end we did our best to stay on schedule.
UX Research
To gain a better understanding of our target audience, we conducted an online survey with 78 participants and interviewed 5 individuals.
What we discovered from our research was that:
The users would like to get confirmation for booking and cancelling so that they
know the action is done.
The users would like to have a profile page so that their workout information can be saved.
The users would like to see rating for trainers so that they can know how good a trainer is.
The users would like to find class schedule and membership info on
the first page so that they don't have to look for it in the whole website.
Focusing on User
After conducting surveys and interviews, we developed two personas, Anna Lively and Oliver Kyle, to personalize the design and ensure that the user remained at the forefront of our design process. These personas prevented us from imposing our own mental models on the process and encouraged us to approach the design with greater empathy.
Competitor Analysis
We examined the websites of other competitors, analyzing everything from registration to the actual workout video calls. Google served as our primary starting point. We extensively reviewed feedback and watched videos to compile a comparison of what our competitors offer versus what we aim to design for this challenge.
Ideation and Brainstorming
At this stage, we had gained an understanding of the users' needs and identified some of their pain points. As a team, we brainstormed ideas based on our UX research to kickstart our design process. The ideas encompassed a wide range of possibilities, so we enlisted our target audience to help prioritize them. After carefully evaluating the ideas and considering our research findings alongside the time constraints we faced, we began the design phase.
We had some of our target audience members sort the sticky notes. This exercise helped us establish a preliminary Information Architecture for the website. However, as the project progressed, we underwent numerous iterations.
User Flow
Anna and Oliver were able to navigate the website through various routes to achieve their goals. I explored four different flows and refined them to ensure simplicity.
.png)
Sketches
Preliminary sketches were created based on the user flows. These sketches were produced shortly after completing the user flows to ensure that all details were fresh in our minds.
Mid-Fid Wireframes
We dedicated considerable time to refining the details, transitioning directly from sketching to mid-fidelity wireframes. Below are some of the images.
Style Guide
As 'OrangeTheory Live' is a component of 'OrangeTheory Fitness,' we were tasked with adhering to the existing style of the OrangeTheory website and maintaining consistency as much as possible.
Final Design
There were many more areas for expanding ideas to enhance the website. However, due to time constraints, we proceeded to the final design to ensure that the project was presentable on time. Here is the result:
Retrospective
This project involved numerous complex flows and was constrained by a tight timeline. It was imperative to maintain focus on the project requirements outlined in the brief. Key takeaways from this project include:
​
-
Paying close attention to the project brief and seeking clarification when uncertain. This ensures alignment among team members and prevents unnecessary delays.
-
As designers, we often strive for perfection. However, time or budget constraints may prevent us from achieving our ideal outcome within a given timeframe.
-
Effective design is not about incorporating numerous features; rather, it involves prioritizing features and executing them effectively.
Note:
-
While I was working on the OrangeTheory Live project, OrangeTheory Fitness did not offer any online classes.
-
I am not employed by, nor am I affiliated with OrangeTheory Fitness. The UX/UI study was conducted as part of a UX bootcamp for learning purposes only.