Data Visualization · UI/UX · Information Architecture
February 2026

Color Me Healthy Dashboard

ROLE: UX/UI DESIGNER

This interface had to balance very different stakeholders and their objectives: the patient-sick kids trying to manage chemotherapy side effects, the clinicians- trying to ascertain if they need to adjust treatments during short appointments, researchers that need to process large meta-data sets to inform their recommendations overall.

UX design

UI systems

My process for these UI systems was to start with the end-user goals, like fostering a growth mindset, encouraging non-linear exploration, and building community, and work backward.

Each element was not an isolated component, but a deliberate design choice engineered to guide users toward the specific behavioral outcomes the application was built to achieve.

Timelines Organization

  • Easy Data Interactions:
    Clickable toggles for timeline and scale. For more deep investigations of long-term trends for research and monitoring.
  • Fast Call to Action:
    ‍
    Direct comparison for changes of symptoms reported by patient with visual emphasis on what must be addressed with today's dissection.
time tied graphics showing timeline controls, all symptoms by day, and 2 graphics of symptoms as bar graphics using the symptoms and the data notes, so it is really easy to see what severity has the most reports.

Trends Organization

  • Body Overview:
    ‍
    Clickable body parts that show specific patient concerns for quick orientation of new clinicians assigned, without making the patient have to repeat everything again.
  • Mental Model Variation:
    ‍
    Different data views settings for clinicians to optimize for their different specialties and appointment objectives.
  • Data View Variation:
    ‍
    Learning Disability friendly by providing visual mode and text mode of important trends for different thinking preferences.
group of panels for local trends, showing a heatmap of a body diagram, text and bar descriptions adding details to the trend patterns.
Discovery

Gestalt and Shape Language Heuristics

I started off with 3 directions for the story categories. Left was closets to their original design if they wanted to keep that direction, middle more visual and modern, right minimal for high dense info. This story structure was important to the client so I made the UI show that with hierarchy and the UX logic flow to and from major story beats.

Shape Language UX

The most important problem to solve for this project was making sure the data was easy to read accurately at low and high density scales. I started by playing with different shapes to see what kind of patterns the users were reading most accurately on instinct. This is the kind of mind set they would need to read the graphs with higher risk of alarm fatigue.

graph of shapes with 4 versions each showing a shape getting smaller in different ways either starting with square or circle.

Value Scan Contrast UX

The first failure in their original prototype is that they used poor contrast for red-green colorblind with no text support. So I changed the logic to 'the lighter the color the less sever' and text contest for each entry.

black and white of symptoms graph showing that as a symptom gets worse it also gets darker in value.
UX design

UI systems

Bar Graphs

Because the patient can leave felids empty, the bar graph would show their inputs without the illusion of trend lines forming from entered and unentered data

bar graph with horizontal line in middle and red rectangles going dow and green rectangles going up from line.

Line Graph

They started with these but the intuition read was too inaccurate for daily use case.

line chart with 2 lines showing how hard it is to read trends with this kind of graph.

Trend Arrow + Descriptive Text

This was requested by users but we had iterate the algorithm that would average the trends without cutting too many details.

2 symptoms as text graphic with improving or worsening text next to arrow pointing down and up.

Spatial Heatmap

Direct comparison for changes of symptoms reported by patient with visual emphasis on what must be addressed with today's discussion.

body 2d graphic with body parts blocked out by color darkness showing which parts had the worst symptoms.

Radar Diagram

I used this as a baseline in early drafts but it was removed because many clinicians did not have high data literacy with this graphic.

spider/radar chart with 5 symptoms over 3 time phases, showing how the group of symptoms are changing over time.