Skip to main content

Mobile UI

PineApp — Pre-Visit Flow

Designed the Pre-Visit flow for Baptist Health's PineApp — a mobile feature that moved hospital pre-registration from paper forms into a clear, step-by-step digital experience.

PineApp — Pre-Visit Flow cover
Year2023
CategoryMobile UI
ClientBaptist Health
HealthcareMobile UIDesign systemShippedFigmaPrototypingComponent design

A mobile feature that moved hospital pre-registration from paper forms and front-desk queues into a clear, step-by-step digital experience inside the Baptist Health app.

Type

Agency work · 110 Theory for Baptist Health

Industry

Healthcare / Mobile Health

Year

2023

Platform

Mobile app · iOS and Android

Status

Shipped to production

Role

Senior Product Designer — 110 Theory


Design Challenge

Before this feature existed, Baptist Health patients had to complete pre-registration forms manually at the front desk — on paper, under stress, and close to their appointment time.

The app already showed appointment information, but patients had no way to complete pre-visit steps digitally before arriving. The challenge was to bring this offline process into the app in a way that felt simple, clear, and trustworthy for users who were often older adults with limited smartphone confidence.

At the same time, the flow had to handle real operational complexity: multiple appointments on the same day, several document types with different statuses, and a final confirmation step that had to feel irreversible by design.

Old paper-based pre-registration process versus new digital Pre-Visit flow inside PineApp
Before — arrive at hospital, wait at front desk, fill paper forms. After — open app, tap Pre-Register, complete checklist before arrival.

Design Direction

The user research pointed consistently toward older adults — many of them retired, using a smartphone mainly for calls and texts. That shaped every design decision.

Progressive disclosure over long forms. Instead of recreating a paper form inside the app, the experience reveals information step by step. Users first see what needs attention, then drill into each item only when needed.

Status visibility as the core pattern. Every checklist item carries a clear state: Not Started, Needs Review, or Completed. Progress is visible at a glance without relying on instructions.

Irreversible confirmation by design. Once submitted, the data could not be changed by the patient inside the flow. Rather than hiding this, the UI makes it explicit before the final step — reducing confusion and accidental submissions.

Multi-appointment without confusion. When users had multiple appointments on the same day, the accordion pattern showed exactly which visits the forms applied to, removing ambiguity from a stressful scenario.

Pre-Registration checklist screen with appointment accordion, document status badges, and sticky Continue CTA
Appointment accordion at the top. Status badges per item. Continue CTA visible regardless of scroll position.

UX Structure

The flow was built around one goal: arrive at the hospital with everything already completed.

Entry Point — Appointment Card

The Pre-Register CTA lives directly on the appointment card on the Home screen. A contextual hint below explains the action in plain language, reducing hesitation for less experienced users.

Multi-Appointment Confirmation

If the user has multiple appointments on the same day, a dedicated screen lists them before the flow begins, explaining that the information applies to all listed visits.

Pre-Registration Checklist

The checklist is the core screen. Each required document is listed with its current status and users can address items in any order. The appointment accordion collapses once the user has understood the context. The Continue CTA remains anchored to the bottom regardless of scroll position.

Success State

Once all items are submitted, a clear success screen with arrival instructions closes the loop. For virtual visits, the flow communicates when the visit becomes accessible. Push notifications confirm each completed step outside the app.

Four-step UX sequence from appointment card entry point to success confirmation screen
Appointment card to completion in four steps. Each screen has one primary action — no branching decisions for the user.

UI System

The Pre-Visit flow was designed within the existing Baptist Health / PineApp visual system and extended with new components specific to this feature.

Color was used functionally. Baptist Health green drove primary actions. Amber handled attention and review states. Neutral grays provided structure and supporting text.

Typography for older users. Large, high-contrast body text. Label/value hierarchy on document cards. Each screen focused on a single topic to reduce cognitive load.

Layout for thumb reach. Single-column mobile layout throughout. Generous tap targets. Bottom-anchored CTAs. Compact but readable document cards. Collapsible accordion to preserve vertical space.

Components created or extended

  • Status badge: three states (Not Started, Needs Review, Completed)
  • Expandable document review card
  • Multi-appointment accordion
  • Confirmation modal
  • Success state screen
  • Step-by-step push notification pattern
  • Document type icons: insurance card, consent form, license / ID, MSPQ
Component board showing document card in three states, multi-appointment accordion, confirmation modal, and success state
System thinking across the feature. Three status states per document type. Accordion collapsed and expanded. Confirmation and success patterns.

Home Card Redesign

The appointment card on the Home screen was redesigned to surface the Pre-Visit entry point without disrupting the existing UI.

A Manage dropdown consolidated secondary actions — appointment info, reschedule, cancel — freeing the primary CTA area for Pre-Register and its contextual hint.

Once pre-registration was complete, the card updated to show a Confirmed badge, registration status, tappable address and phone links, and a Review button replacing the Pre-Register CTA.

Three-state appointment card comparison — original, Pre-Visit ready, and post-completion confirmed state
Original card → Pre-Visit integration with Manage dropdown and Pre-Register CTA → Confirmed state with Review button.

Result

The Pre-Visit flow shipped to production and replaced a manual, in-person process with a mobile-first digital experience available to Baptist Health patients before their hospital visits.

What this project demonstrates

  • Complex process translation: Turning an offline hospital workflow into a clear mobile experience.
  • System thinking: Designing a multi-state component architecture that supports different document types, appointment quantities, and user confidence levels.
  • Accessibility-minded UX: Designing for low digital literacy without making the product feel limited for more capable users.
  • Design system extension: Working inside an established system and extending it with native-feeling components.
  • Shipped product work: Delivering production-ready design that reached real users.
Final product gallery showing the complete Pre-Visit flow in sequence
End-to-end flow in production. Appointment card entry point, checklist, multi-appointment handling, and success state.

Reflection

This project pushed me to think carefully about the gap between a user's real context and what a clean interface often assumes about them.

Designing for patients in their 60s and 70s — many managing health anxiety alongside unfamiliar technology — meant that clarity was not a nice-to-have. It was the core requirement.

It also showed how a single feature can cascade through an existing product. The Pre-Visit flow touched the Home screen, the appointment card, the notification system, confirmation logic, document components, and edge-case handling. Getting that right required thinking in systems, not just screens.

Selected screens

Old paper-based pre-registration process versus new digital Pre-Visit flow inside PineApp
Before — paper forms at the hospital front desk. After — a digital checklist completable from the app before arrival.
Four-step UX sequence from appointment card entry point to success confirmation screen
Appointment card → multi-appointment confirmation → pre-registration checklist → success. Minimal decisions at each step.
Pre-Registration checklist screen with appointment accordion, document status badges, and sticky Continue CTA
The core screen. Appointment context at the top, document items by status, Continue CTA anchored to the bottom.
Component board showing document card in three states, multi-appointment accordion, confirmation modal, and success state
Not Started, Needs Review, Completed — three states, one component system covering the full feature scope.
Three-state appointment card comparison — original, Pre-Visit integration, and post-completion confirmed state
Home card redesign. Original → Pre-Register with Manage dropdown → Confirmed with Review button.
Final product gallery showing the complete Pre-Visit flow in sequence — shipped to production
Shipped to production. Pre-Visit moved hospital pre-registration from paper forms to a mobile-first digital experience.

Next work

BlockBind
Let's talk