Building The World’s Largest Health & Fitness Community - $500M

UX Designer

Design Systems

UI Designer

Figma

Sketch

Bodybuilding.com

Full portfolio here with larger images: https://bit.ly/Preston-IC-Contra

Project Spoilers: #1 App in apple Fitness Category | 100K MUAs to over 5,000,000 MUAs | 200x time on site | 50%+ Order Attribution

I led the design of the world's largest online social fitness community, Bodyspace. This was a #1 ranked app in the Apple App Store and helped grow the company from $1M in top-line revenue to over $500M in a short period of time. I coordinated effort across multi-surfaces including responsive web and native applications.

Context

I was put in charge of concepting and designing all experiences for the world’s largest health & fitness community BodySpace with over 5M monthly active users. As I led the design, I also led the team of testers, information architects, UXUI professionals and the tribe-structured dev teams.

Problem

BodySpace had a few hundred thousand users but was full of clunky UXUI and was stuck in a stagnant state. A native app didn’t exist and was a huge opportunity to build a cornerstone experience for the company to increase revenue, time on site and overall loyalty.

Team

Product Design, Development, C-Level Staff

Role

Head of Design

Timeframe

12 months

Vision

Create a massively popular health & fitness community experience across responsive web and native via world-class social experience building, including up-voting, UGC, advanced tracking tools and more.

All-in-one

It’s nearly impossible to explain all the aspects of this project as it spanned the entire company and included 100’s of user flows and thousands of hours or research.

But even given the complexity of the project, I still approached it with a similar Design Thinking approach and flow to great success.

Spoiler alert: the effort was worth it as it was the top-ranked iOS app in the highly competitive Health & Fitness category. I guess all the post-it notes paid off!

Research and brainstorm

Because we were designing for a broad range of users and also gamifying the overall experience, it was important to address personas and research additional attributes of where they might fall on a game “player type” map.

Journey mapping

After establishing the various archetypes and user personas, we mapped their journeys to understand how they might use the software ecosystem throughout the day across mobile apps and desktop.

Refining the experience with multiple stakeholders

From the executive team down to the design interns, I shepherded the design process throughout, encouraging brainstorms, rapid prototyping and a focus on achieving user goals.

Low fidelity

After many hours spent with the team and stakeholders brainstorming, researching and planning, it was time to bust out some wireframes and start seeing where the rubber would hit the road.

One of the biggest benefits of rapid wireframing is the ability for the team to understand the overall IA chunking, keep stakeholders looped-in and also begin early discussions with development teams to properly estimate the work.

Mid-fidelity —Social

After low fidelity prototypes were tested, it was time to start putting some meat on the bones by really designing and linking higher quality prototypes for further testing.

As mentioned, this application was multi-faceted and required designs to be considered for social interactions, feeds, sorting logic, user-generated content and more.

Designing in mid-fidelity allowed for continued stakeholder involvement and learnings in each micro-chasm of the experience.

Mid-fidelity —Advanced Trackers

Another aspect of this mega app was advanced workout tracking. This required an extreme amount of design skill to chunk out the interactions needed, where the data should live, all while keeping the experience straightforward for users.

Spoiler alert: all of this attention to detail was worth it as this app is responsible for billions of workouts tracked and creating real positive life changes for users looking to level up their lives.

High-fidelity

After months of research, design, testing, iterations and refinements, we designed the final high-fidelity skin to really set the app apart.

Project Outcome

This turned out to be one of the projects I am most proud of today. It was one of the most complicated information architectures I’ve ever had to navigate and organize with 1000’s of pages and features only found in the most popular mega apps.

This app (and the corresponding responsive web project not depicted in this portfolio) resulted in growing the community from 100,000 MUAs to over 5,000,000 MUAs. This also resulted in 200x time on site and 50% boost in order attribution helping contribute to the growth of the company from $10,000,000 in annual revenue to nearly $500,000,000 in annual revenue.

Aside from all the stats, the workout tracking tools enabled members to track over 1 billion workouts, lift over 1 trillion lbs. cumulatively, and ultimately help users improve their health and transform their lives. I am deeply proud to have led this project with many other talented designers and developers helping along the way.

Learnings

I learned what is possible with patience, an amazing team, a strict attention to detail, an incessant hunger for growth and encouraging collaboration in every aspect of the company you can create an application that changes an industry and millions of lives along the way.