Academic at SCAD UX/UI AI
Enterprise · B2B · Design System · Agentic build

Redesigning Delta for Business as one connected platform for travelers and managers.

Migration of three Delta corporate web properties into a single, validated end-to-end product, built on a tokenized design system shipped through an agentic build pipeline.

Lead Product / UX Designer User testing Web analytics & CRO Early hi-fi prototyping Agentic coding Design system scalability Product structure Research Information architecture SEO + GEO

Context

SCAD · Spring 2026

Team

3 designers

Status

Live prototype

Scope

End-to-end

Tools

Next.js
TypeScript
Tailwind
shadcn/ui
Figma MCP
Claude Code
Vercel
Back to projects

The project in five lines.

  • Migrated three Delta corporate web properties (Delta Business, Delta SkyMiles for Business, and Delta–AMEX Business Cards) into one connected product structure.
  • Co-designed a new business-tier Medallion model after research showed business travelers want to fly Delta more but lose status to competing carriers.
  • Built the design system in Figma, automated token export via Claude Code CLI + Code-to-Figma, and shipped to React.
  • Wrote SEO + GEO-optimized markdown specs per page → an agentic AI system built the production website and the Manager Dashboard.
  • Validated end-to-end: 5 contextual interviews, 2 testing rounds, 1 Tree Test, 1 CRO micro-survey. The new site beat the old one 7/10 vs 6/10 head-to-head.

Business travelers want to fly Delta more. The loyalty math pushes them away.

I owned product structure across three products and led the migration into one platform.

The business-model redesign was joint with my teammate; everything below was mine.

Product structure

Owned structure across 3 connected products, spanning the public site, calculator and DBT dashboard.

Migration

Migrated 3 Delta corporate properties into one coherent system.

Research orchestration

Benchmarking, hypotheses, contextual interviews, and user flows.

Design system

Tokens, variables and base components in Figma, tokenized with Claude Code CLI + Code-to-Figma.

Token + component export

Shipped tokens and primitive components to React.

Information architecture

Structured the IA and sitemap of the new Delta for Business site.

SEO + GEO specs

Wrote per-page markdown specs that feed the agentic build.

Guided selector (Quiz)

Designed the progressive-disclosure flow that routes users to the right tier.

Testing protocol

Set the user-testing protocol structure and the base documents the team used.

CRO experiment

Launched the public-site micro-survey + Microsoft Clarity integration.

Team credit

Jai Grant helped build the design system and was the lead designer of the Dashboard. He also co-designed the business model with me, based on the main research I led.

A current-state audit, a competitive benchmark, five interviews, the boarding journey, and adoption archetypes.

The starting point was a fragmented experience

Before the redesign, Delta's corporate offering was scattered across three disconnected web properties and two separate tools. The first research job was auditing what already existed and understanding why users got lost in it.

Delta corporate · business Before · 3 sites + 2 tools, disconnected
Before, the current structure
Delta's current business dashboard before the redesign
Delta's current business dashboard · click to zoom

Moderated tests and contextual research surfaced the core problems of the existing web and app:

Hard to even find the right pageWeak Google positioning, and three separate sites that confuse users about where to start.
No clear navigation between plansInformation missing or buried; no obvious path across programs.
Inconsistent with Delta's own design systemThe visual language drifts from the parent brand.
Two separate tools for one jobA business-travel-manager tool and a SkyMiles tool, never unified.
Unintuitive dashboard, no demoThe manager tool is hard to learn and offers no demo for prospective clients.
Unclear how the pieces relateSkyMiles, Medallion status and business plans aren't connected in the story.
No integration with other toolsNo API or connections to the systems companies already run.
Travel agency mixed with business travelersThe Delta Business home blends both audiences and confuses users.

Competitive benchmark

I started with Delta's own metrics next to Qatar, Emirates, Singapore, United and American. The differentiation gap was clearest around premium-service consistency and loyalty mechanics for high-spend corporate accounts.

Contextual interviews (n=5)

