MondPlan

MondPlan is a Dutch treatment-planning SaaS for dentists. A dentist builds a plan on an interactive odontogram — a visual representation of the patient's mouth, teeth, conditions, and treatment steps — but the artifact a patient receives needs to be something else: a clear, branded, readable treatment-plan letter.

I contributed to MondPlan as a Senior Frontend Engineer and Design Engineer through Rational Nomads. My strongest ownership area was the patient communication workflow: the surface that turns an odontogram-based treatment plan into a letter, enriches it with visual step screenshots, generates a PDF, translates it, sends it to the patient, and supports e-signature approval.

This project is a good example of the kind of frontend work I enjoy most: complex product logic, high-context UX, visual polish, reusable primitives, and real production edge cases.

Why this project matters

A treatment plan is clinically useful to a dentist, but it is not automatically understandable to a patient. The dentist works inside an odontogram editor with structured treatment data, step sequencing, conditions, and pricing. The patient needs a document they can read, keep, approve, and discuss.

The product challenge was to bridge those two worlds.

The workflow had to let a dentist compose a professional letter without leaving the treatment-planning context. It also had to include visual evidence from the odontogram, support translated communication for non-Dutch-speaking patients, generate a reliable PDF, send the result by email, and collect patient agreement through a public e-signing route.

For recruiters, this project shows long-term ownership of a high-impact healthcare SaaS workflow. For technical reviewers, it shows work across rich-text editing, document generation, image capture, PDF rendering, mobile UX, frontend state, reusable UI primitives, and patient-facing reliability.

My role

I was the primary frontend owner of the patient-letter and sharing flow, from the first modal implementation through later PDF, translation, viewer, email, and e-signature improvements.

My responsibilities included:

• Building the treatment-plan letter flow from an initial modal into a complete document workflow.
• Capturing odontogram treatment steps as images and embedding them into patient letters.
• Creating reusable frontend primitives such as Modal, Button, icons, and supporting UI patterns.
• Integrating rich-text editing with Quill for editable letter and template content.
• Supporting PDF generation, in-app preview, mobile viewing, and open-in-new-tab behavior.
• Building practice-configurable letter-template and email-template systems.
• Contributing to patient-facing e-signature flows, including mobile signing and one-click approval.
• Improving plan-management interactions and building a treatment-plan overview surface.
• Working inside a small, founder-led team and collaborating around existing backend and odontogram-engine boundaries.

One important scope note: I did not own MondPlan's core odontogram rendering engine or clinical data model. My ownership was the product layer around it — the patient-letter workflow, screenshot capture, document surfaces, templates, sharing, e-signing UX, and shared frontend foundations.

Product problem

The odontogram is powerful for dentists, but it is too technical to be the patient-facing output. A useful patient letter needed to answer several questions at once:

• What treatment is being proposed?
• What does each step look like visually?
• How can the dentist customize the wording?
• How does the patient receive the document?
• Can the document be translated?
• Can the patient approve it from their own phone?
• How does the clinic avoid rebuilding the same content every time?

That made the feature more than a modal. It became a document pipeline connecting the odontogram, editable content, templates, PDF output, email delivery, translation, and e-signature.

Approach

I treated the patient-letter flow as its own product surface inside the larger clinical app.

The core idea was to keep the dentist close to the treatment plan while giving them a dedicated workflow for patient communication. The dentist could open the letter from the planning context, review the content, include visual odontogram steps, generate a PDF, translate it, and send it without needing to manually recreate the plan in another tool.

The work was guided by four principles.

1. Make the clinical plan understandable

The letter needed to show the actual treatment plan, not just describe it. Capturing each odontogram step as an image made the document feel specific to the patient rather than generic.

2. Keep document generation reliable

The same content existed in multiple forms: editable preview, generated PDF, emailed document, and signed copy. The frontend had to avoid drift between those representations.

3. Design for real patient devices

