Back to Phase 2
View Live Mockup

Televisit

End-to-end virtual visit experience embedded in Practice EHR — incoming call card, waiting-room pill, connecting state, draggable in-call window with chat, multi-party invite, effects & virtual backgrounds, and the Patient Encounter backdrop that opens while the call is live.

Incoming Waiting Connecting In-Call Minimized
Incoming Call
  • Ringing card with patient identity
  • Visit reason, scheduled time, provider
  • Accept & Wait actions
Patient Waiting Room
  • Corner pill after "Wait" is pressed
  • Live timer of how long patient has been waiting
  • Re-expand to dismiss or accept
  • Dashboard sidebar — "Televisit Waiting Room" entry with live count
Connecting
  • Lottie three-dot loader during dial
  • Animated progress bar at the bottom of the card
  • Auto-transitions to In-Call after handshake
In-Call Window
  • Draggable + corner-resizable floating window
  • Main video pane with breathing avatar & tone strip
  • Self-PIP (swap to main, hide when off)
  • Call timer with elapsed-time bands
Dock Controls
  • Mic & camera toggles (on / off states)
  • Chat, Invite, More, Swap, End call
  • Responsive dock — buttons scale with window size
In-Call Chat
  • Side-panel that slides in next to the video
  • Typing indicator + automated reply demo
  • Group-chat aware (shows sender name when extras join)
Invite & Multi-party
  • Invite popover with recent contacts
  • Gallery grid auto-arranges for 2–7 participants
  • Per-tile labels, self-outline, initials avatars
Effects & Background
  • Touch-up appearance toggle
  • Blur — None / Low / Medium / High
  • Virtual background tile grid + custom upload
Patient Encounter Backdrop
  • EHR backdrop swaps to the active encounter while the call runs
  • Dashboard backdrop is restored when the call ends
  • Floating call window stays on top of either backdrop

1. Incoming Call

State: ringing

What's on the card

  • Patient avatar with breathing animation, name, age & sex.
  • Visit reason (e.g. Follow-up — sinus infection) with scheduled time.
  • Provider line showing who the patient is calling.
  • Pulsing "Incoming" dot in the header.

Actions

  • Accept Begins the dial → transitions to Connecting, then In-Call.
  • Wait Sends a "please wait" notice to the patient and minimizes the card to a corner pill.
  • The card uses an Emil Kowalski-style entry animation (Vaul curve) on each state change.

2. Patient Waiting Room

State: waiting / waiting-expanded

Corner pill

  • Compact pill in the top-right shows patient initials + live elapsed-wait timer.
  • Color of the timer shifts as the patient waits longer (tone band crossfade).
  • Click to re-expand the full incoming card with a "Dismiss" affordance.

Dashboard tie-in

  • Hover-expand sidebar includes a Televisit Waiting Room row with a green pill badge.
  • Collapsed sidebar shows a tiny corner badge with the same count over the phone icon.
  • Sidebar can be locked open via the "Lock Sidebar" button at the bottom.

3. Connecting

State: connecting

Loader

  • Inline Lottie animation (three rotating dots) drives the "Connecting…" indicator.
  • Animated progress bar sweeps across the bottom of the card.
  • Lasts ~1.2s by default, then transitions automatically to the in-call window.

Behavior

  • Cannot be dismissed mid-handshake — actions are disabled until connection completes.
  • If the handshake fails (future state) it will fall back to the ringing card with an error message.

4. In-Call Window

State: in-call

Window chrome

  • Drag by the titlebar to move; resize from any corner.
  • Resting state has a soft shadow; lifts visibly while being moved or resized.
  • All inner sizes (PIP, avatar, dock buttons) are driven by CSS variables on the window — the entire UI re-flows responsively.

Main video pane

  • Light branded gradient with a soft halo behind the participant avatar.
  • Self-PIP in the corner — click Swap in the dock to make yourself the main view.
  • When the camera is off, a large breathing initials avatar shows in place of video.
  • Call timer at the top crossfades color as duration grows.

5. Dock Controls

Bottom of the in-call window

Buttons (left → right)

  • Mic — toggles muted / un-muted. Off uses a red destructive tint.
  • Camera — turns video on/off; off swaps the main pane to the avatar.
  • Chat — opens / closes the side chat panel.
  • Invite — opens the contact popover for adding participants.
  • More — opens the Effects & Background menu.
  • Swap — flips main pane and self-PIP.
  • End — ends the call and returns to the ringing state with a fresh patient.

6. In-Call Chat

Side panel — toggled from dock

Panel mechanics

  • Slides in from the right of the video pane with a Vaul-curve width transition.
  • Width is responsive — driven by the same CSS variables as the rest of the window.
  • Closed state collapses to 0px and fades out without unmounting.

Conversation

  • Each message has a Vaul-curve enter animation (no layout thrash).
  • Typing indicator shows three pulsing dots while the simulated reply composes.
  • Group-call mode prefixes messages with the sender's name once more than one extra has joined.
  • Press Enter or click send; input clears after dispatch.

7. Invite & Multi-party

From dock → Invite

Invite menu

  • Popover anchored to the dock with a list of recent contacts (provider, family member, interpreter, etc.).
  • Each row shows initials avatar, name, and role. Click to add to the call.
  • Already-joined contacts switch to a "Joined" state.

Gallery grid

  • When 2–7 participants are on the call, the video pane swaps to a responsive gallery.
  • Layouts adapt: 1×2, 1×3, 2×2, 2×3, 2×4 — set via data-count.
  • Each tile shows a name pill with a blur-glass background.
  • Your own tile is highlighted with a blue 2-px outline.

8. Effects & Background

From dock → More

Effects

  • Touch up appearance — iOS-style toggle.
  • Blur — pill-style segmented control: None / Low / Medium / High. Blur applies to the background layer only, never to the avatar.

Virtual backgrounds

  • 3-column tile grid of preset backgrounds — Office, Library, Clinic, Studio, etc.
  • Each tile has a small label and a checked-border state when active.
  • "None" tile uses a diagonal hatch fill to indicate transparent / no background.
  • Upload tile lets users add custom backgrounds, which then appear inline.

9. Patient Encounter Backdrop

Backdrop swap during the call

Two backdrops

  • Dashboard backdrop is shown for ringing, waiting, connecting, and minimized — featuring the hover-expand sidebar with the Televisit Waiting Room row.
  • Patient Encounter backdrop replaces the dashboard when the call goes live, so the provider can chart while talking.
  • The floating call window stays on top of whichever backdrop is mounted.

Top bar & nav

  • Shared PEHR top bar (logo, ad space, notifications, user menu) across both backdrops.
  • Shared main nav (Home, Patients, Scheduling, Billing, Reports, AI, Setup) with quick-patient-search and Add-patient on the right.
  • Only the sidebar and main content swap between the two backdrops.
Want to try every state?
Use the dev "State" badge in the top-left of the mockup to jump between ringing, waiting, connecting, and in-call.
Open Live Mockup