Doctolib — Case study
Clarity UI
For its first five years, Doctolib built product without a design function.
Engineering teams built features quickly and independently to meet urgent market needs, without a shared layout system, interaction model or UX strategy. This fueled impressive growth, but it also created deep structural and UX debt.
We inherited a powerful, feature-rich product built without a foundation for consistency, clarity or scale. The result was cognitive overload, disorientation and inefficiency in critical care moments. Clinicians had to adapt to the software, instead of the software adapting to them.
This was no longer a UX inconvenience. It was a strategic threat to usability, safety and product velocity.
So we developed a new interface foundation, Clarity UI, designed around how people actually see, think and interact.
Clarity UI is inspired by the biology of human vision.
At the center of our vision lies the fovea, a small, high-resolution area of the retina responsible for sharp detail, reading, and decision-making.
Around it, peripheral vision picks up shape and motion, but clarity fades quickly. We designed the interface to match this attention pattern: amplifying what matters most at the center and reducing visual noise in the periphery.
At its core, Clarity UI introduces one layout logic, based on the directional flow of visual focus:
Eyes Center: Focus
This is where the primary work happens. The main task, whether writing a prescription, reviewing lab results or messaging a patient, always lives in the center of the screen. It is calm, minimal and uninterrupted, so users can act quickly and precisely.
Eyes Left: Context
Contextual information sits to the left of the focus zone: reference data such as patient history, previous notes or parallel tasks. It supports the main task without pulling focus, like glancing at a chart while writing.
Eyes Right: Actions
Actions appear on the right: dynamic tools, suggested next steps, shortcuts and AI-assisted recommendations. They help users finish what they started or take the next logical step without going back to menus.
Eyes Down: Control
Navigation, notifications and inputs sit just below center, in the natural path of eye and hand. This is the home of the Stub: a dynamic bar that works as search, navigation, AI prompt field and command interface, keeping controls close without crowding the workspace.
Together, these zones form a balanced interface model aligned with human biology. The same directional logic applies across screens, roles and devices, building familiarity, reducing mental load and making interactions predictable.
Clarity UI isn’t only designed for today’s software. It’s ready for the next generation of healthcare interfaces, built around the human body and mind.
The Ingredients of Clarity UI
Every screen, task and device is built from three universal parts.
Three core components give the system its structure, responsiveness and flexibility. Together they shape the user’s journey, adapting to the moment while reinforcing clarity.
1
The Canvas is the central space where the main task unfolds. Generous whitespace gives the interface room to breathe, reducing clutter and letting information flow naturally.
• Expands or contracts based on device and task
• Serves as the visual home of the Focus zone
• Uses adaptive structure instead of fixed grids and hard edges
2
The Menu is a floating, responsive control center. Placed just below the user’s visual and physical focal point, it brings together:
• Navigation
• Search
• Notifications
• Prompt input for conversational commands
The Menu stays minimal when idle and expands when needed. When users type or speak, it becomes a prompt bar for AI-assisted interaction. It also acts as a contextual guide, offering next steps, suggestions and quick access to relevant tools without breaking focus.
3
UI Cards are the core content unit of Clarity UI. Every task, piece of data or interaction is framed as a modular card.
Like a clinical document or summary, each card holds one digestible piece of information or functionality.
By standardizing structure without limiting flexibility, cards enable:
• Rapid scanning
• Easy comparison
• Context-aware presentation
• Consistency across product teams
Cards are more than design components. They are interface grammar, readable by both people and AI systems.
How we are building it
From vision to system: collaborative, incremental and built to scale.
Clarity UI is not a redesign. It is a system-level rearchitecture of how we build product at Doctolib, grounded in research, aligned by a shared mental model and enabled by mature design operations.
It began with a full-system UX audit based on Jobs to Be Done (JTBD), which gave us one lens to identify high-impact workflows, reduce friction and align design, product and KPIs around real user goals. Rather than isolating the vision in a parallel track, we embedded it in delivery: we split the interface into modular parts (cards, layouts, navigation) and distributed ownership across feature teams.
Each team integrates its share of Clarity UI into its roadmap through co-design, joint planning and shared engineering delivery, so adoption happens as part of everyday work.
None of this would be possible without our earlier investment in Oxygen, Doctolib’s design system. Oxygen lets us wrap legacy components in card containers, recompose layouts without starting from scratch and build consistent experiences quickly across all markets.
Milestone: Clean Architecture
Milestone: Floating Prompt Bar
We don’t just design screens. We design interface grammar.
By solving every UI challenge with a scalable system of cards, we make our product structure readable to large language models. With a clear logic of Context, Focus, Actions and Control, and styles taken directly from our Oxygen design system, an LLM can generate coherent, on-brand interfaces. It is a system machines can learn from and people can trust.
Anticipating the Shift to Conversational UI
We believe product interaction is becoming conversational, driven by voice, text and intelligent assistance. Clarity UI is built for this shift.
Because the interface is organized into clear zones (Context left, Focus center, Actions right, Control bottom), every conversation has a place to unfold. That makes the interface usable by people and legible to machines: a foundation for agentic collaboration.
When a conversation begins, the AI assistant becomes the user’s primary focus, occupying the center of the screen.
As the dialogue unfolds, contextual cards appear on the left, surfacing patient data, clinical history or relevant insights in real time.
At the same time, smart actions and recommendations appear on the right, guiding the user to next steps without manual navigation.
Measuring success
To make sure the transformation delivers real value to clinicians and the business, we defined KPIs tied to our JTBD framework:
Time-to-task reduction across top clinician workflows
Click-path reduction from a baseline of up to 6+ clicks
Design system compliance rate across key components and screens
Adoption of card-based structure across product teams
Prompt success rate in conversational interactions via the Menu
Perceived clarity and focus, measured through qualitative user feedback
Team delivery velocity, measured by component reuse and reduced rework