Colorado Spine Patient Portal iOS Mobile 0 → 1

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 coach without overwhelming or alarming users. Everything brand, app, system was built from scratch.

13+
Unique screens 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. 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
Research Synthesis

The gap between what patients needed and what existing tools offered mapped across the full recovery arc.

The Product

Every screen,
every touchpoint.

Four core surfaces each with a single job, designed to work as a coherent whole.

Dashboard

Dashboard At-a-glance recovery status, next appointment, AI coach access

Booking Flow

Booking Flow 4-step appointment booking: type → provider → date → confirm

Messages

Messages Threaded inbox with unread indicators and direct care team chat

Recovery Tracker

Recovery Tracker Progress ring, weekly check-ins, and milestone timeline

Design Decisions

The judgment calls
that shaped the product.

Every significant design decision was a tradeoff between intelligence and trust, between richness and clarity, between clinical authority and human warmth.

01
Companion to recovery
Intelligence as a companion, not a gatekeeper
The Recovery Coach surfaces as a contextual 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 they're doing the right things. The milestone timeline makes the abstract recovery arc concrete and achievable. Every 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 use warning amber rather than danger red: urgent, but not alarming. Every surface was stress-tested against an 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. 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, ensuring the system outlasts the project.

The Recovery Coach always available, never intrusive. Annotated to show the exact constraints that shaped its behavior.

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 across 3 groups
Brand primary, semantic, and neutrals. Every color has a defined use case. No ad-hoc values anywhere in the system.
Typography
6-step scale, one family
Display to Micro. One font family. Four weights. All mapped to design tokens and named for their role, not their size.
Components
60+ atoms across 12 groups
From buttons to calendar pickers. All built as Figma components with named variants ready to hand off or extend.
Visual language
Do / Don't documented
Explicit rules for teal usage, corner radius, indicators, and type weight hierarchy. No ambiguity about how the system should behave.

The full component library 60+ atoms, token-based, organized so any designer or developer can navigate it without a guide.

Outcomes

What was delivered.

A complete patient portal brand, product, and system ready to build and ready to scale.

13+ production-ready screens covering every patient touchpoint from login to discharge.

The recovery coach a genuinely novel surface for the spine care category.

◆
Deliverables
Three Figma files: Mobile Screens (13+ production-ready), Component Library (60+ atoms across 12 groups), and Brand Board. All token-based, all annotated, all ready for handoff.
Reflections

What I'd do differently

The most durable decision was building the brand before touching any screens every downstream call became easier because the constraints were already set.

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 the entire recovery journey, not just the acute post-op window.
Deeper accessibility audit color contrast on the teal-on-navy combinations needs formal WCAG validation.
A patient onboarding flow create the first-run experience that converts users from the static marketing site.
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.

I'm currently open to new design leadership roles. Whether you're building something ambitious or improving what you already have, I'd love to connect.

Get in touch