REDESIGNING THE ORANGE THEORY WEBSITE

Role: UI Designer & UX Designer

Category: Mobile Application

Year: 2020

My Responsibilities

Interview the target users and gather user insights;
Analyze user pain points;
Creating storyboards, sitemaps, wireframes, screen flows;
Create wireframe and design high fidelity prototype;
Validate product design by coordinating, facilitating and conducting user testing;
Execute all visual design stages from concept to final Prototype;
Create and update the product design UI library.

OVERVIEW

This project aims to redesign the website of Orange Theory complex that maintains the original feature of this complex while adding new features to it and improving the quality of the visual design and user experience to help attract more customers.

CHALLENGE

Considering new conditions and limits due to the COVID-19 pandemic, one of the key traits in this website is adding features for live classes.

Eventually, increased enrollment in classes (both in-person and online) will be the result of this project.

KEY FEATURES

Add live classes for all users;
Simplify the booking process;
Organize the profile;
Improve the visual design.

RESEARCH Summary and preparation

This section play an important role to have a successful discovery. Before starting the discovery phase, I took a series of steps to ensure I cover all aspects of the problem and all the necessary supporting information. To gather all the information, I conducted user interview and survey.

I did research to learn more about users: their needs and experiences.

That’s the reasons I created 2 different types of questionnaires: one for people who are the members of the Orange Theory gym and the other one for people from other sport centers.

For our survey, I created some general questions to know more about user’s exercise routine, online class and their experience. I also asked some specific questions from Orange Theory members, to be familiar with their experiences with OT classes, website, and app.

I conducted a series of steps in the discovery section using the information I gathered from the survey and interview during the research stage. These steps included:

Target audience
Persona
User journey map
SWOT analysis
Site map
User flow

TARGET AUDIENCE

Primary: Orange theory members and others who can benefit online classes. Secondary: Anybody who wants to workout at home especially in pandemic time

PERSONA

After talking to several people during the interview, I developed Amy, my main persona.

1/1

USER JOURNEY MAP

1/1

SWOT ANALYSIS

I used this technique to determine and define the Strengths, Weaknesses, Opportunities, and Threats of the website in order to come up with the best possible solutions.

1/1

SITE MAP

Site map OTH

1/1

USER FLOW

1/1

DESIGN PROCESS

After the discovery section, I created the affinity diagram based on what was done in the discovery section.

AFFINITY DIAGRAM

I created the affinity diagram based on the result of the survey & interviews, and categorized them in four main parts:

● Considering positive & negative points of orange theory's members

● Did the same task as the first part for other gym members.

● Checked positive & negative points of orange theory's members about OTF app and website

● Collect information about positive & negative points for online classes

1/1

SKETCHES

I created low-fi sketches within Illustrator in order to bring the user flow to life.

1/1

HIGH-FIDELITY PROTOTYPE

BOOKING PROCESS

There are two ways that users can book their classes. First (Option One) in the main page, according to their favorite trainer, and second (Option Two), after input their location, choose the best matches class to their plan.