AI Workflow Example

A HIPAA behavioral health platform, built with our AI-driven workflow.

A multi-role platform connecting behavioral health specialists, pediatric primary care physicians, and families, built around a Medicaid-supported Collaborative Care Model. This is how we work: what we do at every stage, the decisions we make, and how the design gets torn apart and rebuilt with the client in the room.

Collaborative Care Model Three role-based portals HIPAA-compliant on AWS WCAG 2.1 AA, bilingual
What it is
A behavioral health marketplace and care-coordination platform for children and families
Care model
Collaborative Care Model, Medicaid-supported
Who it serves
Families, behavioral health providers, pediatric PCPs, and clinic staff
Surface
Public marketplace, provider, admin, and PCP portals
Compliance
HIPAA on AWS, WCAG 2.1 AA, English and Traditional Chinese
Scope
Marketplace, care coordination, then EMR and billing
TanStack Start (React 19, SSR)TypeScript, strictTailwind CSS v4 PostgreSQL / RDSAWS CognitoAmazon S3Amazon SES VitestPlaywrightAWS (client-owned)
The challenge

Children wait months for mental health care, and the adults trying to help them work in silos.

Families face long waitlists, confusing insurance rules, and specialists who are hard to reach. Pediatric primary care physicians, who usually see the problem first, have nowhere to refer with confidence. And the clinical model that ties them together, Collaborative Care, only works when a shared record, structured assessments, and billable time tracking live in one place.

The brief was a single platform serving four very different users, holding up under HIPAA, supporting Medicaid reimbursement, and delivered in stages so that value arrives early and the hardest clinical work builds on foundations that already work.

The care model

Collaborative Care, in one shared workflow

This model improves outcomes by connecting three roles around a single patient case. The platform gives each of them the right view and keeps them in sync.

Refers and tracks

Pediatric PCP

Sees the child first, refers into behavioral health, and follows the case from the primary care side.

Coordinates

Care manager

Runs structured assessments, tracks billable time, and keeps the case moving between visits.

Treats

Behavioral health specialist

Delivers care, updates the shared record, and collaborates with the PCP on next steps.

↓   one shared case record · structured scores · secure messaging · billable time tracking
Our process

An AI-driven delivery workflow

Every stage runs as an AI-assisted workflow with engineers reviewing the output. The same method turns a brief into a shipped, verified product.

Five-step AI-driven delivery workflow, from idea to shipped product
AI at work

What the AI actually does, and what it never decides

"AI-driven" is easy to claim, so here is the division of labor, and the run that has the final say on whether anything ships.

What AI does versus what engineers own
The brief goes in and planning artifacts come out
Before design starts, the brief becomes artifacts the team can argue with.
The real quality gate output: format, lint, types, build, unit tests, end-to-end tests
Real output from this build. A red gate blocks the merge.
✓AI writes the code✓AI writes the tests ✓Engineers review every change✓The gate decides what ships
Step by step

What actually happens at each stage

Each stage has its own outputs and its own decisions. These are the real ones from this build.

01

Blueprinting & Strategy

AI-assisted

We turn the brief into a plan we can build against. AI helps us read the client's requirements against a working product model and produce a gap analysis: what is specified, what is ambiguous, what contradicts something else, and what is missing entirely. We map the users and their journeys, translate the clinical care model into concrete product surfaces, and mark where protected health information will live before a single screen is designed.

Sequencing is part of this stage, not an afterthought. The work is ordered so that the marketplace ships first and the harder clinical and billing systems land on foundations that already work in production.

Decisions made here
How much of the provider profile do we collect before approval?
OptionsAll of it up front, or all of it after approval
ChoseA mandatory subset before review, the rest editable after
BecauseReviewers need specialties and focus areas to make a decision, and matching depends on them. The richer profile can wait.
Should booking be instant?
OptionsInstant confirmation, or every booking as a request
ChoseRequest first, confirmed by staff
BecauseInsurance eligibility and provider fit have to be checked by a person. Promising a confirmed visit we cannot honor is worse than asking families to wait for a call.
Requirements and gap analysisJourney mappingHIPAA scopeStaged roadmap
02

