Case studyUX/UI Design

PrecisionOS

Surgeons reference this app mid-procedure. Every design decision starts from that fact.

Year
2024
Client
PrecisionOS
Services
UX/UI Design
Status
Design complete
PrecisionOS app

01Brief

What we were asked

A mobile app design for a surgical education platform featuring live surgery streaming, video catalogs, and multi-camera support.

02Challenge

Why it was hard

PrecisionOS is a surgical education platform that needed a mobile companion app with complex technical requirements: live surgery streaming with multiple simultaneous camera angles, a searchable video content catalog organized by procedure and specialty, user profile management with customizable avatars for the educational community, and a contact invitation system for private streams and study groups.

The design and architecture needed to work in high-stakes surgical environments where surgeons might be referencing content during actual procedures. This meant every interaction had to be achievable with minimal taps, information density had to be high without feeling cluttered, and the multi-camera selection interface needed to be intuitive enough to switch views without looking away from the surgical field. Full landscape mode support was mandatory for optimal video viewing during procedures.

03The Build

Scroll through the product

01Watch

Live surgery, live discussion

The stream screen pairs the surgical feed with a moderated chat, viewer count, and notifications - so a resident in Halifax can ask the operating surgeon a question during a live case in Vancouver.

PrecisionOS - Live surgery, live discussion

02Angles

Six cameras, one tap

The multi-camera selector shows live thumbnails of every angle - overhead, close-up, instrument, wide - and switches with a single tap. Designed so a viewer can change perspective without looking away from the field for more than a second.

PrecisionOS - Six cameras, one tap

03Quality

Built for hospital WiFi

Streaming quality defaults to Auto - adaptive HLS bitrate through Mux that survives unpredictable hospital networks - with Higher quality, Data saver, and Custom resolution one sheet away.

PrecisionOS - Built for hospital WiFi

04Library

The archive travels with you

Recorded procedures live in a searchable library with offline downloads and progress tracking, so a 1.78 GB carotid artery case is available in the OR basement where the signal isn't.

PrecisionOS - The archive travels with you

05Invite

Private sessions, controlled access

Educators invite specific colleagues to private streams and study groups - manual entry or contact import - keeping sensitive cases inside a verified professional circle.

PrecisionOS - Private sessions, controlled access

04Notes

The planned architecture

We delivered a complete design and architecture package: brand book establishing the visual identity, a comprehensive design system with component library, low-fidelity wireframes mapping all user flows, high-fidelity mockups for every screen, and an interactive prototype for stakeholder validation.

The streaming architecture was planned around Mux for video infrastructure — it handles adaptive bitrate streaming (HLS) that adjusts quality based on network conditions, critical for hospital WiFi environments that can be unpredictable. WebRTC integration enables the live streaming component with sub-second latency for real-time surgical feeds. The multi-camera feature allows viewers to select between different surgical views (overhead, close-up, instrument, wide-angle) with smooth transitions.

The design system includes a comprehensive logo suite, color palette calibrated for extended screen viewing (reduced blue light considerations for surgeons watching during long procedures), typography scale optimized for readability on mobile displays at arm's length, input field patterns for search and filtering, iconography system, and reusable components.

The app covers account creation with institutional verification, a home screen with integrated live stream previews, the multi-camera selection interface for surgical views, a browsable video content library with specialty and procedure filtering, profile settings with avatar customization for the educational community, stream configuration settings, and a contact invitation system supporting both manual entry and contact list import for private educational sessions.

Full landscape mode was designed for every video-related screen, with controls that auto-hide during playback and reappear on tap, maximizing the viewing area. AWS with CloudFront CDN was selected for the infrastructure to ensure low-latency video delivery across North America.

Suggested stack

Mobile
React NativeExpo
Streaming
MuxWebRTCHLS
Backend
Node.jsFastifyPostgreSQL
Infrastructure
AWSCloudFront CDN

05Outcome

Where it landed

Deliverables
Full Package
Brand book, design system, interactive prototype
Fidelity Levels
Lo + Hi
Wireframes through interactive prototype
Key Feature
Multi-cam
Multiple camera angle selection for surgery
Screens
30+
Across all fidelity levels and orientations

06Craft

The work behind the work

The delivered brand book, the palette calibrated for long OR viewing, and the landscape mode designed for procedure playback - plus the full-screen player with live chat running beside the surgery, the upcoming streams schedule, and the Discover feed where surgeons find what is live right now.

Have a product like this in mind?

We plan, design, and ship - the whole story, start to finish.

Start a conversation

Next project

We Care Front

Volunteer Coordination Website