Healthcare calculation & data-entry workflow

A healthcare calculation process that ran on dense spreadsheets — a working tool, but not one designed for the people completing it.

Turn spreadsheet-driven work into a responsive, accessible application — keeping the calculation logic intact while making data entry easier to complete on every screen size.

UX and UI engineering: workflow design, responsive layouts, accessibility aligned with WCAG AA, and React implementation of a modular interface.

1. 01

   Decision

   Modules, not one long sheet.

   Why it mattered

   Breaking the spreadsheet into modular steps made each part of the calculation readable on its own — and responsive by construction.

2. 02

   Decision

   Accessibility as structure.

   Why it mattered

   Labels, input order and focus were designed in from the start, so the application aligned with WCAG AA without a late audit pass.

3. 03

   Decision

   Build it in the browser’s terms.

   Why it mattered

   Working in React kept layouts and states honest to how the application would really behave on each screen size.

• Spreadsheet familiarity

  ⇄

  Guided interface

  Trade-off

  Kept the calculation logic and the terms people knew, and changed the structure around them.

• Data density

  ⇄

  Small screens

  Trade-off

  Grouped inputs into modules that reflow, instead of shrinking a grid.

1. Spreadsheet
2. Modules
3. React

I turned the calculation rules into modular flows and prototypes, then worked on the React frontend so design intent held up in production.

The spreadsheet already held the logic. The work was giving that logic a structure people could move through — the speed followed.