User Experience & Design

AI-generated, human-refined

AI generates the design system first: tokens, components, and patterns defined once, so that three portals stay coherent and new screens are assembly rather than invention. Then the screens themselves, wireframed and turned into clickable flows.

The important part is what happens next. The flows go to the client before anything is built, and they come back marked up. That loop is where most of the product's quality comes from, so it has its own chapter below.

Nothing goes to development on an assumption

Wireframes and clickable flows are reviewed with you in a live walkthrough. Every comment is logged against the screen it touches, the design changes, and we record what changed and why. Build starts from an approved design.

Design system firstWireframes and clickable flowsLogged review cyclesAccessibility designed in
03

Architecture & Infrastructure

AI-scaffolded

AI scaffolds a role-based, HIPAA-safe foundation on AWS: a server-rendered React front end over a typed API, PostgreSQL with encryption at rest, managed authentication with role-based access, object storage for credentialing documents, and transactional email under a BAA. Protected health information is gated by permission and every access is written to a tamper-evident audit log.

A strict server and client boundary is enforced by the build itself, so secrets and PHI cannot accidentally reach the browser. The data model is shaped for tenant isolation from the start, because the later phases add multiple practices to the same platform.

Decisions made here
Who governs in-person availability?
OptionsProviders set it themselves, or staff approve it
ChoseTelehealth self-service, in-person staff-approved
BecausePhysical rooms are a shared resource. Self-service created a state where a provider could offer time in an office nobody had approved.
How do we verify clinical claims at scale?
OptionsProvider self-declares, or the clinical team credentials everything
ChoseSelf-declared now, with a verified tier layered on later
BecauseWaiting for full credentialing would stall the platform, but an unverified claim must never look verified. So claims ship without a badge, and the badge means something when it arrives.
System architecture: three role-based clients over an API and core services, on an encrypted database
System architecture, high level. Production runs on client-owned AWS.
04

Development & QA

AI plus human review

AI agents build features and write the tests; engineers review every change. The same automated gate runs on every pull request, and a change that fails any part of it does not merge.

We also hold a rule that keeps a mocked or staged product honest: anything not yet wired to a real backend must show a visible preview or coming-soon state. Never a fake success message. A demo that lies is worse than a demo with gaps.

✓Format✓Lint✓Strict type-check ✓281 unit tests✓82 end-to-end specs✓Production build✓Engineer review
Quality and CI/CD pipeline: commit, automated checks, build, promotion, production
Quality and CI/CD pipeline. Every pull request runs the full gate.
05

Launch, Monitor & Improve

AI-monitored

The same build is promoted forward through isolated environments, each with its own URL and data, and reaches production only after sign-off. Before launch it clears a security review: encryption at rest and in transit, enforced TLS, audit logging on every PHI event, role-based access at the API rather than only in the interface, and a signed BAA with every third-party service in scope.

Environments: development, QA, staging, and production, each with its own subdomain
One build, promoted from development through QA and staging to production.
The design loop

Where the product actually gets good

Design quality does not come from the first draft. It comes from putting a real flow in front of the people who know the domain, and being willing to take it apart.

The design loop: wireframe, clickable flow, walkthrough, refine, sign-off
Auditing our own work

We score the screens that matter

The public provider profile is where a family decides whether to trust a clinician, so we audited it formally rather than trusting our own taste. Fourteen issues, six of them fixable the same day. These were the scores it started with.

5/10
Visual hierarchy
6/10
Information architecture
5/10
Booking experience
6/10
Trust signals
4/10
Mobile readiness
7/10
Content quality

The finding was uncomfortable and useful: the page was functionally complete and structurally wrong. Booking competed with content instead of supporting it, and the strongest trust signals were buried below the fold.

Iterations in detail

Eighteen changes, and the reason behind each one