Jorge Jimenez Rolo (SEO & Behavioral Manager), Najah Bradley (frequent traveler), Sarah Kling (Sr. UX Researcher, Amazon), Stephanie Krell (Service Designer & Professor), and Stehle Craig (Industrial Designer & Professor).

  • Reimbursement vs. pre-approval. Travelers must choose between reimbursing their own expenses or using pre-approved, streamlined bookings.
  • Status is hard to keep. Travelers struggle to maintain Medallion tiers because thresholds keep rising.
  • Fragmented benefits. Travelers manage multiple credit cards and point systems to capture the best benefits.

Business-traveler user flow

I mapped the end-to-end boarding & travel journey to find where status decisions and friction collide. Friction points are highlighted.

Adoption theory & archetypes

Instead of personas, I defined the audience as adoption archetypes by company size and placed them on Rogers' Diffusion of Innovations curve, asking which organizations adopt a new B2B loyalty platform first, and which hold back. Each archetype was read against Rogers' five attributes: relative advantage, compatibility, complexity, trialability and observability.

Startups scored 20/25, ready to adopt, sitting with the Early Adopters. Mid-Market travel managers scored 14/25, not yet, holding back in the Late Majority. Small businesses adopt fast for clear ROI, while large enterprises carry the highest value but move slowest, gated by procurement and security. Observability was the weakest attribute across the board (2/5). Teams can't easily see other companies' results, which is exactly why "add customer case studies" became a P0 fix.

Innovators Venturesome 2.5% Early Adopters Respect 13.5% Early Majority Deliberate 34% Late Majority Skeptical 34% Laggards Traditional 16%
StartupsEarly Adopters · 20/25
Small BusinessEarly Majority
Mid-MarketLate Majority · 14/25
Large EnterpriseLaggards · top value

Based on E. M. Rogers' Diffusion of Innovations, 5th ed., with Delta for Business archetypes placed by adoption readiness.

UserTesting Early Adopters · Venturesome

Startups

Adopt fast when the ROI is obvious; almost no procurement friction.

e.g. Linear, Notion, UserTesting

Rogers' 20/25 · ready
Buffer Early Majority · Deliberate

Small Business (SMB)

Lean teams that adopt for time saved once the value is proven.

e.g. Basecamp, Buffer, Wistia

Likely adopter
Zapier Late Majority · Skeptical

Mid-Market

Policy and spend control matter; needs proof before committing.

e.g. Zapier, Asana, HubSpot

Rogers' 14/25 · not yet
Microsoft Laggards · Traditional

Large Enterprise

Highest value and slowest to move, held up by security, procurement and policy gates.

e.g. Amazon, Coca-Cola, IBM, Microsoft

Interviewed a manager at Amazon
Early Adopters · Venturesome

Individual Business Traveler

Flies often on a corporate card; self-selects into status and a smoother boarding day. The end-user inside every company above.

e.g. management consultants, enterprise sales leaders, frequent-flyer founders

Self-selects in
From archetypes to tiers

A smoother Medallion ladder, one business tier per archetype.

Delta's business offering had only two tiers, with a big jump between them. Using the archetype study, we kept the Individual traveler and designed a smoother ladder (a new Gold for small business, Platinum Business for mid-market, and Diamond Business for large enterprise), each tuned to a studied reference travel-spend range so the offer fits the profile.

Silver / Individual tier Individual traveler Individual < $15kref. annual travel spend
Gold tier Small Business Gold $15k–$100kref. annual travel spend
Platinum tier Mid-Market Platinum Business $100k–$1Mref. annual travel spend
Diamond tier Large Enterprise Diamond Business $1M+ref. annual travel spend

Medallion Suite for Business, nine connected benefits.

A new business-tier system designed to make high-spend corporate accounts feel rewarded inside Delta rather than penalized by it.

Standout move · revenue + experience

A promotions policy that fills Comfort+, a low-effort upsell tied to Medallion status.

Filling Comfort+ (Economy+) has been one of Delta's biggest gaps in recent years. So beyond the tiers, we designed a promotions policy for business travelers that channels them into Comfort+, promoted in direct relation to their business Medallion status.

