Dashboard 2.0 Redesign

Old_Dash.png

When

December 2015 - January 2017

my role

Lead Full Design Team Excercise. I was the sole designer for this project soliciting feedback from our design team at our weekly critiques. In addition I organized and ran all the UX research conducted during the project.


Introduction

Whenever you open one of our apps you're taken to the dashboard. All of the features of the app are accessible via the dashboard, and it's branded to the specific gym.

bestfitness1.png

What Dashboard 1.0 Does Well

  • White-labeled. Supports over 600+ brands. With an internal tool we built called app crusher we can take in a gym's logo, color palette and customize their app to fit their brand, for both iOS and Android.

  • 30+ Features & Integrations. Our wide breadth of features allows clubs to customize their dashboard to suit the fitness experience that they're providing. In addition, we integrated with all of the major fitness trackers & platforms, allowing a user to check in to the club with their app, sync their fitbit progress, etc, enabling the app to become the hub of your fitness world.

Where It Fell Short 

  • A Mirror of My Fitness Life: The dashboard focuses entirely on the gym that you attend. It's essentially a directory to all of the features and ways you can interact with a gym. While the gyms are Netpulse's customers, the app is built for the gym goers. Without seeing myself, my goals, my progress, etc, in the main screen it feels like I'm just visiting the gym's webpage. Getting healthy is a scary difficult thing to do for many people, and it was our job to enhance the gym's abilities to help you achieve your goals, we needed to find a way to bring in the user into the main screen of the app.
  • Tyranny of Choice: While the features enabled for each gym might change, each dashboard is a grid with (9-15) buttons that are all at the same hierarchy. We don't help the user make a decision on what feature to engage with based on their needs.
  • Static: For features that are dynamic and changing the only information we show is a single number, hiding the real functinality beneath the dashboard tile.. For example if you're part of a weightloss challenge, we'll show you a percentage of completion (53% of the way to the challenge goal). This number is shown without specifying what it relates to. In addition, most users care about their positioning in the leaderboard not the actual process itself. To support the next generation of features we were building we needed a dashboard that could support more dynamic data representation.
  • Brandability: Currently our dashboard supports showing a gym's logo, brand colors & customized background but as you can see in the screenshot above, the various dashboards still overwhelming look similar. There is a huge opportunity for us to give gyms greater branding controls to really make their voice shine in their app. Equinox is a fundamentally different brand from Planet Fitness the dashboard should be flexible enough to support both brands without distilling the brand down or the UX down.

Initial Research

The first thing I started with was to answer the questions "What is our full feature set?" With over 30+ features that can be turned on/off and moved around I needed to get the full lay of the land before diving into exploration. Whenever we sign a new client our implementation team works with them to pick their features and tile ordering, so I went to them and mapped out all of the possible features of our platform.

All of our features & the key actions a user can take.

All of our features & the key actions a user can take.

With all the features laid out I moved to answer the question "How do our users currently use them?

Looking through our google analytics revealed some powerful information:

  • Most users used the app solely to checkin, 50% dropoff afterwards.
  • Find a class is the second most used feature, also a 50% dropoff afterwards.
  • After using a particular feature there was a large dropoff after returning to the dashboard.

Stakeholder Brainstorm

After completing all the initial research we sat down with our executives, product managers & account managers for both small businesses and enterprises and conducted a no-constraint brainstorm. Our PM's had been thinking about redesigning the dashboard for a long time, and our executives and AM's were at the front lines of hearing feedback on the dashboard from customers. Our learnings from the brainstorm would serve as the jumping point for our ideation.

We left the brainstorm with personas created and the go ahead to begin our design exploration.


First Ideation

Putting time constaints and technical limitations aside for the first version of the brainstorm I began iterating through multiple concepts. The following goals were in mind:

  • Expose more of the club's branding.
  • Provide a more personalized experience for the user, make it feel like it's their dashboard.
  • Design the dashboard as the platform for our features to begin interacting with one another more.

Since we had so many features being used as tiles, many of which could be classified as one time use settings, I began with reorganizing the IA of our features and used that as a launching point.

Once that was done I launched into exploration mode, playing around with brand exposure, tile organization & design, and surfacing key actions and data right on the dashboard.

iterations.png

Converging Our Ideation

After a week of solo exploration I reconvened with the other PD on the project, combined our explorations and organized them into three seperate concepts to present to the executive team.

 
Eva.png

Focus For MVP

We presented the above options and decided to move forward by focusing on the following:

  • Tabbed Dashboard. By bringing in a "My Fitness" & "My Gym" tab the dashboard would now be organized with features that relate to the gym goer and his fitness journey on one page and features used for interacting with a gym and it's facilities on another page.
  • Opaque Tiles. Smaller opaque tiles enable a gym's background image to really shine through and allows us to avoid having fully colored tiles that take away from the branding (like the white tiles seen above).
  • CTA buttons & Live Data on Tiles. Data on tiles will now be shown with a corresponding metric & cleaner type. For features that have actions within them we'll show a button denoting that action, (for Find a Class a "Book Now" button would appear).
  • Profile Photo & Redesigned Side Menu. On the dashboard a user's profile picture will be brought in to make it feel more personal, and to encourage them to upload a profile photo (important for social features we planned to build). In addition we reorganized the side menu so that it's easier to navigate.
 
Built with  Framer

Built with Framer

 
 

The video we used to announce Dashboard 2.0 at all hands.

 
 
To ensure the new designs would suit all our brands we created a "light" & "dark" theme.

To ensure the new designs would suit all our brands we created a "light" & "dark" theme.

 

User Testing & Client Feedback

With the first cut of the new design completed it was time to run our first round of user testing (gym goers) & client feedback (club managers) sessions. We created 6 branded versions of the new dashboard design and launched into both user & client testing with the following goals:

  • To see if the new tabbed navigation & full width tiles enabled a user to find the feature they needed without being overwhelmed.
  • To have clients react to the new design and see whether it better exposes their branding and makes it feel like it's an application that truly represents their gym.
 
dashboard-framer.gif

What we learned

The Positive

  • The UI changes were overall received positively, especially the inclusion of the avatar on the dashboard.
  • Club Managers loved the new design and opaque tiles, they felt their brands were much better represented than in the previous design

The Negative

  • Club managers didn't like the tabbed navigation, they were worried that some of their key features would get lost
  • They didn't like the fact that any promotional tile (these are usually tiles that link to a webview containing an event or promotion for the club) would be placed in the secondary tab.
  • They were unhappy that rewards and referrals, features we upsell and charge more for, would be defocused and placed in the My Gym tab.

Beta Launch

Once engineering had completed a couple of sprint we had a version of the dashboard that was ready for a beta launch to select customers for further testing of the design, and to tease out any bugs that may have arisen.

Built with Framer

Built with Framer

What Was included in the MVP

  • Updated UI (except for the tab bar)
  • Backend support for the new dynamic feature framework, a completely rewrriten way for us to turn on, reorder and organize features per brand, something that used to take our implementation team 1-2 hours per brand they launched.
  • Full width 'Featured' tiles.
  • Avatar Profile photos.
  • Better internationalization support and multi-line handling for type in the tiles.
  • Improved color-linking guidelines for all the white-labelled apps.

Results of the beta test

  • Positive results to the style updates and side menu enhancements.
  • Club Managers loved the ability to feature tiles.
  • It was clear we still hadn't addressed the hierarchy issues of the dashboard.

Armed with these results we proceeded to the launch candidate, dashboard 2.0 as of the time of this writing was pending engineering bandwidth for a platform-wide launch.


Read this next: