Designed an in-app telehealth meeting to replace a vendor popup
Clinicians ran video visits in a third-party popup with a camera panel nobody owned. A research and design engagement produced a verified capability map, an in-app meeting design built from the platform's own primitives, and forty implementation briefs anchored to the codebase.
Outcomes
- Capabilities verified
- 32
- Implementation briefs
- 40
- Backend stories specified
- 7
Each claim checked against the SDK and three codebases before design relied on it.
Per-feature notes anchored to the code, delivered inside the mockup with deep links.
Token minting, webhook auth, cart device mode, and more, with acceptance criteria and dependencies.
The challenge
Video visits opened in the video vendor's hosted web app in a separate window. The clinician's case, notes, and device controls lived elsewhere, and the remote camera control panel turned out to exist in none of the platform's repositories: it was a plugin deployed on the video server. The team believed the vendor SDK was React-only and therefore unusable in their Angular application, and the hospital carts at the far end depended on a webhook lifecycle any redesign had to preserve.
Approach
- Mapped the current call path across three repositories and the vendor SDK, then fact-checked every capability claim adversarially before it went into the matrix
- Disproved the blocker: the core SDK is framework-agnostic TypeScript, and only the optional UI kits are React
- Designed the clinician meeting surface as a clickable mockup with real states: filmstrip and gallery layouts, lobby admit, patient-camera control, a case dock for in-call documentation, and a persisted self-view preference
- Cut features the architecture could not honor, such as per-participant pin under a server-composited stream, and documented the reasoning inside the mockup
- Embedded a developer layer in the mockup: forty implementation briefs with repo-verified anchors, a story map, and a dependency graph across frontend, backend, and cart teams
What shipped
The deliverable is a single HTML file that is both the design and the spec. Toggling the implementation layer turns every control into a link to its brief: what it does, which SDK calls and backend endpoints it needs, which edge cases matter, and which existing components it reuses. Deep links let a story in the tracker point at exactly one brief.
Alongside it: a research report with a thirty-two-row capability matrix, a spike runbook that de-risks the SDK in a day, a scaffold plan for the new libraries, and seven backend story specs with acceptance criteria and a dependency graph, so three teams could start in parallel.
Stack
- Angular
- Pexip Infinity SDK
- SignalR
- .NET Azure Functions
- HTML prototypes
Services involved
Have a problem shaped like this one?
Tell me what you're working with and you'll get an honest read on whether it's a fit.
Start a project