From 2018 - 2021, I was the lead and sole designer for the Tone It Up App. Featured by Apple and liked enough by millions of users around the world to reach 4.8 out of 5 stars, the Tone It Up App is a deceivingly rich and deep community with a bounty of design stories and challenges to unpack.

Like all apps, it evolved – and dramatically. And like all apps, it required a strategically and structurally sound system to underpin the exciting evolutions, additions, and augmentations that took this app into its dynamic and multi-faceted state of today.

 
 
 

The Primacy of Pattern

 
 

Patterns matter. Without a robust system, designs quickly degrade from eye candy to noise. Some call them atoms and molecules. Others call them building blocks. At the end of the day, it really just means you can’t polish things (let alone establish middle layers) without a structurally sound foundation.

For TIU, I built reusable elements from the foundation up so that things could scale robustly – without weird hacks and design debt getting in the way.

 

Landings Matter

I established clean, recognizable patterns to mark key app areas & content types. These pattern provided a crisp way to indicate location and showcase content in an organized way within each masthead.

Cards

A visual language driven by content cards provides consistent continuity when exploring different paradigms of the experience: workouts, nutrition guidelines, recipes, products to buy, and more.

Detail Pages

Familiar design language gives users a recognizable foothold to assist both with understanding their “depth” while explorating and also provides a succinct, concise vehicle to deliver the details – whether it’s about a recipe or workout.

 

Navigational Foundations

 

Before we could house the molecules mentioned above, I had to establish our navigational structure with the help of the internal product team and stakeholders.

What buckets of content and user needs exist? How do our users use the app? Where do we anticipate evolving? Base questions to be sure, but with these and many more questions at the forefront of our minds, we laid the foundation .

 
 
 

Main Nav and the Art of Evolution

Over time, the additions of Nutrition and Community required careful consideration to ensure they would augment without eroding existing paradigms. I built upon existing navigational patterns and mid-level molecules to maintain consistency and potency - both in terms of main nav itself as well as the actual navigable structure within each section.

 
 

Same Song, Different Key

Diving in and out of exploration is endemic to Workouts, Nutrition, and more. By establishing navigational patterns and content vehicles described above (tiles, preview cards, and detail pages for workouts and recipes), we were able to establish a consistent feel across experiences when exploring deeper and navigating back out. You can see the pattern at work here across discrete categories.

 
 
 
 

Change Is Part of the Game

 
 
 

The foundational patterns create the building blocks, but that’s just the beginning. As features ebb and flow and insights surface, the need to extend patterns, evolve them, and orchestrate harmonious solutions persists. Things like filter explorations on category pages and distinct cards for flagship products (“Programs,” in this case) are perfect examples of how things extend, evolve, and improve.

 

Room To Grow, By Design

Profile party

As the social element of the app evolved from perfunctory to increasingly central, the need for a profile that was a) capable of intuitively housing various types of content and functionality and b) engaging visually became increasingly important.

Instructors, too

Similarly, as the inflection point of the world of celebrity trainers tipped ever forward, the need to explore ways to highlight the instructors themselves (as well as the content they lead) became paramount.

 

Earning, Sharing, Celebrating

 
 

Celebrating Success

Beautiful treatments help highlight user success and focus on the individual’s journey – an ethos baked deeply into the TIU brand.

Keeping Track of Wins

As women’s successes build up, they needed a way to visualize their work. I designed engaging ways to view both achieved and pending goals.

Visualizing Community

Over time, design patterns I created introduced various social features into the app. Each new dimension required balancing current-day functions with where the app would evolve.

Showcasing Users

Community, piece by piece

To increase the community feel of the app, we needed to pepper in awareness that you can connect with others, including areas like individuals’ profiles. Users’ connections now render on their profile and underscore the increased community feel of the app.

Community injected into programming

Similarly, as users sign up for different workout programs, I designed a clean, clutter-free way to show that there are others “here” with you.

 

Scheduling, anyone?

 
 

Lots going on here.

Don’t let the spare design fool you: This little component needed to pack some punch. Seen at the top of the Workouts area, it needed to make it clear what days have Workouts scheduled and which day is today. It also needed to capture an ability to expand one individual day or to view the Calendar feature in full – within one click’s distance.

I devised a visual system that would do just that, without adding additional clutter or noise, and that would be light on the uptake for new users.

There’s more.

Once expanded, the Mary Poppins quality doesn’t end: by tapping into a day, you get details for the items happening on that day as well as a minimal but clear indicator that borrows from tab UI patterns we’re all accustomed to. October 21st is the day selected here, and you can see there are two items on the calendar: a cardio workout and a meditation. Close the detail easily by clicking the arrow to close it back up.

We’ve got a full view, too.

If you just want to see the entire month’s view, including the ability to scroll to different months, a simple tap on the calendar icon gets you here. You can see days where workouts are scheduled and can even see multi-day program blocks (“Spring Challenge” shown here).

The same visual language is carried over from the collapsed Workout-page component and users can easily navigate back to the Workouts page view via one click.

 

Calendar In Context

 
 

Secret weapon

Taking up minimal space yet packing a significant punch, this calendar component provides personalized context to an ever-more-personalized TIU experience. The design stays put ‘til you’re ready and offers three levels of depth, depending on what view is needed, with minimal effort or friction.

Day view in detail

As the day view became more important to programming, the ability to access the day view from the Calendar page offered the opportunity to build out cross-feature pollination such as Nutrition and Journaling paradigms.

Visualize your progress

Our philosophy here was simple: figure out a way to visualize what’s going on at a glance with the ability to easily dive into greater detail. Mission accomplished.

Devil’s In The Details

 
 
 

Making features actually work

Features are sexy, exciting, and sell products. But they live and die by the nitty gritty details. The beautiful Calendar UI above would fall on its face if the mechanics weren’t carefully thought out. My work here was to solve some meaty UX challenges around how to elegantly allow users to manage their calendars without it feeling like an unwieldy management tool.

The key to the UX magic? Context, potency, and need-to-be-here basis. Boiling things down to their sparest form and then making them pretty. And kicking the tires again and again to ensure they capture the required functionality to make that sexy Calendar sing.

 

Onboarding Is For Users, Right?

Sure to set off contentious debates, it’s a question that UX designers don’t take lightly. Building an onboarding flow that achieves the needs of the business is key, but it’s near impossible to do so if the onboarding experience doesn’t keep the user front and center, too.

 
 

Clear, concise questions.

Ever get asked frustratingly long-winded questions by someone you just met? Yeah, me too. Doesn’t feel great. I kept it punchy and spare to capture the essential information needed by the business goals without losing our new friend’s focus.

Easy tap targets.

Punching buttons is satisfying, but only if they’re not a pain in the neck to find. I kept things playful, chunky, and easy to decipher.

Clear progress.

Love it or hate it, attention spans are shortening. One way to ameliorate this issue is to manage expectations. I went for extra credit by making it enjoyable to look at.

First Impressions. Over and over.

 
 
 

Whether it’s a new user or a new feature, the right first impression matters.

New features get added and finding the right time, place, mechanism, and design to deliver the news – in an engaging, fun, yet not annoying way – matters greatly.

I designed various patterns to deliver different types of new feature announcements with differing levels of importance and grandeur. At the end of the day, they all needed to be clear, actionable, and anti-annoying.