These are real iterations from this build, grouped by the principle that drove them. Each one started as something we or the client had already agreed to.

Ask less, and only what changes the answer

Every extra question costs completion. If an answer does not change what the family sees next, it comes out.

The intake quiz lost two of its six questions

BeforeSix steps, including prior treatment history and the child's age
AfterFive steps, with a welcome screen instead
Both questions were collected and then never used to change the result. One was passed along and ignored; the other only drove a banner. Asking them implied they mattered.

Insurance stopped opening with a wall of logos

BeforeA flat grid of carrier brands as the first thing you see
AfterOne question first: yes, no or self-pay, or not sure
Families without insurance, or who did not know the child's carrier, had no way through a grid of brand names. Gating on a plain yes or no first is also what the strongest consumer health products do.

The provider attestation lost a whole screen

BeforeA modal that re-collected typed name and professional title
AfterOne inline checkbox on the review screen, submit disabled until checked
Name and credentials were already captured at registration, so the modal was a redundant round trip. The checkbox reuses the same consent pattern as the booking flow, so it reads as familiar.

Never dead-end anyone mid-flow

A person who has started telling you about their child should always be able to finish, then be told where they stand.

Adults over 18 were stopped halfway

BeforeA pediatric-only notice interrupted the quiz as soon as the age was known
AfterThe quiz completes, and a soft banner explains the scope above the results
Stopping someone mid-flow reads as rejection. Letting them finish and explaining on the results page, where they have context, keeps the door open and still sets expectations.

A full calendar lost the family entirely

BeforeAn empty week with no next action
AfterA waitlist ask, so a cancellation can be offered to someone already waiting
In mental health an empty calendar does not read as “try later”, it reads as “there is no help”. Capturing the demand keeps supply and demand connected.

Earn trust before asking for a commitment

A formal audit of the provider profile scored booking experience and mobile readiness lowest. The page worked, but it asked for the booking before it had earned it.

The calendar came before the reason to book

BeforeBooking panel in the left column, provider content to the right
AfterContent leads, with the booking panel sticky on the right
Left-to-right readers met a calendar before they knew anything about the clinician. Reversing the columns lets someone read, decide, then book.

The main action was the wrong color

BeforeAn amber “Book Appointment” button
AfterThe brand's primary teal, with amber kept for cost emphasis
In a health context amber reads as a warning, not an invitation, and it fought the design system's own primary color.

You could book without knowing how long the visit was

BeforeSession length chosen after the booking button
AfterSession length first, before any times are shown
People picked a slot and booked without knowing whether it was thirty or sixty minutes, and availability can differ by length.

A trust badge nobody could decode

BeforeA single badge reading “Credentialed”
AfterTwo explicit badges: license verified, and insurance network verified
Parents could not tell whether it meant a license check, malpractice cover, or insurance membership. Undefined internal jargon erodes trust instead of building it.

Design for the density real operations create

Staff screens fail differently from consumer screens. They fail when there is a lot of data and no time.

The appointment list was rebuilt from eight columns to five

BeforeEight columns, sideways scrolling, date and time in separate columns
AfterFive columns that fit a laptop, with time nested under the date
Horizontal scrolling in an operational list means staff lose the row they were reading. Consolidating columns and pairing date with time removed the scroll entirely.

The listing hierarchy was inverted

BeforeRows led with the provider, with the patient as a secondary field
AfterRows lead with the patient, provider secondary, through one shared identity component
Staff scan these lists looking for a person, not a clinician. Building it as a single shared component meant the change landed identically on tables, calendar chips, agenda rows, and cards.

Every admin table broke on a narrow screen

BeforeDesktop tables that overflowed sideways on tablets and phones
AfterBelow a set breakpoint, every table becomes stacked cards
Built once as a shared primitive, then applied across applications, audit log, intakes, providers, staff, and appointments, so no list is the exception.

Detail views were trapped in slide-over drawers

