Healthcare SaaSWeb App (Desktop & Mobile)Micro-animations

Alveolar

Redesigning the clinical screens of a dental practice platform

Alveolar is software that dental clinics use to manage their patients. Staff keep patient records, visits and treatments in it.

The product already had everything a clinic needs. The problem was where things sat. Information about one patient was spread across separate screens, so a doctor had to go looking for something that should have been in front of them.

RoleUI/UX Designer
CompletionNovember 2025
PlatformDesktop and Mobile
Design focusClinical workflows, patient context and mobile communication

A unified patient profile designed to keep clinical information and visit actions within reach.

02

My Role

Designing the clinical screens

I joined a product that already existed. There was research, there were early wireframes, and the structure was set.

My work was the interaction design, the visual design and the developer handoff. The screens in scope were the Visit Flow, Documents, Membership, Patient Notes and mobile communication. Some of those had a wireframe to start from. Some had none, and I designed those from scratch.

Early wireframes developed into a consistent component and interface system.

03

Key Decisions

Three places where a small change made a clinical task easier to finish.

Made it obvious when a treatment was added

A doctor writes a treatment plan during a patient's visit. They pick the teeth, enter the treatment, and press add. The entry then appears at the top of the list on the right.

ProblemThe entry appeared with almost no change on screen. A doctor pressing add could not tell whether anything had happened.
DecisionI moved the add button closer to the list, and gave a new entry a downward motion as it lands.
WhyA doctor should not have to check twice that something saved, especially with a patient sitting right there.

Adding a treatment plan entry, shown as it happens.

Tooth selection grid for choosing affected teeth

Selecting affected teeth before adding a treatment.

Attaching X-ray files while adding a treatment.

Made writing a prescription faster

After the treatment, the doctor writes the prescription. For each drug they set the dosage, when to take it, the duration, and the total quantity.

ProblemDay, noon and night were radio buttons, so each one took its own decision. And duration and total quantity sat apart on screen, even though one decides the other.
DecisionThe radio buttons became a switch. Icons replaced the words day, noon and night. And I put duration and total quantity next to each other with no gap.
WhyA prescription gets written between patients, so every extra field costs time.
Prescription section with switch, icons and grouped fieldsCurrent design
Prescription section with switch, icons and grouped fieldsPrevious design

Previous versus current Prescription design.

Made patient files quicker to find

A patient's file holds X-rays, lab reports, photos and consent forms. A doctor often needs one of them in the middle of talking to the patient.

ProblemThis screen had no wireframe, so there was nothing to follow. I had to decide the whole structure myself.
DecisionSorting, filtering by visit or by type, folders and upload all sit at the same level. Nothing is nested inside anything else.
WhyStaff need to jump straight to the file type they want, not walk down a path to reach it.
Documents tab with membership benefits and redeem actions

Photos, X-rays, lab reports and consent forms, filterable by visit or type.

04

Additional Work

Treatment Done table with completed treatments, GST and totals

Completed treatments selected by checkbox, GST and totals calculated automatically.

Membership tab showing plan status and redeemable services

Plan status and redemption, handled without leaving the patient profile.

Transition between normal and editable states across four note types.

Mobile communication
Attached Files modal with uploaded X-rays

Reviewing attached X-ray files from a phone.

WhatsApp message template sent from patient file

A WhatsApp message template sent from the patient's file.

Editing a template message before sending

Editing a template message before sending.

05

Outcome

Alveolar has not shipped yet, so what follows is what each decision is meant to do, not what it has been measured doing.

Confirmable actions.A treatment plan entry is now visible the moment it lands, so staff should not need to check twice that something saved.
Faster prescriptions.Fewer decisions per field should mean less time spent writing a prescription between patients.
Faster access to files.Putting sorting and filtering at the top level should shorten the time spent finding one file mid conversation with a patient.

The main thing I took from this project. If something important changes on screen, the signal has to be big enough to notice. A small colour change is not enough when someone is mid task with a patient in front of them.