01
Outdoor Voices /

Fitness App

CLIENT OVERVIEW:
Outdoor Voices is an active lifestyle brand. We believe in freeing fitness from performance, and embrace activity with ease, humor, and delight.
‍

OBJECTIVE:
Create a mobile prototype that allows users to attend live and on-demand fitness classes and interact with the online OV community.

Process Deck

ROLE: UX/UI Designer / Project Manager
‍
TEAM SIZE: 4

TOOLS USED: Figma & Notion
‍
‍DURATION:
2 Week Design Sprint
(April 7, 2021 - April 20, 2021)

Introduction
Due to COVID-19 gym closures, there has been an increase in the amount of customers using mobile applications to easily access virtual workouts. Outdoor Voices aims to expand beyond clothing and create a mobile prototype that allows users to attend live and on-demand fitness classes and interact with the online Outdoor Voices community.

JUMP TO VISUAL DESIGN

Initial Observation: When first given the brief we started our discovery phase by looking at the existing app Outdoor Voices had. We discovered that it was used for "in person" events only and didn't allow users to access the classes virtually from the comfort of their homes.
‍
Goals:
- Redesign the app so users can access live and on- demand fitness classes.
- Help users filter to find the perfect workout class.
- Create a community so users can engage with others participating in the OV app.

Competitive & Comparative Analysis

When conducting our C&C analysis we chose direct competitors that have fitness apps like Peloton, Equinox +, and Lululemon. We discovered from our C&C analysis that OV is still in early stages of development for their fitness app. They are lacking a lot of key features that other established apps have. All direct competitors have either a search field or filter option, which will help users find classes tailored to their needs. Offering both live and on demand is common in fitness apps. Below are a few of the competitors we used in our C&C analysis.

Peloton

Weight Watchers

Lululemon

Equinox Plus

RESEARCH
Interviewed: 4 Users
‍
We started our user research by first conducting user interviews in order to understand user behavior. From our interviews we discovered that users enjoy the interactive experience of live classes but also need the flexibility of on demand classes. Users also wanted to be able to fully customize their virtual fitness experience to fit their specific needs and lifestyle.
When it came to their participation in communities the users look are often looking for support and motivation through online communities.



USER PERSONA
Based on the interviews we set up two personas. We referred to them throughout the entire product development process. Meet our primary user persona Jenna!
‍‍
Jenna needs flexible and personalized fitness classes, and a way to stay connected to the Outdoor Voices Community, in order to stay on top of her fitness goals and receive support from the online community.
‍
‍How might we help Jenna attend live and on-demand fitness classes and interact with the online Outdoor Voices community.

We mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.


Content Inventory

As a team, content Inventory was conducted which informed the decision behind IA design and content hierarchy, lead to an effective menu system and identified what are the relevant content needed.


Information Architecture

We decided on the main categories of the app with a Card Sorting session. After conducting card sorting we learned that the class type and duration were the top filters for users to select from. 50% of users sorted by class type and 50% of users sorted by class duration.

SKETCHES

USER FLOW

WIREFRAMES - Low Fidelity
We started the design process with low fidelity wireframes. We wanted to have a way to iterate through many design options quickly.

Round 1 - Usability Testing
Before bringing our wireframes to a higher fidelity, I did a testing round in order to reveal possible usability problems with our low fidelity prototype.

After our initial round of testing we made iterations to our wireframes. User found it confusing how to now what todays date was so we made a clearer indication of “today” on calendar. Users also found the arrow did not match the interaction so we switched it to face down instead of right. Finally we removed the sorting option since the user was confused why it was displayed in the filter.

Users found the “Filter” in the first round of wireframes confusing. They expressed that the interaction when viewing "class types" were confusing. We made iterations and adjusted it to be a drop down menu.


Once I tested out all usability mistakes, I started designing the final screens in Figma.

DESIGN SYSTEM
When it came time to move into the UI of the app we started by creating a design system to keep it consistent across the app. As a team, we chose to use the current OV fonts and blue color to stay true to the brand.
‍

Round 2 - Usability Testing
4 Users | Remote and Moderated | A/B Testing

Tasks:
- Find live meditation class on April 23.
- Register for a class and enter a group chat.

Goal:
Users will finish registering for a live class under 2 minutes with no more than 1 error.

Redesigned “Filter” Button
Users found the UX writing of the original "upcoming class filter" confusing. During iterations we changed it to a "Filter Button" so users can easily filter and find the classes for them.

Removed “Join Chat” Screen
‍User didn’t understand the need to click “Join Group/Class” and were expecting to just immediately join the chat after pressing "Join the Group". During these iterations we just removed the pop-up screen to bring the user right into the community chat.

VISUAL DESIGN

01
The OV app adds ease for users to filter and find the perfect LIVE or On-Demand fitness class.

02
The "Filter" feature allows the user to search for upcoming live classes based on your specific interests and needs.

Prototype

WHAT I LEARNED
‍
It was a exciting challenge working on this project especially when during quarantine I myself experienced exploring so many fitness apps to find one that fit my own personal needs. I had to put all that aside and really focus on the OV Brand and the users needs and create a great experience with my team. I look forward in next steps to expanding the experience and creating an onboarding process for new users to get a custom experience.

Next Project