A case study by Hernando Saieh Diago
Designing an intuitive calendar interface for doctors and clinic staff in a medical SaaS platform.
Act 1 of 5
Overview
The platform needed scheduling for medical practitioners, with self-service availability for doctors and efficient appointment tools for clinic staff, but no cohesive design framework existed and features lacked consistency.
The platform needed scheduling infrastructure for medical practitioners. Doctors required self-service availability and booking rule configuration, while clinic staff needed efficient appointment management tools. The critical gap: no cohesive design framework existed, and feature development lacked consistency across the product.
Act 2 of 5
User Research & Discovery
I interviewed doctors and clinic staff to map their different mental models, and the research pointed to a calendar-based interface, so I documented the task flows before exploring any design.
Conducted interviews with doctors and clinic staff to map distinct user mental models. Research findings indicated a calendar-based interface as the optimal solution. Created task flow documentation before design exploration.
- Conducted interviews with doctors and clinic staff
- Mapped distinct user mental models for scheduling workflows
- Research indicated calendar-based interface as optimal solution
- Created task flow documentation before design exploration
Act 3 of 5
Booking Rules System Design
I designed a flexible availability rule framework and used Figma variants so stakeholders could iterate quickly on recurring availability, blocked time periods and exception overrides.
Developed a flexible availability rule framework for practitioner configuration. Implemented Figma variant methodology for rapid stakeholder iteration across recurring availability patterns, blocked time periods, and exception overrides.
- Recurring availability patterns
- Blocked time periods
- Exception overrides
- Figma variant methodology for rapid stakeholder iteration
Act 4 of 5
Design System Development
I built a reusable component library for the scheduling domain, with calendar cells, time slots, rule cards and status indicators, organized in a Figma architecture with standardized naming for future features.
Built a reusable component library for the scheduling domain — calendar cells, time slots, rule cards, and status indicators. Structured Figma architecture with standardized naming conventions, designed for scalability across future medical scheduling features.
- Calendar cells: time-based visual representation
- Time slots: configurable appointment windows
- Status indicators: Available, Blocked, Booked, Override states
- Rule cards: visual representations of availability patterns
Act 5 of 5
Results
The scheduling components were reused across four later features without a redesign, stakeholder changes went from days to a single day, and design and development finally worked in sync.
- Improved Doctor-to-Patient Workflow: Replaced fragmented iteration cycles with structured, variant-based review methodology. Design and development teams achieved synchronous collaboration.
- Scalable Design Foundation: The scheduling component system was successfully repurposed across 4 subsequent features without redesign requirements.
- Accelerated Iteration Cycles: Variant-based Figma system reduced stakeholder-driven UI change turnaround from multiple days to single-day completion.
- Structured Figma Architecture: CareSync Design System with masters, quality file, and component library. Product files organized by calendar flows, clinic workflows, and doctor dashboard.
End of the story
Next scene
That was CareSync Calendar Feature. Tomo is up next, or head back to the full list of work.
Details of this project have been altered from the original to respect a non-disclosure agreement. Core design decisions, process, and outcomes are accurately represented.
Would you like to see this as a regular page or to watch the story unfold?
We’ll remember your choice. You can switch any time from the bar at the top.