Colorado Spine
Patient Portal

A full patient portal for a Denver-based spine surgery practice from brand identity through mobile app design, component system, and on demand recovery coaching.

Role
Lead Designer
Platform
iOS Mobile
Deliverables
Brand · App · System
Colorado Spine Patient Portal
Overview

Built from the ground up, brand to component system

Colorado Spine needed a patient-facing digital presence that matched the quality of their clinical care. The practice had no existing digital product, just a static marketing site.
The challenge: design a full mobile portal that earns patient trust, reduces administrative burden, and introduces an on-demand recovery coaching without overwhelming or alarming users.

13+
Unique screens designed across the full patient journey
60+
Atomic components in the design system
4
Core flows: auth, appointments, records, recovery
1
Automated recovery coach integrated into the portal
The Problem

Patients need more than a scheduling app

Spine surgery patients face a long, anxiety-inducing recovery. They have more questions than their care team has time to answer. They struggle to track their own progress. And when they can't reach their doctor, they guess — sometimes dangerously. The portal had to close that gap without replacing the clinical relationship.

"I had no idea if what I was feeling was normal. I just needed someone to tell me if I should be worried."
Post-op patient, week 2
"We get the same five questions every day. Most of them could be answered before the patient even picks up the phone."
Clinical coordinator
"If I could see my progress visually, I think I'd feel a lot better about how things are going."
Post-op patient, week 4
The Product

Every screen, every touchpoint

Dashboard screen of the Colorado Spine patient portal
Dashboard
At-a-glance recovery status, next appointment, AI coach access
Appointments screen of the Colorado Spine patient portal
Booking Flow
4-step appointment booking: type → provider → date → confirm
Messages screen of the Colorado Spine patient portal
Messages
Threaded inbox with unread indicators and direct care team chat
Recovery Tracker screen of the Colorado Spine patient portal
Recovery Tracker
Progress ring, weekly check-ins, and milestone timeline
Design Decisions

The judgment calls that shaped the product

01 · COMPANION TO RECOVERY
Intelligence as a companion, not a gatekeeper
The Recovery Coach a contextual available strip at the key moments where it's needed, not buried in a menu. It surfaces proactively but never interrupts. Suggested prompts reduce the cognitive load of knowing what to ask. The constraint: it can never replace clinical advice. Every response carries a soft disclaimer and escalation path to the care team.
02 · BOOKING FLOW
4 steps, no dead ends
The booking flow is split into 4 deliberate steps rather than a single long form. Each step has one decision. The step progress bar at the top anchors users spatially. Available time slots are visually differentiated from full ones, not hidden, so patients understand system capacity rather than feeling like appointments don't exist.
03 · RECOVERY TRUST
Make "on track" feel real
The progress ring isn't a vanity metric, it's tied to actual milestone completion. The weekly check-in calendar gives patients a ritual: small daily confirmation that they're doing the right things. The milestone timeline makes the abstract recovery arc concrete and achievable. Every design decision here was about reducing anxiety, not just reporting data.
04 · VISUAL LANGUAGE
Medical authority without clinical coldness
Navy as the primary surface signals trust and authority. Teal as the sole accent keeps the palette surgical — precise and purposeful. The teal pulse dot is reserved exclusively for live automated features, creating a consistent visual grammar patients learn quickly. No shadows, no gradients, flat surfaces read faster in a healthcare context where cognitive load is already high.
05 · INFORMATION HIERARCHY
Next action always within one tap
The dashboard surfaces the single most important thing, the next appointment, before anything else. Quick action buttons give direct access to the 4 most common tasks without navigation. Alert banners for time-sensitive items (like outstanding questionnaires) use warning amber rather than danger red, urgent but not alarming. Every surface was stress-tested against a anxious patient's mental model.
06 · SYSTEM DESIGN
Built to scale beyond this engagement
The 60+ component library isn't just documentation, it's the foundation for future screens. The UI toolkit ensures consistent decisions across any team that touches this product. Token-based spacing and color means design and build share a single source of truth. The component naming convention allows for quick translation to common development patterns.
Design System

A system built to outlast the project

The component library, brand board, and token structure were designed for clear collaboration at scale.

Color system — 15+ tokens
3 groups: brand primary, semantic, neutrals. Every color has a defined use case. No ad-hoc values.
Typography — 6 scale steps
Display to Micro. One font family. Four weights. All mapped to design tokens.
Components — 60+ atoms
12 groups from buttons to calendar pickers. All built as Figma components with named variants.
Visual language — Do / Don't
Explicit rules for teal usage, corner radius, indicators, and type weight hierarchy.
Outcomes

What was delivered

13+
Production-ready screens covering every patient touchpoint from login to discharge
3
Figma deliverables: Mobile Screens, Component Library
1×
Recovery coach, a genuinely novel surface for the spine care category
Reflections

What I'd do differently

What worked well

Starting with the brand board before screens forced early decisions that paid off, no color inconsistencies across 13 screens.
The Recovery Coach as a non-blocking dashboard strip rather than a dedicated screen was the right call, approachable, not overwhelming.
Keeping the palette to 2 hues (navy + teal) created visual discipline that made every screen feel part of a cohesive family.
The 4-step booking removes mental load, each screen is a single decision, no decision fatigue.

What's next

Expand tools for a simple yet powerful patient experience that supports during the entire recovery journey.
Deeper accessibility audit — color contrast on the teal-on-navy combinations needs formal WCAG validation.
A patient onboarding flow — create the 'first-run experience' by engaging users and converting them from the first time they access the static marketing content.
Push notifications and empty states — both critical for a portal that needs to pull users back over a 90-day recovery.

Let’s talk about your
next big idea.

Whether you’re exploring new solutions or improving what you already have, I am here to help.

BY THEODORE
© 2026 Theodore Unruh