BeforeRight-side drawers with a backdrop, one per list
AfterDedicated pages inside the admin layout, with a back link
A drawer cannot be linked, shared, or reopened. Real pages can be sent to a colleague, and an unknown record redirects cleanly instead of failing.

Two queues that nobody wanted separated

BeforeReferrals and direct bookings split across two tabs
AfterOne queue, with referrals marked inline, plus provider and date filters
Splitting them did not match how the work is actually done. What staff needed was not two lists, it was filtering and sorting within one.

Five overlapping status words became one lifecycle

BeforeApproved, scheduled, and rescheduled all leaking into the interface
AfterPending, confirmed, completed, with cancelled and no-show branches
Overlapping vocabulary makes an operational screen ambiguous. Unconfirmed time is also kept off the confirmed calendar, because tentative clinical time must never look finalized.

Let compliance shape the flow, not just the database

In regulated healthcare the rules change what the screen can do, so they belong in the design conversation rather than a later hardening pass.

Returning-patient prefill was redesigned around the rules

BeforeRecognize the family from a stored cookie and prefill their details
AfterA verified link sent to their email, then prefill only durable profile fields
Protected health information cannot sit in cookies, browser storage, or a URL, so the original mechanism was never viable. The replacement also states which fields came from the last visit, keeps them editable, and never silently reuses the reason for the visit.

Operational lists stopped carrying clinical detail

BeforeReasons for a visit rendered in full inside list views
AfterA short non-clinical visit descriptor, with detail behind a permissioned record
Staff need to run the day from a list, but a list is the widest-visibility surface in the product. Keeping clinical specifics on a gated detail screen protects the family without slowing the work.

Native date fields were banned outright

BeforeThe browser's own date input, which looks different in every browser
AfterOne date component from the design system, with a standardized format
A control that renders differently per browser cannot be part of a design system, and inconsistent date formats invite real data-entry errors in a clinical context.

Iterate honestly, including backwards

The strongest evidence that a review loop is real is that it sometimes reverses us, or the brief.

A review screen went out, came back, and settled in between

BeforeA collapsed summary shown only after submission
AfterCollapsible sections, first one open, with edit links in every header
Demo feedback said details were hidden, so everything was expanded. Once that shipped, long applications became a wall of scrolling. The end state answers both complaints instead of trading one for the other.

A request that would have reversed a settled decision was pushed back

BeforeA new ask to assign a location to each individual time slot
AfterThe existing one-location-per-day model, confirmed and kept
It contradicted a decision already ratified, and carried real rework across scheduling, slots, and records. Rather than silently reversing course, the team put the conflict and its cost on the table, and the original model was confirmed.

Tapping a card stopped meaning committing to it

BeforeChoosing an option advanced the quiz immediately
AfterSelection highlights, and a continue button moves you on
Immediate advance turns a mis-tap into a wrong answer. This also reversed an earlier decision to remove the step counter, once it was clear people wanted to know how much was left.

One sentence that sounded like an accusation

Before“Our team has been flagged”
After“Our credentialing team will reach out to assist”
The original implied something had gone wrong with the provider, when the system simply needed a human step. Microcopy is part of the experience, not decoration.
Design system

One system, three portals, no drift

Consistency at this scale is not discipline, it is architecture. Change a token, and every screen moves together.

59
Shared interface primitives, the vocabulary every screen is built from
256
Components across eighteen areas of the product
1
Status palette, replacing per-screen color choices across every portal
1
Token that squared every corner in the product, from one line
01
Tokens, not hex values

Color, type, spacing, and radius live as semantic tokens in a perceptual color space. A screen never names a raw color, so global changes stay global and contrast stays predictable.

02
Consistency beats a one-screen improvement

We do not restyle a single instance of a component to fix how one page feels. If a variant is wrong it is wrong everywhere, so the change is global or it does not happen. This rule is written down, because the temptation is constant.

03
Six lookalike badges became one component

Duplicate variants had grown up in different corners of the product. Collapsing them removed code and, more importantly, removed the chance of them drifting apart again.

04
Every table has a card form

