Pace Pharmacy Platform

Digitizing pharmacy onboarding end-to-end

Project Overview

Pace Pharmacy needed to replace a fragmented, paper-based professional account onboarding process with a structured digital workflow.

I designed and built a connected onboarding platform that brings together three applications: a public intake portal for applicants, an internal dashboard for pharmacy staff, and a backend API that manages persistence, authentication, automation, document generation, and related business workflows.

The experience takes a traditionally administrative process and turns it into a guided digital journey—from initial application through medical-director authorization and internal review.

Objective

The primary goal was to make professional account onboarding more structured, traceable, and manageable while preserving the information and authorization requirements of the existing process.

The platform needed to support multiple stakeholders without forcing them into the same interface: applicants needed a clear guided form, medical directors needed a lightweight authorization flow, and pharmacy staff needed tools to review and manage submitted applications.

My Role

I was responsible for translating the onboarding workflow into the product experience and implementing the end-to-end platform.

My contribution covered the applicant-facing multi-step form, the information architecture and interaction patterns for the onboarding flow, the administrative dashboard experience, and the technical implementation connecting these surfaces to the backend workflow.

On the engineering side, I worked across the React/TypeScript frontend, Bun/Hono API, PostgreSQL/Drizzle data layer, authentication, email automation, and document-generation workflows.

Key Features

Guided multi-step onboarding

The primary intake experience is organized into distinct stages rather than presenting applicants with one large form. The Figma design uses a persistent vertical progress indicator to show where the applicant is in the process, while the form itself groups related information into sections such as account information, billing and shipping, payment, medical-director details, acknowledgements, and final review.

The implementation supports session persistence and schema validation, allowing applicants to move through the process without losing previously entered information.

Review-before-submit

The flow includes a final review stage so applicants can verify the information collected across the earlier steps before completing the submission.

Medical director authorization

After submission, the backend generates a unique reference code and sends an automated authorization request by email. The medical director can follow the personalized link to review the relevant application information and submit an authorization decision without creating an account.

Administrative dashboard

Submitted applications move into a staff-facing dashboard where pharmacy staff can filter and review records, manage patient profiles, approve accounts, and track Kroll processing status.

The dashboard uses a structured table interface with pagination/infinite scrolling, filtering, row-level actions, and loading states to support operational workflows at scale.

Document generation and export

The platform generates structured PDF outputs for operational use, including Kroll reports and patient intake documents. Different PDF approaches were used depending on the document’s layout requirements.

Transactional backend workflow

Application information is persisted across related entities—including account, address, delivery, payment, acknowledgement, medical-director, and Kroll data—with transactional writes used to maintain application integrity.

User Experience

The core experience is designed around a simple progression: provide information → authorize → review → complete processing.

For the applicant, the interface reduces cognitive load by breaking a long onboarding process into manageable sections. The vertical progress navigation provides continuous context, while consistent field layouts, grouped sections, dividers, and clear headings establish a predictable rhythm throughout the form.

The flow also separates stakeholder responsibilities deliberately. Applicants complete the information they own; the medical director receives a focused authorization experience; and pharmacy staff work from a dedicated administrative surface rather than trying to manage submissions through the public form.

This separation helps each user see only the part of the workflow relevant to their task.

Design Approach

The Figma design takes a structured, form-first approach rather than treating onboarding as a conventional marketing-style web page.

A wide desktop layout gives the form enough room to present complex information without excessive vertical compression. The persistent left-side progress rail provides navigation and orientation, while the primary content area uses grouped two-column fields for related information.

The visual system relies on clear hierarchy rather than decorative elements: section headings establish structure, input containers create strong field boundaries, dividers separate major information groups, and repeated spacing patterns make the long form easier to scan.

The design also uses progressive disclosure through the staged workflow. Instead of exposing every requirement simultaneously, the interface asks users to complete one logical group at a time while maintaining visibility into overall progress.

Challenges & Solutions

Challenge: Converting a fragmented manual process into one coherent digital workflow

The original process involved multiple actors and a large amount of information. Simply reproducing the paper form digitally would have created a long, difficult-to-navigate experience.

Solution: The information architecture was reorganized into a multi-step onboarding flow with persistent progress and clear section boundaries. The backend then connects those steps into one application record rather than treating them as isolated submissions.

Challenge: Supporting different users with different levels of access

Applicants, medical directors, and pharmacy staff have different responsibilities and security requirements.

Solution: The platform separates the public intake experience, reference-code-based medical-director authorization, and authenticated administrative operations. Supabase authentication and protected Hono routes secure staff-facing functionality while keeping public intake endpoints separate.

Challenge: Maintaining data integrity across a multi-stage application

A single application can contain related account, address, payment, acknowledgement, medical-director, and processing information.

Solution: The API uses transactional database writes so related records are persisted atomically rather than allowing partially completed application records to be created.

Challenge: Moving a document-heavy process into a digital workflow

The process still requires operational documents and exports after information is submitted.

Solution: PDF generation was incorporated directly into the platform, using React PDF for structured Kroll reports and jsPDF/html2canvas where HTML layout fidelity was more appropriate.

Outcome

The result is a connected digital onboarding platform that replaces a fragmented manual intake process with a structured, role-specific workflow.

Applicants receive a guided, session-persisted onboarding experience. Medical directors can complete authorization through a dedicated link-based flow without account creation. Pharmacy staff gain an authenticated dashboard for reviewing, approving, filtering, and exporting submissions.

From a product perspective, the project demonstrates how a complex operational workflow can be translated into a clearer user journey while the underlying technical architecture connects form state, authorization, persistence, automation, and document generation into one system.

Tech stack: React 19, TypeScript, Vite, TanStack Router, TanStack Query, TanStack Table, React Hook Form, Zod, Zustand, Tailwind CSS, Radix UI, Bun, Hono, PostgreSQL, Drizzle ORM, Supabase Auth, Postmark, MJML, React PDF, jsPDF, html2canvas, Puppeteer, Docker.