Skip to content

MedViz Temporal Distribution Bar

Redesigning the timeline bar for clarity, interactivity, and efficiency.

MedViz Temporal Distribution Bar
My Role
UX/UI Designer

Interaction & Usability Design, Data Visualization Refinement, Iteration & Feedback Process

Team

Huan He, Research Scientist

Timeline & Status

1 month, handed off for implementation

Overview

Redesigned the Temporal Distribution Bar to improve visual clarity, spatial efficiency, and usability. The new design ensures that users can analyze temporal trends more intuitively while integrating seamlessly into the MedViz ecosystem.

Highlights

A redesigned temporal distribution bar that enhances clarity, interactivity, and efficiency, making timeline-based data exploration more intuitive.

MedViz Temporal Distribution Bar Overview
Problem Framing
Problem Statement
  • The original bar lacked visual hierarchy, making it difficult for users to interpret temporal data density at a glance.
  • Filtering interactions were not intuitive, causing drop-off during data exploration sessions.
Research Questions
  • How can we surface data density without overwhelming the view?
  • What interaction pattern best supports range selection?
  • How do color and spacing affect scanning speed and comprehension?
Original temporal distribution bar
1.1 Original temporal distribution bar.
Design Process & Iterations

How the Design Evolved

01

Initial Design: Translating Insights into the First Concept

How can we create a visually more appealing bar chart?
Used rainbow gradient colors along the timeline, following the new color legend.
How can we optimize space usage?
Mapped the time range selector directly onto the timeline bar, similar to video editing dragging handles.
Are there any additional features that improve usability and user flow?
Introduced Quick Select to allow users to easily pick common time ranges.
02

First Iteration: Improving Visibility & Selection Flow

  • Added collapse icon to minimize the bar if users need more space.
  • Thickened the time range selector border for improved visibility.
  • Added a Clear Selection button to make deselection easier (instead of requiring users to re-click their selected time range).
First iteration design comparison
1.2 First iteration — collapse icon, thickened selector border, and Clear Selection button.
03

Second Iteration: Enhancing Visibility & Accessibility

  • Refined user flow to keep the rainbow timeline visible.
  • Checked and adjusted colors to meet AAA contrast standards, ensuring better readability across all components.
1.3 Second iteration — refined user flow with rainbow timeline preserved and AAA contrast adjustments.
sentiment_satisfied
User Testing

Testing confirmed that the refined user flow improved usability, ensuring the rainbow timeline remains visible and interactions feel more intuitive. All 3 participants completed range selection in under 10 seconds, with satisfaction improving from 2/5 to 4.3/5.

Key Takeaways
Preserving Data Context Enhances Usability

Keeping the rainbow timeline visible throughout interactions helps users better track temporal trends.

Optimizing Space Without Compromising Clarity

The collapsible bar ensures flexibility, allowing users to focus on key insights while maintaining easy access to controls.

Accessibility Matters

Adjusting color contrast for AAA compliance ensures better readability, making the visualization usable for a broader audience.

Iterative Testing Drives Better Design

User feedback helped refine selection logic, leading to a more intuitive and efficient interaction flow.