Patients open emails on phones. Dentists also review and send documents on mobile devices. PDF viewing, translation, sending, and e-signing had to work outside a desktop-perfect environment.

4. Build reusable foundations while shipping features

Many of the primitives needed for this flow did not exist yet. I created base UI components and patterns as part of the feature work, then reused them across other MondPlan surfaces.

Selected contributions

Patient treatment-plan letter

I built the patient-letter and sharing flow from the ground up. The initial work included modal state, a reusable base Modal and Button, the patient-letter data shape, and the hooks needed to create and render the letter.

Over time, the flow expanded into a complete communication surface: rich-text editing, draft saving, PDF output, translation, AI-summary affordances, send actions, and mobile viewer support.

Odontogram step screenshots

A key part of the experience was making the treatment plan visual. I built the screenshot mode that renders each treatment-plan step's odontogram in a capture-ready state and turns it into an image that can be embedded in the patient letter.

This required handling off-screen rendering, capture timing, image quality, and animation disabling so the screenshots would render cleanly as static document assets.

PDF generation and viewer experience

I introduced and worked on the letter PDF output so the patient communication could exist as a real document, not only an in-app preview.

I also built a dedicated PDF viewer modal with mobile support, moved key actions into the viewer, improved sizing and blurriness issues, and added success feedback around generation. The goal was to make reviewing, translating, generating, and sending the letter feel like one continuous workflow.

Rich-text letter composition

I integrated Quill-based rich-text editing for the letter content, including editor loading states, draft-saving behavior, and later Quill 2 improvements. This gave dentists the flexibility to adjust the letter while still keeping it connected to the structured plan data.

Letter templates

I created the letter-template editor used by practices to configure reusable paragraphs for patient letters. This included a side-menu for paragraph selection, editable practice-specific content, read-only MondPlan defaults, copy/save affordances, and rich-text editing.

This was the upstream side of the same document pipeline: practices configure the content once, and the patient-letter flow consumes it later.

Email templates and variable interpolation

I built MondPlan's email-template and patient-emailing system, including template CRUD, system-vs-personal template categories, a variable inserter, preview substitution, and sent-email history.

A particularly important technical decision was separating frontend-preview variables from server-owned variables. The frontend could resolve patient and practice details for preview, but values like signing links and server-generated fields had to remain untouched until the backend rendered the final email.

Patient e-signature experience

I contributed to the public, login-less patient e-signing experience. The patient verifies their identity with date of birth, reviews the plan PDF, and approves it from their own device.

My work focused on the patient-facing UX: mobile layout, signing and detail drawers, action bottom bars, PDF behavior on small screens, Dutch copy, mobile-keyboard signature recovery, and a one-click "Akkoord" approval path.

Treatment-plan management and overview

I co-owned parts of the plan-management interaction layer: rename, duplicate, delete confirmation, dropdown behavior, date-input handling, loading feedback, and i18n improvements.

I also authored a treatment-plan overview that aggregates a patient's plan letters into a searchable, filterable review surface with status and totals.

Frontend foundations

Several shared UI foundations came out of this work. I created the base Modal and Button primitives, contributed to the icon vocabulary, worked on SCSS design tokens and global styling, and added animation and mobile-responsiveness across patient-facing surfaces.

These foundations helped make the clinical tool feel more coherent while the product was still evolving quickly.

Outcome

The result was a complete patient communication workflow for a healthcare SaaS product.

A dentist could build a treatment plan in MondPlan, generate a patient letter, include the odontogram steps visually, adjust the content, create a PDF, translate it when needed, send it by email, and collect patient approval through an e-signature flow.

I do not have public usage metrics for this work, so I would not claim numerical impact. The strongest outcome is product capability: MondPlan gained a document and patient-communication layer around its odontogram planning engine, and I helped build the frontend foundations that made that layer usable, reusable, and maintainable.

Links

• Product — mondplan.nl
• Company — rationalnomads.com