Problematic
Design Challenge
How can we redesign a legacy clinical interface to reduce errors and cognitive load during treatment planning?
Project Overview
Redesigning a legacy treatment planning interface.
The existing application had visual inconsistency, deep navigation trees, and high cognitive load during treatment planning. Clinicians needed faster access to critical actions with fewer interaction errors. The redesign unified the experience into a modern, safe, and scalable product built on ReactJS and shadcn/ui components — reducing friction at every decision point in the clinical workflow.
Role
UX & Visual Design Lead
I led UX and visual redesign strategy, defined the new interaction architecture, and partnered with engineering to implement a ReactJS front-end using shadcn/ui components. My role spanned the full design process — from early sketches and low-fidelity concepts through to prototyping and clinician validation with radiation oncologists, physicists, and nurses.
Skills
Prototyping
ReactJS
UX Design
Design Systems
Figma
Accessibility
shadcn/ui
Digital Health
Ubiquitous experience
Ecosystem
Varian Medical Systems
Patients
Physicists
Nurses
Radiation Oncologist
Anesthesiologist
Developers
Existing Platform
Product Manager
Hospital Strategy
Persona
Radiation Oncologist
A radiation oncologist treats cancer using radiation therapy, developing personalized treatment plans while minimizing damage to healthy tissue.
Anesthesiologist
An anesthesiologist administers anesthesia, monitors patients during medical procedures, and manages pain to ensure their safety and comfort.
Patient
A patient is a person receiving medical care, treatment, or evaluation from healthcare professionals.
Design Process
01
Sketches
Low-fidelity interface maps to reorganize information hierarchy, define screen priorities, and simplify treatment planning paths.
02
Concepts
Iterated on two interaction concepts, then built wireframes for patient setup, catheter placement planning, dose optimization, and validation checkpoints.
03
Figma Prototype
Delivered a clickable end-to-end prototype in Figma to simulate real planning scenarios and validate basic interactions with clinicians.
04
Reactjs Prototype
Delivered a coded prototype in ReactJS to simulate the communication between different devices in different rooms in real time and validate the architecture, font size, interactions and responsive design constraints.
Figma Prototype
Reactjs Prototype
