Running Crazy 8s with AI

Project Overview

I ran a Crazy 8s ideation sprint augmented by AI (ChatGPT) to explore mobile-first layouts for a “Shop Cards” experience, where Business cards ⊇ Personal cards (everything personal plus business-only benefits). I asked the AI to output XML/Markdown layout specifications for eight distinct patterns, then rendered and previewed them as interactive screens using code generated in-session.

The outcome: high-variance concepts, reusable UI primitives (e.g., TwoColumnCompare, BenefitMatrix, BottomDrawer), and a clear decision path to a hybrid solution.

ROLE & DURATION

Lead, AI Enablement | EPAM

Keywords: design thinking, Crazy 8s, AI-assisted ideation, mobile UX, layout specification, prototyping, prompt engineering

November 2025

Table of Contents

Scope disclaimer (Crazy 8s): What it is & where it fits

Crazy 8s is a fast, divergent ideation exercise where each participant explores 8 distinct ideas in ~8 minutes to deliberately widen the solution space. It typically occurs after problem framing / research synthesis and before concept selection and prototyping i.e., in the early Ideate phase of the Double Diamond (between Discover/Define and Develop/Deliver).

In this case study, we intentionally did not optimize for brand communication, pixel‑perfect specs, or final tokens. Crazy 8s prioritizes breadth over polish. Our goal was to maximize idea diversity across components, compositions, and interaction patterns—and we achieved that with eight materially different, mobile‑first directions. Brand voice, legal/compliance copy, design tokens, and production‑level specs are deliberately parked for the convergence phase (prioritization, prototyping, validation).

Why this case study

Focus: process over brand. AMEX serves as a realistic scenario to ground requirements, but the study centers on how to use AI to run Crazy 8s and turn textual specs into visual prototypes quickly.

Outcomes: speed, breadth, and structure. AI amplified divergence (8 ideas in minutes), formalized design constraints inside prompts, and accelerated convergence via side-by-side previews.

Framing the Problem

Context (from Define > Ideate): Users come to shop for cards on mobile. Card types include Personal and Business, where Business = Personal benefits + business‑only tools. Early research and requirement mapping confirm confusion around where business benefits differ and how to compare quickly.

How Might We (HMW):

How might we clearly communicate that Business cards include all Personal benefits—plus business‑only tools—within a mobile card‑shopping experience that minimizes cognitive load, supports quick comparison, and remains accessible?

Constraints & signals

Mobile-first, one‑glance comprehension; progressive disclosure for details.
Comparison affordances that don’t overwhelm (legends, inline diffs, drawers).
Strong accessibility (labels, contrast, text-only fallbacks).
Content-resilient layouts that localize and scale across product lines.

Approach: Crazy 8s, augmented by AI

Traditional Crazy 8s: 8 ideas in ~8 minutes per participant.

AI-augmented variant I used:

Codify constraints in the prompt (e.g., “business ⊇ personal,” mobile-first, a11y notes).
Force representation as layout code (XML/Markdown) so every idea is visually describable and prototype-ready.
Push for variety through explicit instructions (switch components, interaction patterns, disclosure modes).
Immediate visualization: Convert XML to UI (React/HTML) inside ChatGPT’s code preview to get tappable prototypes.
Rapid critique loop: Annotate pros/cons, adjust prompts, re-generate variants.

Prompt structure

Below is a simplified version of the prompt I used to kick off ideation.

The prompt encodes the mental model and interaction palette.
The output format becomes a shared contract between ideation and prototyping.

ROLE:

You are my design thinking partner.

TASK:

Generate 8 distinct, mobile-first layout specifications that make clear: Business cards include all Personal benefits plus extras.

REQUIREMENTS:

– Output as [markdown/XML] so I can turn it into visual mock-up quickly.

– Each idea must be visually concrete: screens, sections, components, and interactions.

– Maximise variety: toggles, tabs, chips, drawers, split panes, accordions, quizzes, 3D stacks, narrative timelines, etc.

– Consider a11y: labels, legends, high-contrast fallbacks.

The eight AI-generated directions (snapshot)

Each was delivered as an XML-like layout spec. Here’s a condensed view of the eight with the core idea and signature components.

Toggle + Stacked Benefits: Segmented control to switch Personal/Business; BenefitStack with legend (✓ = Personal, + = Business-only); sticky compare sheet.
Side-by-Side Swipe: Split-pane carousel to swipe Personal vs Business; tap benefits for modal details.
Progressive Quiz → Reveal: Two-step intent quiz; result panel that highlights “Everything in Personal, plus …” with expandable list and CTAs.
Sticky Tabs + Diff Badges: Top tabs; BenefitMatrix shows deltas with “Business-only” badges; card lists per tab.
Journey Narrative: Storyboard scenes (morning, month-end, team travel) mapping Personal vs Business benefits in real-life contexts.
Chips Filter + Compare Drawer: Filter chips by benefit theme; mixed grid tiles; bottom drawer opens a compact comparison.
AR Card Stack: Flip/long-press interactions on 3D card stack; explicit a11y text comparison fallback.
Truth Banner + Accordions: One-line truth banner; accordions for Personal and Business-only extras; inline micro-compare rows.

