ElioDesigning a guided workflow for clinical notes.
AI-assisted drafting, with clinicians in control. A focused workspace for turning consultation details into structured, editable notes.
My role: Product design & frontend implementation
The project at a glance
The project
at a glance.
I owned Elio’s design and frontend implementation, connecting the structure of the workflow with the interface clinicians use to move through it.
- Product
- Clinical documentation MVP
- Users
- Clinicians in clinic or field settings
- My contribution
- Product design and frontend implementation
- Tools
- Figma and Angular
The problem
Documentation under time pressure, with information spread across templates and systems. AI drafting added another need: a clear way to inspect and edit its output.
The response
A section-by-section note builder. Capture the facts, generate a draft, review the text, and confirm what belongs in the final note.
The delivered work
Design and frontend implementation of the guided workflow, from initial context through review and final-note handoff.
Make the
next step clear.
Clinicians already know what they need to document. The interface supports that expertise by giving the work a predictable structure.
Short sessions, interruptions, and tablet use shaped the brief. Rather than one large editor, Elio divides the note into familiar clinical sections with a defined task at each stage.
Start
Enter minimal clinical context, such as age, sex, and the chief complaint.
Sections
Capture relevant facts and generate a draft for each clinical section.
Review
Edit the generated text and confirm what belongs in the note.
Finalize
Assemble the sections into a complete, editable clinical note.
Export
Copy or export the note for use in an existing clinical system.
Within each section
Capture Draft Review Confirm
A workflow
built around review.
Keep input and draft distinct
Clinician-entered facts and AI-generated prose have different roles. The workflow separates capture from drafting so clinicians can inspect what the system produces before confirming it.
Keep each step focused
Progressive disclosure gives each screen a narrower purpose. The repeated interaction pattern helps clinicians track what they entered, what was drafted, and what still needs review.
Keep the clinician in control
Review is an explicit step, and the final note remains editable. The clinician decides what to include rather than treating generated text as a finished record.
Fit existing workflows
Copy and export provide a handoff to existing clinical systems. This gives the MVP a clear endpoint without requiring deep electronic health record integration.
From interface
to frontend.
I carried the workflow from design into frontend implementation. My contribution covered both how clinicians move through the task and the interface supporting that sequence.
Figma supported the design work; the frontend used Angular. The broader project used Fastify and TypeScript on the backend.
The interface brings clinical information into discrete sections, with editing actions beside the text they affect. The supplied screens show the intake structure and sectioned note output.
Explore the project repositoryDelivered work.
Next questions.
Elio brought together a guided clinical-note workflow, repeatable interface patterns, and frontend implementation. The design gives capture, drafting, and review their own place in the process.
The next validation step is 5–8 sessions with clinicians using realistic scenarios, tracking time to first draft, edit rate, completion, and confidence. These are proposed sessions; measured time savings, clinical accuracy, and adoption have not been established.
Minimal patient context and avoiding direct identifiers were design constraints. The project is presented here as design and implementation work, without a claim of clinical safety or privacy certification.