NavigateOnc - Real-time patient tracking web application
NavQuality is a quality management platform for radiation oncology teams to manage equipment QA, compliance, and documentation across clinics. 🔴 LIVE
Role
Duration
Tools
Project Type
Project Overview
NavQuality is a comprehensive quality management platform built for radiation oncology departments, designed to help medical physicists and clinical staff manage equipment QA, compliance, and documentation across multiple clinics, all from one connected system, replacing scattered spreadsheets and manual tracking.
Who it's for: Medical physicists, QA coordinators, and clinic administrators responsible for keeping radiation therapy equipment compliant, operational, and audit-ready.
Problem Statement
Radiation oncology departments manage equipment QA, compliance, and documentation manually across scattered spreadsheets and disconnected systems, leaving no central visibility into what's due, overdue, or non-compliant. This creates compliance risk, delayed approvals, and costly downtime that could otherwise be tracked and prevented.
Most existing radiation oncology QA tools focus on a single function (only equipment inventory or only document management) rather than unifying QA, inventory, and compliance in one platform
Legacy systems often lack real-time dashboards, forcing physicists to manually compile downtime, compliance, and QA status reports
My Role
I worked as the sole UX/UI Designer on NavQuality, owning the design process end-to-end across all four modules: NavQA, IMS, DMS, and MSN.
Led research, including competitor analysis and understanding physicist workflows across QA, inventory, and compliance
Defined the information architecture and navigation structure connecting all four modules into one cohesive system
Created low-fidelity wireframes and validated core flows (QA tracking, document approval, machine lookup) before visual design
Designed the final high-fidelity UI, including the design system (color, typography, components) reused consistently across modules
Built and tested an interactive prototype covering cross-module user journeys
Iterated on the design based on prototype testing feedback, refining navigation and status visibility
Tools used: Figma, FigJam
Research & Discovery
Research focused on understanding the daily friction medical physicists and QA teams face when managing equipment compliance across multiple clinics. Findings confirmed that fragmented tools and manual tracking were the biggest barriers to staying audit-ready and minimizing equipment downtime.
Key Points
Physicists were relying on spreadsheets and email trails to track QA due dates, causing missed or delayed activities
Equipment records (maintenance, warranty, specs) were stored across multiple disconnected sources, slowing down day-to-day decisions
Document approvals lacked a clear audit trail, making compliance reviews time-consuming
Ideation
With research findings pointing to fragmentation as the core problem, ideation focused on how to unify QA, inventory, documentation, and machine monitoring into one coherent system without overwhelming users with complexity.
User Flow
A user flow maps out the steps a user takes to complete key tasks within the platform. For NavQuality, I focused on making core actions scheduling QA, checking equipment status, and approving documents fast and predictable across all modules.
QA Activity Flow
User logs in → navigates to NavQA → selects "Track Activity" or "Schedule Activity"
User filters by clinic, status, or category → locates the relevant QA activity
User views activity details (machine, responsible person, due date) → updates status or takes action
Equipment Lookup Flow
User navigates to IMS → searches or selects a machine from inventory
User views machine details (specs, maintenance schedule, warranty) → checks or prints QR code for on-site identification
User reviews associated machine documents if further verification is needed
Document Approval Flow
User uploads or navigates to a document in DMS → reviews document details and comments
Document routes through L1 → L2 → L3 approvers sequentially
Each approver reviews and approves/rejects → status updates to "Published" once fully approved
Machine Status Monitoring Flow
User navigates to MSN dashboard → filters by clinic or machine
User reviews downtime hours, patient cancellations/reschedules, and staff overtime
User identifies problem machines → cross-references with IMS or NavQA for follow-up action
Wireframing
I created wireframes for 18 key screens, starting with low-fidelity sketches and iterating to mid-fidelity grayscale layouts. Each round incorporated feedback from internal reviews and 2 rounds of guerrilla usability testing.
This structural groundwork made the multi-module platform feel consistent and predictable, even before color, branding, and final UI polish were applied.
Visual Design
Design Language
I used a deep indigo/purple sidebar paired with a teal accent color to create clear visual separation between navigation and content, while keeping the overall palette restrained and professionally appropriate for a tool used in regulated medical environments.
Prototyping & Testing
Once high-fidelity screens were designed, I built an interactive prototype to validate how physicists and QA teams would actually navigate NavQuality across its four connected modules.
What I Prototyped
I linked together the core cross-module journey starting from the Dashboard, drilling into NavQA to track a QA activity, jumping to IMS to check the related machine's details and QR code, and following a document through the DMS approval flow (L1 → L2 → L3) to publication into a clickable, end-to-end experience.
Iterations & Refinements
Iteration 1: Wireframe review showed status wasn't visually prioritized and clinic context got lost across modules. I added color-coded status tags and a persistent clinic filter throughout.
Iteration 2: Prototype testing revealed too many steps when jumping between modules (NavQA to IMS), and the active approval stage (L1–L3) wasn't clear. I added direct cross-module links and a highlighted state for the active approval step.
Final Design
The final design of NavQuality brings together research, iteration, and visual design into one connected platform for radiation oncology quality management. Every screen was built to give physicists fast, color-coded visibility into QA status, compliance, and equipment health across clinics. The result is a consistent, scannable system that turns four separate modules into a single source of truth.
Persistent sidebar navigation and clinic filters keep users oriented across NavQA, IMS, DMS, and MSN
Color-coded status tags (Completed, In Progress, Cancelled, Approved, Rejected) for instant scanning across tables and cards
Structured QA activity tracker with due dates, responsible persons, and filterable status views
Two-panel document approval flow with a clear, sequential L1–L3 sign-off trail
Machine detail pages combining specs, contact info, and QR-code identification for on-site use
Dashboard views with KPI cards and charts summarizing compliance, inventory, and downtime at a glance
Direct cross-module links (e.g., activity → machine detail) that reduce navigation friction between related tasks
Impact
NavQuality was designed to directly solve the fragmentation and manual tracking problems uncovered in research, and the design delivered measurable improvements against each one.
Unified four disconnected workflows — QA tracking, inventory, document approval, and machine monitoring into one consistent system, eliminating the need to switch between spreadsheets and separate tools
Reduced status-scanning time by replacing plain-text fields with color-coded tags across tables and cards, letting physicists spot overdue QA, rejected documents, or non-compliant equipment at a glance.
Lessons Learned
Designing NavQuality reinforced lessons about building for complex, regulated, multi-module systems.
Consistency is the real UX for platforms like this; reusing the same navigation, card, and table patterns across NavQA, IMS, DMS, and MSN did more for usability than any single screen's visual polish
Status visibility matters more than data density. Physicists didn't need every data point on screen at once; they needed to instantly see what's overdue, pending, or non-compliant
Cross-module flow is where real friction lives. Individual screens tested fine in isolation, but prototyping the full journey (QA → machine → document) is what revealed the actual navigation gaps