It's a low-effort upsell: it lifts occupancy in a cabin Delta struggles to fill, while improving the traveler's comfort and their perception of both Delta and their employer. The company looks like it takes care of its people, at almost no extra cost.

Silver tierSilver
Gold tierGold
Platinum tierPlatinum
Diamond tierDiamond

I designed the constraints an agent team built inside — not the pixels.

I built a tokenized design system in Figma — 137 tokens for color, type, spacing, radius and shadow, extracted straight from Figma variables — and wrote the instruction system a 5-agent Claude Code team read before touching a file: 8 markdown specs (sitemap through agent instructions), a 1,172-line CLAUDE.md, and an orchestrator prompt. I didn't hand-write the site's TypeScript. I wrote the constraints that made the agents' output predictable, and made the visual judgment calls the agents couldn't.

Strong on structure. Blind to visual judgment.

34 commits over 15 days: 21 features, 13 fixes. The fixes are corrections to what the agent team had already shipped, and the pattern holds across all of them — the agents got the structure and logic right (the right component, the right route, the right data), and missed the calls that are pure visual judgment. Those 13 fix commits are the closest thing this project has to my fingerprint.

fix(home)

Agent shippedA red active-state outline on the Gold business plan card — the same "active" treatment used elsewhere in the file, applied without noticing red reads as an error state next to a premium tier, not a selection state.

I correctedDropped the red stroke. The code was right; what it communicated in context wasn't.

fix(homepage)

Agent shippedA MedallionTeaser grid that compiled and rendered fine, just not at the proportions the tier cards needed — leftover space at the end of the row instead of the cards filling it.

I correctedForced the grid to 3 columns so the tier cards spanned the full row and read as a set.

fix(home)

Agent shippedThe correct SkyTeam badge, correct alt text, correct placement — sitting on its own white background instead of blending into the page.

I correctedSwapped in a transparent PNG. A small asset-hygiene detail no build spec spells out.

None of these were logic bugs — tsc passed, the token grep passed, the build passed. They were the fix commits doing the job the verification gates couldn't: judging whether it looked right.

Every tool here is load-bearing for the agentic workflow, not a resume line.

Next.js

Next.js

App Router's file-based routing matched the 63-page sitemap one route per file, so agents could scaffold a page straight from the spec's URL.

TypeScript

TypeScript

Types are a contract an agent can't quietly violate. npx tsc --noEmit was the gate that caught what looked right but wasn't.

Tailwind CSS

Tailwind + tokens

Utility classes mapped 1:1 to the 137 Figma variables, so "use the tokens" had a mechanical answer instead of a stylistic one.

shadcn/ui

shadcn/ui

Unstyled primitives the agents customized from the Figma spec, instead of fighting a pre-styled library's own opinions.

Figma

Figma MCP

Agents pulled real design context per section instead of working from a description of the design.

Claude Code

Claude Code

The five build agents, plus the orchestrator that never wrote a line of application code itself.

Vercel

Vercel

Deploy target for every phase's clean-build check, and the platform the OG images render against.

One hub from three properties, structured to outrank competing carriers.

I unified three Delta properties (Business, SkyMiles for Business and Delta–AMEX Business Cards) into a single hub, with a hard line in the information architecture: everything business and corporate, we build; general consumer features (book a flight, personal SkyMiles, flight status) link out to delta.com. Enrollment is self-serve for small business and contact-sales for mid-market and enterprise.

SEO + GEO to rank above competitors

Every page shipped with a search spec.

Each page got an SEO / GEO markdown spec covering title, meta, heading hierarchy, JSON-LD schema and a target query. Comparison pages (Delta vs United vs American) capture high-intent competitor searches, while program and benefit pages target long-tail B2B-loyalty queries, so Delta for Business surfaces above competing carriers' corporate programs in both Google and AI answers.

Rich snippets as shortcuts, and better ranking. Every page ships JSON-LD for BreadcrumbList, SiteNavigationElement and FAQPage. Google renders that markup as rich-snippet sitelinks that act as shortcuts straight into the funnel, and the structured data also improves the page's ranking. One result becomes a column of links dropping users directly onto Programs, Cards or the tools, and it surfaces above competing carriers.

