Dynamic zones + cycle changing biomarkers
Company: InsideTracker
Overview​
​
Background
InsideTracker's ranges (aka zones) are used to inform the user what the bounds are of "normal", "high", "low" and "optimal". The zones are calculated based on various pieces of user information which may change over time such as age, ethnicity, activity levels, cycle phase, and menopause status.
​
Prior to the project, InsideTracker had no way of showing users how their zones might change from test to test, for instance what is considered "normal" for LDL Cholesterol may change as you get older. This problem came to the forefront when the company added in Estradiol and Progesterone biomarkers which have zones that change daily throughout a female's cycle. In other words, what is considered normal Estradiol levels during ovulation is very different than normal levels for during a period.
​
The challenge
Design the best way to communicate to users how their zones may change over time for both the cycle changing biomarkers (i.e. Estradiol and Progesterone) as well as the other biomarkers which may evolve due to changes in age, or activity levels. The solution should involve a combination of data visualization, and user education.
​
The team
I was the lead and sole designer and worked alongside a Product Manager, a team of researchers, and a team of engineers.​
​
The solution
I discovered through design explorations, and user research that the "cycle changing biomarkers" (i.e. Estradiol, Progesterone) required slightly separate data visuality solutions from the other biomarkers with dynamic ranges. Cycle changing biomarkers required a line chart which plotted the results solely based on zone (i.e. "optimal", "normal" as opposed to numeric value), while the other biomarker types maintained the numeric values on the y-axis. For both types of biomarkers, I included a "My zones over time" module which focuses specifically on visualizing and explaining through text how their ranges may shift over time.
Cycle changing biomarkers
E.g. Estradiol, Progesterone
Other biomarkers with dynamic ranges
E.g. Calcium, GGT, SHBG
Starting point​
​
For this work, I leveraged the recently updated biomarker detail pages as a kicking off point.
The detail pages included a "Latest" tab presenting the user's most recent result alongside a population graph, allowing users to visualize how their results compare to those of similar InsideTracker users. The history tab showed a trend chart with the zone breakdown in the y-axis. Further down the page were more education and explanations about the biomarker and their specific results. ​
​
I understood that the dynamic zone visualizations had to be effective in displaying both individual results and trends across multiple results
Cycle changing biomarker options​
For the cycle-changing biomarker options, I needed a method to visualize how the zones evolve throughout a cycle while also being able to illustrate result trends between multiple data points. I explored four options for visualizing how the ranges may change over time, which I brought into testing. I referred to the options as follows:
​
-
Line chart (controlled range) - this option retained the current line chart visualization but controled for changes in zones between results by plotting the "result sorting" (i.e., normal, optimal, high, low) on the y-axis rather than by numerical value.
-
Horizontal bar chart - this option involved displaying results using a horizontal bar chart for the zones and a dot to represent the most recent result. For showing trends, I stacked multiple horizontal bar charts on top of each other.
-
Line + horizontal chart - this chart was a combination of the line chart with the controlled ranges, with a horizontal bar chart below. Clicking on a previous result would update the zones on the horizontal bar chart below.
-
Vertical (stacked) bar chart - Similar to the horizontal bar chart option, this option displayed the bars side by side with a consistent y axis.
​
Note: Each option also included a text takeaway at the top, which I included to support the data visualizations below.
Winner: line + horizontal
​
I then ran user research testing and determined the following takeaways for each chart option:​
​
-
Line chart (controlled range) - users felt the line chart was the easiest chart for visualizing trends, but did not appreciate that the chart was missing numbers on the y-axis.
-
Horizontal bar chart - users felt that the horizontal charts had the clearest visuals for viewing the changing in zones across cycle phases, but felt that it was much harder to see trends between results.
-
Line + Horizontal chart - this option was viewed as the "best of both worlds", offering the advantage of observing trends from the line chart and the ease of visualizing how the zones change over time from the horizontal chart.
-
Vertical (stacked) bar chart - this option was voted the least favorite by most users; they found the chart overwhelming, confusing, and "ugly" to look at.
Other biomarkers with dynamic ranges​
For the non-cycle changing biomarkers, I explored various approaches to visualize how the zones changed over time. Unlike the cycle-changing biomarkers, these biomarkers didn't undergo drastic day-to-day changes and instead experienced smaller variations over time. I investigated methods to depict these zone changes while maintaining consistency with the recently updated charts. I narrowed down the options for testing to the following:
​
-
Static - this option mirrored what had been displayed in the app up to this point, showing only the most recent zones in the trends chart. The one update to the existing chart would be that clicking back to previous results would update the zones on the y-axis.
-
Dynamic - the dynamic option visualized using the background colors how the "optimal" and "normal" zones changed from test to test, with the "high" and "low" zones implied.
-
Dynamic + - I introduced the dynamic+ chart option after the first 4 participants found both the static and dynamic options confusing. The dynamic+ chart visualized changes in the zones between test dates using background colors for all the zones.
​
Winner: Dynamic +​
​
During user testing, I observed that users encountered significant difficulty in grasping how their zones were changing with the 'static' and 'dynamic' options. However, upon introducing the 'dynamic+' option, the idea that zones can change between tests, "clicked for" most users, and the majority expressed a preference for this option.
Creating the final designs​
​
Based on the results from the the research, I made the following updates to the biomarker details pages:
​
1. Line chart - I determined that for all biomarkers the primary chart would continue to use the line chart at the top. However, for the cycle-changing biomarkers, we would control for the frequent range changes by plotting the result by zone (i.e. high, low, normal, optimal) vs. by numeric value.
​
2. Horizontal chart below - introduced a horizontal bar chart beneath the line chart, allowing users to better visualize their zones for each result. To minimize redundancy between the "latest" tab and the "history" tab with a horizontal bar chart, I consolidated the tabs and added the population chart as a module further down the page.
​
3. Chart takeaway - I added a chart takeaway to the primary line chart. Through testing, I had determined that the text helped users better understand the charts below it.
​
4. "Your zones over time" module - I added a new module to the page to educate users on how their zones change over time. The module included text and the "dynamic+" data visualization.
I created more specific versions of this module for Estradiol and Progesterone, breaking down how the biomarker ranges change throughout menstrual cycles."
Final designs​
​
To finalize the designs, I adapted the designs for the InsideTracker web experiences, and then handed off the designs to the engineers.
Future iterations should explore further reductions in reliance on color to enhance chart accessibility for users with color blindness, particularly in the "your zones over time" data visualization.
​
Cycle changing biomarkers
E.g. Estradiol, Progesterone
Other biomarkers with dynamic ranges
E.g. Calcium, GGT, SHBG
