Scoring Health

Simplifying important health information

Lead Designer at WellnessFX


The primary mission of WellnessFX is to help people better understand and improve their health. Many people who get blood tests through WellnessFX have a basic awareness and interest in their health, but they look to WellnessFX to help them contextualize and make sense of their results.

One of the simplest, but most impactful ways WellnessFX does this is by providing better visualizations and presentations of personal blood test results. People that have used the service are emphatic about how much they love the clarity and simplicity of their test results.

Typical lab printout vs. WellnessFX visualizations

Making Health Information More Meaningful

Displaying test results with associated risk or reference ranges is a requirement for most labs, but this information does very little to contextualize the importance and meaning of those results. WellnessFX's goal is to provide a more progressive standard for health, not simply uphold the status quo, so overly emphasizing these lab-provided ranges made it difficult to present a more meaningful standard for test results.

My goal—especially with so much information to work with—was to make health information more meaningful and approachable. The specific challenge was to design a visual system that would preserve existing lab test information, and also provide a more prominent ‘health score’ for select biomarkers and health areas, in order to convey more meaning about members’ test results.

Our hypothesis was that assigning certain tests (or biomarkers) with a numerical (100 point) score and a correlating color, would help give people an immediate sense of which test results to pay attention to first. If you see that your LDL Particle Count is 873 nmol/L, it would probably take a little digging to understand what the relative health context is. Seeing an associated score of 89/100 (where 100 denotes the lowest associated risk), matched with a corresponding color (green in this case), is easier to make sense of. And of course, the additional details and contextual explanations are still there for users to explore further if they want.

Adding context with a score value and color

Distinguishing Between 'Risk Ranges' and 'Reference Ranges'

Along with test results, labs provide risk ranges and reference ranges. Risk ranges are typically grouped as High Risk, Moderate Risk, and Low Risk, and the more agnostic reference ranges are often Normal and some form of Non-normal (like High or Low). Because both the risk ranges and reference ranges were being colored with the same red, orange, and green, it gave the misleading implication that they had the same health significance and created the impression that non-normal ranges are necessarily bad (which they're not). By using more neutral colors for them, the results remain more faithful to the significance they're meant to convey.

Clarifying meaning with color

Prototyping with real data

Due to the complexity and variation of data sets and combinations, I still began with static visual comps, but then with the help of our engineering team, I helped create dynamic versions so we could more easily preview actual user data. While prototyping with ‘dummy’ data or static screens can sometimes be sufficient, this was a case when it was particularly helpful to see designs rendered with actual user data. Being able to see a wide variety of actual test results helped expose a number of edge cases and less common scenarios (that are harder to guess at) so that we could refine how we presented certain pieces of information.

Internal Feedback and User Testing

Introducing something as significant as scores about one’s health has a variety of experience implications for our members, so we conducted focused user tests with existing users to gather feedback during the design process. I helped to identify test criteria for our research and we got a lot of great feedback about what things people found helpful as well as things they found confusing. We were subsequently able to adjust designs and our rollout strategy to accommodate these learnings.

Contextualizing with Color First

One thing we discovered was that while people found the additional information valuable, many felt that the additional numbers were overwhelming when presented all together. To address this, I tucked the score away and left the coded color visible. The color still aids quick scanning, and the numerical score only slides out when a user mouses over to focus on it.

Reduce clutter by hiding numerical score values until the user hovers

Scaling Back Color Detail for Legibility

I initially tried using a fluid spectrum of values so that each score value was represented by a unique color. I thought that the increased fidelity would help convey more meaning. When we generated cases representing uncommon combinations though, I realized how much less intuitive certain colors became in relation to each other. The additional detail can be justified in more focused contexts, but becomes confusing when viewing different results next to each other, so I scaled the values back to limited color ranges here.

Balancing detail with readability

A More Nuanced Detail View

In addition to making adjustments for the summary views—recoloring specific markers for Health Scores, and neutralizing color for those without a risk range or score—I also updated the detail view to display score as a prominent color, while keeping reference ranges accessible. In the example case below, the marker results are graphed with a neutral reference range (on the left side of the chart), and a WellnessFX score (on the right). This example represents an unusual case by combining a score assigning value with a neutral reference range, but it illustrates the new ability to shift away from relying exclusively on lab ranges and begin introducing more progressive standards for health.

A detail view of results displaying values, lab reference ranges, and WellnessFX scoring