[Product · UX] interactive prototype fictional data

VetPulse: an assistant prototype for vet clinics

We designed a journey from an incoming enquiry to a booking draft, reminders and patient reactivation. The result is two responsive static prototypes: a landing page and an interactive clinic office. Live AI, a backend and Vetmanager are not connected.

Open the interactive prototype ↗ browser-based scenarios; all data is fictional
case status

A product prototype for testing workflows

static prototypes
try it5 sections and 3 dialogues

Inbox, booking, reminders, reactivation and metrics are available in the office.

builtLanding page + clinic office

Two responsive prototypes show the client journey and clinic workflow.

boundaryFictional data only

AI, backend and Vetmanager are not connected; metrics are not clinic results.

{{ demoCaption }}
VP
VetPulse · AI dispatcher {{ statusText }}
«Aibolit» clinic
{{ greetText }}
{{ ownerText }}
{{ replyText }}
{{ actionTitle }}
{{ r.k }} {{ r.v }}
{{ outcomeText }}
{{ chipLabel }}

// three scripted scenarios · no network, LLM or real clinic data

prototype scenario

From an enquiry to a staff action

01
Enquiry
A pet owner asks a question in the demonstration chat
02
Scenario routing
The prototype distinguishes a price question, booking request and urgent case
03
A safe next step
A reply, booking draft or staff handoff — without medical advice
→ repliesShows a sample answer from a fictional service list
→ draftsPrepares a booking that a staff member must confirm
→ escalatesShows a human handoff for urgent or ambiguous requests
Reminders · concept
A screen shows a message queue and manual send controls
Reactivation · concept
A campaign is modelled on a synthetic patient list
01 · hypothesis

Test whether a single interface could help a receptionist process routine enquiries, no-shows and repeat visits more consistently. This is a product hypothesis, not verified clinic performance: estimating its value requires interviews, a baseline and a pilot on a real workflow.

02 · what we designed

We built a public landing page, a compact dialogue scenario inside the case and a separate clinic office with five sections: overview, enquiries, appointments, reminders and reactivation. Users can switch sections, chat, confirm drafts and run a simulated campaign. Everything runs locally in the browser with HTML, CSS and JavaScript.

03 · what was hard

We separated the demonstration from a real product. The prototype explicitly labels fictional data and scripted logic; financial values are modelled and actions are drafts. Vetmanager integration, personal-data storage, an AI model and the legal architecture are deferred to a validation phase.

For urgent requests, the interface gives no medical advice and does not claim that a call actually happened. It presents an intended escalation and the need for staff confirmation.

A false negative: on a position:fixed modal, overflow:hidden clips the overflow instead of scrolling it: «no scroll», but the text is cut off. The root cause is min-width:auto on a flex/grid child that won't shrink below its own content; the fix is min-width:0. The lesson we reused afterwards: measure scrollWidth against clientWidth, don't rely on the document's scroll.

The main takeaway: before building a backend, verify that existing vet-CRM features do not already cover the job and that a clinic needs a separate layer. This prototype is material for interviews and workflow validation, not evidence of an implementation.

04 · verifiable result
  • Two public responsive prototypes: a product landing page and a clinic office.
  • Five interactive office sections and three dialogue scenarios inside the case.
  • Booking, urgent handoff, reminder and reactivation scenarios use clearly fictional data.
  • The interface runs without external dependencies or network calls and supports keyboard use, mobile screens and reduced motion.
  • The boundary is explicit: there is no backend, authentication, database, live AI or Vetmanager integration.
  • The next justified step is clinic interviews, a review of existing CRM capabilities and only then a technical spike in an API sandbox.
HTML CSS JavaScript Product discovery Responsive UX Accessibility
next case: personal CRM →