Design principle reinforced across variants: Communicate the set‑inclusion relationship (Business = Personal + extras) via legends, badges, banners, and row-level diffs.

From text to screens: turning XML into prototypes

One advantage of generating structured layout specs (XML worked better for me) is that they’re trivially compilable into previewable screens.

Workflow I used

Generate XML in ChatGPT.
Transform to JSX (small script or in-chat conversion) while preserving component names (e.g., TwoColumnCompare, BottomDrawer).
Preview directly in the chat code runner or a local sandbox to check spacing, hierarchy, and thumb reach.

Benefits

Removes handoff friction between ideation and UI.
Elevates evaluability: you critique interactions, not just wire boxes.
Encourages a design system mindset (reusable primitives across variants).

Visual Output in Chat GPT

Selection criteria & decision

I scored concepts using a light rubric (1–5):

Clarity of the “Business ⊇ Personal” model
Scanability on mobile (1-screen comprehension)
Effort to implement (tokens, components, backend tie-ins)
A11y strength (labels, fallbacks)
Extensibility (localization, more product lines)

Shortlist chosen for convergence

#1 Toggle + Stacked Benefits as the primary (fast comprehension, clean compare sheet, low build risk).
#6 Chips + Compare Drawer as a power-user layer (select by benefit themes, bottom-drawer compare).

These combine into a hybrid: clear entry, progressive disclosure, and flexible exploration without kicking users out of flow.

Metrics & leading indicators

Comprehension time: Can users articulate “Business ⊇ Personal” within 3–5 seconds?
Tap intent mix: % opening the compare sheet vs. card details indicates whether the model is understood.
Scroll depth: Are users discovering business-only extras without pogo-sticking?
Quiz completion rate (for the #3 variant, if used).

What AI did well (and what needed human steering)

Strengths

Volume & variety on demand (8+ patterns without creative stall).
Structure: predictable component schemas that are easy to compile.
Consistency: a11y reminders, legends, and repeated primitives.

Where human judgment mattered

Picking the right trade-offs between clarity and novelty.
Copy tone and market-specific terminology.
Polish: spacing, thumb zones, and device-specific micro-interactions.
Compliance nuance (e.g., disclosures, eligibility messaging).

What I’d do next

Usability micro-test: measure comprehension and path choices.
Refine the hybrid (#1 + #6) with guardrails for localization and variable benefit sets.
Design tokens: tighten type scale, grid, and spacing so components travel well across journeys.
Document the pattern as a shareable recipe (prompt + components + a11y notes).

Crazy 8s with AI is not about replacing creative judgment, it’s about removing friction between ideation and evaluable UI. By insisting on layout-structured output and instant code previews, we moved from “ideas on paper” to tappable, testable screens in one sitting. The constraints let us validate clarity across multiple interaction modes and extract reusable design patterns for future journeys.

Appendix: Crazy 8s in XML

(Output from the prompt)

1) Toggle + Stacked Benefits with “Business ⊇ Personal” Callouts

Copy to Clipboard

<Screen name="Card Shop — Toggle Variant">
  <Header>
    <Title>Find the right AMEX card</Title>
    <Subcopy>Personal or Business—switch to compare benefits.</Subcopy>
  </Header>

<ControlBar>
    <SegmentedToggle aria-label="Card type">
      <Option selected id="personal">Personal</Option>
      <Option id="business">Business</Option>
    </SegmentedToggle>
    <InfoPill icon="info" text="Business includes all Personal benefits + extras"/>
  </ControlBar>

<CardScroller horizontal>
    <CardTile>
      <Art slot="left"/>
      <TextBlock>
        <CardName>Gold</CardName>
        <Tags>Dining · Rewards</Tags>
      </TextBlock>
      <CTA>See details</CTA>
    </CardTile>
    
  </CardScroller>

<BenefitStack>
    <SectionTitle>Benefits</SectionTitle>
    <List role="list">
      <BenefitItem icon="check" label="Earn Membership Rewards"/>
      <BenefitItem icon="check" label="Airport Lounge Access"/>
      <BenefitItem icon="plus" label="Expense Management Tools" show-when="business"/>
      <BenefitItem icon="plus" label="Employee Cards with Limits" show-when="business"/>
    </List>
    <Legend>
      <Chip icon="check" text="Personal"/>
      <Chip icon="plus" text="Business-only"/>
    </Legend>
  </BenefitStack>

<StickyCompareBar>
    <Text>Compare Personal vs Business</Text>
    <Button action="sheet.compare">Open</Button>
  </StickyCompareBar>

2) Side-by-Side Swipe (Split Pane Carousel)

Copy to Clipboard