https://business.delta.com

Delta for Business, Corporate Travel & SkyMiles

One hub for business travel: programs by company size, Corporate Priority benefits, Delta–Amex cards and the SkyMiles for Business loyalty program.

Rich-snippet sitelinks (from BreadcrumbList + SiteNavigationElement JSON-LD) act as shortcuts into the funnel, and lift the page's ranking.

Sitemap, the full URL tree

The hierarchy stays shallow, at most three levels below the homepage. Sections (Level 1) open into sub-pages (Level 2) and, only where needed, detail pages (Level 3). A flat tree keeps every page a few clicks away and gives crawlers a clean, predictable path. Each node below is tagged with its level. Drag, scroll with two fingers, or open a node to read what it does.

Drag to explore

The live landing page, built inside the specs, tokens and boundaries above.

The live Delta for Business landing page came out of the same system described above: the SEO / GEO markdown specs, the tokenized React components, the agent-ownership boundaries, and the verification gates between phases. Below are captures of the live pages — open the full site in a new tab to click through it yourself.

delta-for-business.vercel.app Open
Delta for Business live homepage: a navy header nav, a 'Delta for Business' hero headline with three value props and a Get Started button, beside photos of a business traveler working in a Delta cabin and a Delta aircraft above the clouds.

Inside the live site

Live 'Compare all 7 cards' page: a side-by-side comparison table of four personal and three business Delta SkyMiles American Express cards, listing annual fee, welcome bonus and earn rates.
Card comparison · /cards/compare · click to zoom
Live guided selector: a 'Get started with Delta for Business' quiz that asks for the company's annual Delta spend and routes the user to the right plan tier.
Guided selector · progressive disclosure · click to zoom
Guided selector (Quiz) · progressive disclosure

A few short questions instead of a tier comparison wall.

Instead of dropping users onto a tier comparison wall, the site asks a few short questions and walks each user to the right product and tier. The flow is built on progressive disclosure, showing only what the user needs to decide the next step.

A manager surface designed around the daily workflow.

Built independently by a teammate.

The Benefits Calculator was built independently in Figma Make by Brian Glennon. It matters to this case study as the trigger for the broader progressive-disclosure / guided-selector work that now sits on the public site.

Two rounds, a Tree Test, and a live-site CRO micro-survey.

The numbers below are real and verifiable in the transcripts, except where marked projected.

Run in collaboration with UserTesting, a learning exchange for both teams: we got a real remote-testing platform and panel, and shared our research framing and findings back.

Capturing real-traffic signal beyond the lab.

What ships now, and what comes next.

The logical next chapter, mostly from the interviews.

7/10 vs 6/10New site vs old (head-to-head)
4.33/5Ease-of-use
100%Task success
0%Rage clicks
5 + 2 + 1Interviews · testing rounds · CRO experiment
20/25Startups ready · Mid-Market not yet

What surprised me about the agentic build was where the split actually fell. I expected to spend my time on structure and let the agents handle the small judgment calls. It was the other way around. Five agents with clean file-ownership boundaries produced 63 correct pages and 55 working components without me touching the file tree — routing, data shape, component boundaries, all of that held up. What they couldn't do was see their own output: a red stroke reading as an error state, a grid with the wrong proportions, a badge on the wrong background. Thirteen of 34 commits were me fixing exactly that, not bugs. Agentic build earns its place anywhere a rule can be written down and mechanically checked — tokens, types, routes, metadata. It doesn't earn its place anywhere the only real test is "does this look right," which is most of what a design system is actually for. What I took from the project as a whole: owning structure across three connected products at once; running a tokenized design system and an agentic build pipeline end-to-end while knowing exactly which decisions I couldn't delegate; separating what users said from what we interpreted; and knowing when to lead, when to delegate, and when to absorb work to protect the deliverable.

Want the full story?

Explore the live prototype, or see the rest of my work.

Liked this case study?

If this is the product thinking your team needs, let's bring it to your company.

I work end-to-end (research, design systems and agentic builds) on enterprise and B2B products. If you'd like this applied at your company, let's talk.