Skip to content

MedViz Color Legend Redesign

Introducing a systematic approach to color-based data clarity.

MedViz Color Legend Redesign
My Role
UX/UI Designer

Color System Design, Interaction & UI Design, Data Visualization Refinement

Team

Huan He, Research Scientist
João Cardoso, Senior Software Engineer

Timeline & Status

2 months, launched

Overview

MedViz is a biomedical literature visualization platform that maps millions of research papers by topic and year. I redesigned its color legend to solve two problems: weak contrast between data categories made patterns hard to read, and an outdated palette undermined the tool's credibility. The result is a high-contrast, modern color system that makes year-specific trends immediately legible across all MedViz visualizations.

Highlights

A revamped legend color system that enhances contrast, readability, and modernity, ensuring a clearer and more visually intuitive data exploration experience.

Before Original MedViz color legend
Original color legend — low contrast, outdated palette
After Redesigned MedViz color legend
Redesigned color legend — high contrast, rainbow timeline logic

Enhancing Data Clarity: A Modernized Color Legend for MedViz

Original MedViz color legend
1.1 Original MedViz color legend.

The MedViz color legend had two core problems: low contrast between data categories made the visualization hard to read, and an outdated palette undermined trust in the tool's credibility. This project set out to fix both.

radio_button_checked
visibility_off

Weak color contrast made it difficult to distinguish data categories — particularly the purple shade, which blended into neighboring colors.

history

The palette felt flat and dated — low saturation, no visual hierarchy — making the tool look less reliable than it was.

radio_button_checked

Inspired by Nature Journal 150 for a modern and high-contrast color scheme.

radio_button_checked Research and Design Journey
  1. Problem IdentificationThe original colors had weak contrast, looked outdated, and didn't effectively differentiate data categories.
  2. Color ResearchStudied modern data visualization principles, referencing Nature Journal 150 for inspiration.
  3. Design & IterationBuilt an initial high-contrast palette, then iterated twice — first to fix pink dominance from data distribution, then to align colors with rainbow timeline logic.
  4. Launch & ReviewDeployed across MedViz visualizations. User testing confirmed improved readability and data clarity.

Beyond Aesthetics: Designing a More Intuitive and Data-Driven Color System

01

Initial Design: Building the New Color System

Goals
  • palette Create a tech-forward visual style.
  • contrast Ensure each color contrasts well against the #000000 background.
  • scatter_plot Emphasize the increasing data density from 2000-present in cancer immunotherapy research datasets.
Initial color legend design
2.1 Initial color legend design.
02

First Iteration: Enhancing Contrast and Harmonizing Tones

Issue with Initial Design

Did not account for the data distribution, leading to an overly pink-dominant appearance.

Design Strategy
  • Cool tones (green, blue, purple): Represent earlier data.
  • Golden yellow (1990-1999): Marks a transition period.
  • Warm tones (orange, pink): Used for recent data.
  • Green and deep purple: Act as buffer colors to prevent warm colors from clustering too closely.
  • The final pink shade was tweaked multiple times to balance a modern, vibrant, and high-contrast feel.
Refining the 2020-Present color — multiple pink shades tested
2.2 Refining the 2020-Present Color: Tested multiple pink shades for better contrast, balance, and modernity.
03

Second Iteration: Aligning with Timeline Color Logic

After internal discussions, the team decided to rearrange the colors in a rainbow-like order, following a common timeline visualization logic where earlier years are represented by cooler tones (e.g., purple, blue) and recent years transition into warmer tones (e.g., red, orange).

Second iteration — rainbow color scheme across visualizations
2.3 Second iteration: A high-tech color scheme for clearer year-specific data across formats.
sentiment_satisfied
User Feedback

Testing confirmed that the new color legend improved data readability, making year-specific patterns clearer across different visualizations.

Contrast & Readability Matter

Improving color contrast significantly enhanced data clarity, making patterns more distinguishable across datasets.

Data Distribution Awareness

Initial designs overlooked how data volume varied by year, which affected visual balance (e.g., overly pink-dominant).

Rainbow-Based Color Logic Works

Aligning the color order with timeline visualization conventions (cool to warm tones) improved intuitiveness and consistency.

Versatility Across Visualizations

The refined color system adapted well to different dataset formats, ensuring clarity regardless of visualization type.

Iterative Testing is Key

User testing validated that the final color scheme improved readability without sacrificing the modern, high-tech aesthetic.