<Screen name="Card Shop — Split Swipe">
  <Header>
    <Title>Personal vs Business</Title>
    <Subcopy>Swipe to compare. Tap any benefit for details.</Subcopy>
  </Header>

<SplitPaneCarousel>
    <Pane label="Personal">
      <KeyBenefits>
        <KB>Reward points on every spend</KB>
        <KB>Dining & travel offers</KB>
        <KB>Purchase protection</KB>
      </KeyBenefits>
      <CardMiniGrid>
        <MiniCard name="Gold"/>
        <MiniCard name="Platinum"/>
      </CardMiniGrid>
    </Pane>
    <Pane label="Business" badge="includes all personal +">
      <KeyBenefits>
        <KB>All Personal benefits</KB>
        <KB>Employee cards & limits</KB>
        <KB>Spend analytics & exports</KB>
        <KB>Accounting integrations</KB>
      </KeyBenefits>
      <CardMiniGrid>
        <MiniCard name="Business Gold"/>
        <MiniCard name="Business Platinum"/>
      </CardMiniGrid>
    </Pane>
  </SplitPaneCarousel>

<TapForDetailModal trigger="KB">
    <BenefitDetail>
      <Title>Employee Cards</Title>
      <Body>Issue cards, set limits, export statements.</Body>
    </BenefitDetail>
  </TapForDetailModal>
</Screen>

3) Progressive Quiz → Personalized Reveal

Copy to Clipboard

4) Sticky Tabs + Inline Diff Badges

Copy to Clipboard

<Screen name="Card Shop — Sticky Tabs">
  <Header>
    <Title>Shop Cards</Title>
    <Tabs sticky>
      <Tab id="tab-personal" selected>Personal</Tab>
      <Tab id="tab-business">Business</Tab>
    </Tabs>
  </Header>

<BenefitMatrix>
    <Row>
      <Label>Rewards</Label>
      <Cell tab="personal">✓</Cell>
      <Cell tab="business">✓</Cell>
    </Row>
    <Row>
      <Label>Expense tools</Label>
      <Cell tab="personal">—</Cell>
      <Cell tab="business"><Badge type="diff">+ Business-only</Badge></Cell>
    </Row>
    <Row>
      <Label>Employee cards</Label>
      <Cell tab="personal">—</Cell>
      <Cell tab="business"><Badge type="diff">+ Business-only</Badge></Cell>
    </Row>
  </BenefitMatrix>

5) Timeline / Journey Story (Narrative Comparison)

Copy to Clipboard

6) Chips Filter + Inline Compare Drawer

Copy to Clipboard

<Screen name="Card Shop — Chips + Drawer">
  <Header>
    <Title>Filter by what matters</Title>
  </Header>

<FilterChips scrollable aria-label="Filter benefits">
    <Chip selected id="rewards">Rewards</Chip>
    <Chip id="travel">Travel</Chip>
    <Chip id="controls">Employee Controls (Business)</Chip>
    <Chip id="accounting">Accounting (Business)</Chip>
  </FilterChips>

<MixedGrid>
    <InfoTile variant="personal">
      <Title>Rewards you’ll love</Title>
      <Bullets>
        <Item>Dining & travel points</Item>
        <Item>Purchase protection</Item>
      </Bullets>
      <Button>View Personal Cards</Button>
    </InfoTile>

<InfoTile variant="business" ribbon="includes personal +">
      <Title>Run-the-business tools</Title>
      <Bullets>
        <Item>Employee cards & limits</Item>
        <Item>Spend analytics & exports</Item>
      </Bullets>
      <Button action="drawer.compare">Compare</Button>
    </InfoTile>
  </MixedGrid>

7) AR Card Stack (3D Cards + Peekable Benefits)

Copy to Clipboard

8) “One Line Truth” Banner + Inline Accordions

Copy to Clipboard

<Screen name="Card Shop — Banner + Accordions">
  <Header>
    <Title>Which card type fits?</Title>
  </Header>

<TruthBanner icon="stack">
    <Text><Strong>Business cards include every Personal benefit—plus tools for teams, control, and accounting.</Strong></Text>
  </TruthBanner>

<AccordionGroup>
    <Accordion id="acc-personal" title="Personal benefits">
      <Bullet>Rewards, offers, protections</Bullet>
      <Bullet>Lounge access on select cards</Bullet>
      <LinkButton>Explore Personal Cards</LinkButton>
    </Accordion>
    <Accordion id="acc-business" title="Business-only extras" badge="+">
      <Bullet>Employee cards with spend limits</Bullet>
      <Bullet>Expense management & analytics</Bullet>
      <Bullet>Accounting exports & integrations</Bullet>
      <LinkButton>Explore Business Cards</LinkButton>
    </Accordion>
  </AccordionGroup>

<InlineCompare>
    <Row label="Rewards">Personal: ✓ · Business: ✓</Row>
    <Row label="Employee cards">Personal: — · Business: ✓</Row>
    <Row label="Accounting sync">Personal: — · Business: ✓</Row>
  </InlineCompare>
</Screen>