top of page

Web dashboard 

Company: InsideTracker

Overview​

​

Background

The goal of the Web Dashboard was to help InsideTracker customers by providing a centralized location to view important information, and take action related to their product. The previous dashboard sat on an outdated tech stack where adding any new elements would break the entire experience. It was also rated fairly poorly (6/10) in users satisfaction. 

​

The challenge

Design a modular dashboard that improves upon the current experience, surfaces key information, and increases sales of InsideTracker products such as blood and DNA tests, and InnerAge analysis.

​

The team

As the lead and sole designer on this project, I collaborated closely with a Product Manager and a team of engineers.​

​

The solution 

I designed a modular dashboard focusing on bubbling up the key InsideTracker experiences to a "one stop shop" home page. The updated designs achieved a 33% increase in user-reported satisfaction with the web experience.

 

​

Dashboard requirements​

​

In addition to improving on the current dashboard, the following user tasks were also required for the updated designs: 

​​

  • Activate a test - allow users to activate a test from the Dashboard.

​

  • Repurchase - notify users when it’s time to purchase a new test.

​

  • Upsell - upsell DNA and InnerAge from the Dashboard.

​

  • Action Plan - provide recommendations on the web (was previously only available in the app)

​

  • Pre-results - guiding users through the process of scheduling a test, navigating the lab experience, to receiving and interpreting their results.

​

Card types.png

​

Components

​

Based on these requirements, I created the following high level components: 

​

  • Metric cards - cards that display a snapshot of the user's results and act as an entry point for the full results pages. The empty states of these cards would be leveraged for upsells, encouraging users to explore additional data inputs, such as DNA

​

  • Action plan card - cards that showcase InsideTracker's personalized recommendations for how a user might improve their blood results (i.e. Try a Vitamin D supplement). The action plan card includes a "check-in" feature, allowing users to indicate completion of their actions.

​

  • Dynamic space - a versatile area dedicated to communicating important information to users. Here, users are alerted to available tests and guided through the step-by-step process of utilizing them. This dynamic space also functions as a timely reminder for retesting, ensuring users stay proactive in their health journey. 

Design iterations

​

I iterated on different layouts for how the different components could be arranged. I then created different variations on the cards themselves. At each step, I reviewed with the product and design team for feedback. Once I landed on a promising design, I set off for user testing to validate the usability of the proposed dashboard. 

​

Layouts.png
image.png
image.png

User research testing​

​

Study Overview

​

I conducted user research on the new dashboard using a clickable prototype. This moderated study engaged 13 InsideTracker customers and focused on evaluating the usability of key user tasks, including:​

​​

  • Buying and using a test

  • Understanding next steps for their test 

  • Navigating to their results

  • Buying DNA

  • Checking in with their action plan

​

Prior to showing the designs, I prompted users to rate their current web experience. After navigating the new dashboard, I had them rate their web experience with the updated dashboard

​

Study results overview

Users successfully navigated and completed all primary tasks, validating the usability of the proposed designs. The current web experience received a rating of 6/10, while the updated web experience gained an improved rating of 8/10. Though users expressed increased satisfaction with the new designs, they gave the designs an average of 8/10 (rather than a 10/10) as there were still aspects of the broader web experience outside of the dashboard scope that they were still dissatisfied with. 

Dashboard (some empty cards).png

Current dashboard 
(6/10 rating)

"Hard to navigate"

"Nothing to write home about"

Test.png

New dashboard
(8/10 rating)

"Easier to navigate"

"Not super intuitive"

"More information & more to explore"

"Felt more intuitive"

Additional findings

 

Some additional findings that impacted future iterations of the design:

​

  • Retest banner "ad" - users expressed concern that the banner prompting them to retest felt too much like an "ad" and, therefore, should not be prominently positioned at the top of their dashboard. This insight suggested that anything that might feel like an "ad" should be more subtly and strategically placed.

​

  • Empty State Cards as Upsell - users did not find the empty state cards, serving as an upsell opportunity, bothersome. This confirmed that the empty state cards could be used as an upsell.

​

  • Visibility of "View All" Buttons - users had a hard time noticing the "View all" buttons as the black text blended in too much with the card. I therefore needed to increase the visibility of the buttons to ensure users could navigate to the result pages.

​

  • Understanding Terminology - users experienced confusion with terms such as "genetic risk" and "genetic potential." However, contextualizing these terms e.g. "You have a genetic risk for high LDL cholesterol," improved user comprehension. 

​

image.png
image.png

Post research iterations​

 

Following the insights gathered from the research, I made several key iterations to improve the dashboard: 

​

  • Retesting Banner Replacement - to address user's concern with the retest banner feeling like a giant "ad", I removed the "banner" and instead focused on leveraging the empty states to upsell users on new features.

​

  • "View All" Visibility - to address user difficulty in noticing the "View All" buttons, I updated the button to a blue link. The choice of a blue link helped strike a balance between making the button stand out without introducing visual clutter that might compete with the data visualizations in the results.

​

  • DNA Card Refinement - to address users's confusion with the terms "genetic risk" and "genetic potential" in isolation, I updated the DNA card to focus on specific DNA insights which allowed the terms to be used in context.​

​

image.png
image.png
image.png

Additional elements

​

As the excitement for the dashboard grew internally, Product requested additional elements such as the addition of dynamic cards. These cards would offer users a scrollable interface to access articles, podcasts, tips & tricks, and other important information. I also used this space as a way to reward users for checking into the action plan.

Gallery.png

Documentation & supporting screens​

 

Next up was to document all the different card states for the engineers to build out (i.e. with data, no data, upsell, etc.). The dashboard designs also required new screens as well as updates to current screens to support the experience. For instance, adding the action plan card also meant adding in pages for users to learn more about their recommendations, and pages for them to be able to edit their goal.​

​

Data cards.png
Screenshot 2023-11-30 at 3.04.24 PM.png

Mobile experience​

 

In addition to the desktop version, I tailored the designs to translate into a mobile web experience. The modular card layout, proved to be versatile and made it easy to translate to the mobile web. 

​

One notable adaptation for the mobile web was the introduction of a tab functionality, allowing users to switch between metric cards (e.g., results) and the action plan. This mobile-specific feature accommodated the inherent differences in screen real estate and navigation on smaller devices. Although separate testing for mobile wasn't explicitly conducted, the designs were created to ensure a cohesive user experience across both desktop and mobile platforms.

Dashboard_mobilenew-1.png
Dashboard_mobilenew-2.png
Dashboard_mobilenew.png

Final designs and next steps​

​

The designs were finalized and are in the process of being built out by the engineering team.

 

Moving forward this dashboard should focus on ways to make it even more dynamic and engaging for the user. Additionally, future work streams should explore whether this dashboard should be included in the InsideTracker mobile app. Including it would further align the web and the app experience; however, the app has the potential to become even more of dynamic space for users and therefore might benefit for more of a "feed" like experience. 

​

Desktop_smaller.png
Mobile dashboard 2.png
Dashboard3.png
image.png
bottom of page