Research-Driven Pivot

Shifting the Focus from Online Fitness to a Comprehensive Feature for Motivation and Accountability

Prototype Preview

Project Overview

Outdoor Voices specializes in athletic apparel for women and men with a mission to get the world moving. Outdoor Voices is looking to provide a way for its customers to attend live and on-demand fitness classes and interact with the online Outdoor Voices community.

My Role
UX/UI Designer
Key Contributions
User Research
Market Research
Wireframing
Prototyping
Usability Testing
Interaction Design
Tools
Figma, Notion, Miro
Team
4 UX Designers
Duration
3 Weeks

Challenge

How can Outdoor Voices create an engaging platform that encourages customers to incorporate movement into their daily lives through a variety of activities, while simultaneously fostering a vibrant online community?

Outdoor Voices aims to inspire people to lead active lifestyles, not only through formal workouts but also by incorporating movement into daily routines. The challenge is to design a feature that motivates Outdoor Voices' customers to engage in regular movement through "Doing Things," fostering a sense of community involvement.

Research

🟦 Uncovering the website's current landscape

> Live and functional e-commerce website with minimal design, that allows customers to browse, select, and purchase products with ease.

> Limited number of in-person events in different cities within the US.

> A separate OV webpage that shares ambassadors/RECREATIONALISTs’ stories.

Identified Issues

(Through conducting heuristic evaluation & usability testings)

“Um, I’m overwhelmed by the number of pages under the ‘Discover’ tab”
- a user looking for events in OV website -

🟦 Insights from the Audience

Beginning our journey, we kicked off with a screener survey that gathered info on demographics, health views, activities, and virtual classes. This drew 58 responses and led us to 13 insightful user interviews. These picks considered age and well-being, plus past online class involvement. Our team did 3-5 interviews each to get a well-rounded view. To sort out the info, we used affinity mapping, grouping user thoughts into clear trends.

Here's what we discovered:

> Users really value health for body and mind.
> Getting active is tough due to time and motivation.
> Being social is a big motivation, for friendships, shared experiences, and fun.

"Hiking is not always fun...but it is nice to go with someone else. If I was with myself, I would be more likely to turn back"
“I used to regularly go to the gym for a body pumps class, but my schedule didn’t allow me to continue”

🟦 Analyzing similar brands for inspiration

Competitors

Brands that sell athletic products as well as offering online fitness classes.

Comparators

Brands that connect people with the experiences that make them whole.

Problem Statement

Everyday people care about their health and well-being but face obstacles in staying active, including time constraints and loss of motivation. They also value social interactions as motivation to stay active.

Key Insights

The research synthesis highlights three pivotal focal points for informed design decisions.

Key Insights 1
Key Insights 2
Key Insights 3

Clarifying the mission: Setting the project's goals and boundaries

Transitioning to the next phase, we capitalized on insights from our research and delved into brainstorming, fueled by the user persona we crafted. Drawing inspiration from this persona, we refined "how might we?"questions tailored to user needs.

Team Discussion Sparks Resolution

During this process, a team disagreement arose: Should we restrict our focus to the prompt, which is providing solely online fitness classes, or design a solution that genuinely addresses real needs? This disagreement underscored the depth of our ideation, as we navigated the balance between project requirement and impactful user-centric solutions. This evolved vision extended beyond the initial prompt, shaping OV as a platform for fitness, community-building, and motivation enhancement.

It’s easier to connect people online, if they had the chance to meet each other in-person before.
— Online fitness class instructor

Solution Statement

Part 1️ :
Outdoor Voices’ desktop and mobile platform will allow users to browse and participate in live-stream and on-demand fitness classes as well as in-person events at a time and place that fits best with their schedule and preferences.


Part 2:
Number Users will be able to connect with others to do activities together so that they can build connections, seek accountability, and be a part of a global community that strives to be #DoingThings to feel good about their health and well-being. #2

Creative Exploration: Brainstorming potential solutions

