TriloDocs

A design system for an innovative AI-Enhanced medical writing solution

Background

An innovative AI-Enhanced medical writing solution

TriloDocs is a platform built specifically for medical writers. It dramatically reduces the time required to produce regulatory-ready clinical documentation, from signal identification and data processing through to compliant document generation.The users are senior medical writers and clinical researchers who work within strict regulatory frameworks. Every interaction they have with the product carries real clinical weight; trust, accuracy, and clarity aren't nice-to-haves, they're requirements

Challenge

A powerful product with no design foundation beneath it

When I joined the project, TriloDocs had no design system whatsoever. Styles were applied inconsistently across the product, components were duplicated without shared logic, and there was no shared language between design and engineering. Every new feature required reinventing decisions that had already been made, or worse, making them anew without knowing they'd been made before.

The medical context made the stakes even higher. A platform used in clinical environments needs to communicate authority and precision. Inconsistency erodes exactly the kind of trust that TriloDocs needs to build with conservative, detail-oriented professionals.

Getting the design foundations right wasn't just a quality-of-life improvement, it was a product-critical necessity.

My Role

Building the system from the ground up

I designed and delivered the TriloDocs Design System end-to-end, from the foundational tokens through to a fully documented Figma component library that the engineering team could build directly from.

This meant establishing a comprehensive token architecture covering colour, typography, spacing, and elevation, ensuring that every visual decision was encoded as a reusable value rather than a one-off choice. I defined a type scale appropriate for a data-dense clinical tool: precise, legible, and authoritative without feeling cold.

Working closely with the engineering team, I structured the component library to map directly to how components would be implemented in code, consistent naming, clear variant logic, and thorough documentation for every component. The result was a shared language that removed ambiguity from the design-to-development handoff entirely.

outcome

A coherent product ready to scale

The TriloDocs Design System launched as the backbone of the platform, giving the team a single source of truth for every design and development decision going forward.

With a robust Figma library and documented token system in place, design and engineering now move in lockstep. New features are built on shared components rather than from scratch, handoff is clear, and the product presents itself with the consistency and authority that medical professionals expect.