Below a shared breakpoint, tables become stacked cards rather than scrolling sideways. Built once, applied to every list in the product.

05
A living reference, not a slide deck

The system ships as a route inside the app, showing real tokens and live components. It cannot go stale, because it is the product.

The design system: color tokens, typography, and component library
Accessibility

Built to be usable by everyone who needs it

This platform operates where accessibility is a legal requirement, not a preference. It was designed in, then verified.

AA
Contrast raised to standard across the palette

Status colors were darkened at the token level, so every badge in every portal became readable at once. White text on pale backgrounds was found and fixed.

⌘
Everything reachable without a mouse

Clickable table rows made keyboard-operable, icon-only buttons and filters given real names, focus states visible throughout.

◉
Color is never the only signal

Calendar states carry markers as well as tints, and protected data is marked with an icon and a word, not just a shade.

H1
A correct document outline

Heading levels were audited and repaired so screen readers get a real structure instead of a visual approximation.

文
Two languages, by design

English and Traditional Chinese across the family-facing experience, with preferred language captured at intake and surfaced on provider cards.

Scope

Built in stages

Value arrives early, and each stage stands on foundations that are already working.

Stage one

Marketplace

  • Public provider directory and search
  • Guided intake and online booking
  • Provider onboarding and credentialing
  • Admin console with audit trail
  • Transactional email under a BAA
Stage two

Care coordination

  • The PCP portal, closing the referral loop
  • A shared case record across roles
  • Structured clinical scoring
  • Billable time tracking and reporting
  • Secure messaging, tenant isolation
Stage three

Records and billing

  • EMR integration over industry standards
  • Claims and revenue cycle management
  • Real-time eligibility at booking
  • Remittance processing
  • Denial management workflow
The platform

Three role-based portals, one shared model

Families

Public marketplace

A guided intake, filtered provider search, clear profiles, online booking, and a separate path for pediatrician referrals.

Clinicians

Provider portal

Schedule and availability, each visit with its context, onboarding and credentialing, and profile management.

Operations

Admin console

One workspace for the schedule, applications, providers, and audit trail, with protected data behind permissions.

Referrers

PCP portal

Primary care physicians refer patients and follow shared cases, closing the Collaborative Care loop.

The product

What the process delivered

The shipped experience across the portals.

Why it works

What building this way gets you

4

Portals, one codebase

Families, clinicians, referrers, and staff each get a purpose-built experience over a single shared model, so the product stays coherent as it grows.

363

Automated tests

Unit and end-to-end coverage gating every change, so a fix in one portal cannot quietly break another.

18

Documented iterations

Design changes with the reason recorded, which is why the product fits the work instead of fitting the first draft.

HIPAA

Safe by design

Protected data gated by permission, encrypted, and audited from the first architecture decision rather than a later hardening pass.

Yours

Proprietary by default

A custom platform on infrastructure you own is a business asset and a point of differentiation, not a rented template.

Clear

You steer it

Wireframes, flows, and staging sign-offs keep you in control at every stage, with no surprises at launch.

Summary

How we build

An AI-driven workflow took a regulated healthcare brief through strategy, design, architecture, build, and launch across three role-based portals, with engineers reviewing every change and the client steering the design at every step.

  • ✓
    Blueprinting. The brief read against a working model, gaps and contradictions surfaced early, compliance scoped before design.
  • ✓
    Design. A design system first, then wireframes and clickable flows reviewed with you until signed off.
  • ✓
    Iteration. Eighteen documented changes with the reasoning kept, including the ones that reversed us.
  • ✓
    Architecture. Role-based, encrypted, audited foundations on cloud infrastructure you own.
  • ✓
    Development and QA. AI builds and tests, engineers review, and a full automated gate runs on every change.
  • ✓
    Launch. Promotion through isolated environments, cleared by a security review and your sign-off.

Have a product like this in mind?

We build custom software, web and mobile apps, and HIPAA-compliant, AI-driven healthcare products. Let's talk about taking yours from idea to shipped.