Continuing our ideation journey, we employed a range of methods to identify and prioritize essential features for the new OV design. Our approach encompassed several pivotal steps:

> Reviewing our C&C feature inventory.
> Crafting a new site map.
> Designing a user flow.
> Creating an MSCW chart.

These endeavors paved the way to categorize features based on impact and resource allocation, guiding prioritization. Worth noting, we've retained the current OV color palette and typeface, emphasizing new feature integration at present.

Design Evolution: navigating through iterative refinements

Our design process unfolded in iterative steps, refining our solution with each stride. It encompassed sketching, evolving from low-fidelity to high-fidelity prototypes, and culminating in usability testing. Here's a snapshot of this journey:

Sketch to Wireframe

🟦 Solution Part 1: Enhanced Event Discovery

Empowering users with diverse interests and preferences to seamlessly explore and discover events aligned with their schedules.

Event Page

Solution#1

1

A new global navigation bar with easy access to events page

2

A search bar enabling users to search by keywords and location.

3

Instant filters like "starting soon" and "Today" on the main event page seize users' momentum, catering to their immediate activity-seeking mindset.

Event Page

Solution#2

4

Comprehensive filtering options based on categories such as event day, type, activity, location, and distance.

5

For online classes, in-depth class descriptions incorporating elements such as timing, duration, class demo videos, and the choice between recorded and live sessions.

🟦 Solution Part 2: Fostering Interaction & Motivation

Cultivating meaningful social interactions among users, serving as a driving force for mutual motivation

Event Page

Solution#3

6

Event details meticulously outlined for in-person experiences, encompassing essential information like time, location, attendee count, and community guidelines.

7

Real-time chat, allowing attendees and hosts to interact, fostering camaraderie.

8

Attendee pictures, putting faces to event participants, cultivating a sense of belonging.

9

Social sharing, facilitating effortless sharing with friends, enriching user connections.

🌀 Responsive adaptation: Refining designs with user feedback

I conducted 10 moderated usability testings in three rounds from early design stages to the high-fidelity prototype. There were lots of feedback and revisions, and you can find see some of them below and find the full report here!

> Visually separated the categories to make them easily scannable.

iterations #1

> In the mid-fi stage, the chat box placed on the event list was overlooked by users (1). Even when enlarged, users saw no reason to engage before viewing event details (2). Moving it to 'Event Details' didn't improve visibility (3). Inspired by YouTube's live chat, I revamped the chat box, increasing its size and showcasing ongoing conversations. Users readily engaged with it in final tests(✓).

Iterations #2

> The "Create an Account" page emerged after clicking RSVP, but the early mid-fi design led to user confusion. A search bar at the top of the page caused frustration, prompting comments like: "It's like the website crashed," "Why the search bar again?" and "Why this account page? Did I do something wrong?"

Iterations#3

Project Conclusion

Our journey, informed by key research insights, yielded a transformative design solution. Users' emphasis on holistic well-being, coupled with barriers like time constraints and motivation challenges, drove us to create an accessible, engaging platform. By harnessing the power of social motivation, we fostered community interaction. Usability tests validated choices, while innovative language preserved Outdoor Voices' essence. A responsive app extended the user experience.

Check out the final prototypes here!

What's next?

- Create a mood board and propose a better visual design in terms of color palette and typeface.
- Improve the website UX writing
- Accessibility evaluation of prototypes
- Test for effectiveness and usability of community/social related features
- Optimize community/social engagement on platform
- Find best way to show the paid membership and free classes

Teamwork and Learning

Through collaboration, we navigated challenges, leveraging each team member's strengths. Clear roles, expectations, and upfront project planning facilitated seamless compromise and an improved team dynamic. Our collective journey affirmed the power of teamwork and early project groundwork.

Other projects

Melodynest to inspires prototype

Prioritizing Impact

Case Study
Aurora Studio Case Study Prototype Preview

E-commerce Reimagined

Case Study

Let's get in touch!

I love connecting, creating, and sharing with people.