Prompt Library

Design a landing page hero section with an asymmetric split layout. The left side (60% width) contains the headline, subtitle, and two CTA buttons stacked vertically. The right side (40% width) shows a product screenshot rotated 3 degrees with a subtle drop shadow on a colored background panel that extends past the container edge. Use a dot grid pattern as the background texture instead of a gradient. The headline should be left-aligned, max 8 words, with an accent color underline on the key word only.

Design a features section using a bento grid layout (not equal columns). Use a 4-column grid where the first feature spans 2 columns and 2 rows with a large illustration, the second and third features are single cells stacked vertically, and the fourth feature spans 2 columns at the bottom with a horizontal layout. Each card has a different background tint (very subtle, under 5% opacity). No icons in colored circles — use inline SVG illustrations or abstract shapes instead.

Design an analytics dashboard with a narrow left sidebar (240px) for navigation and a main content area split into three zones: a top strip of 5 KPI cards in a single row (each 120px wide, showing metric name, large number, and a tiny sparkline), a middle section with one large chart (line chart with area fill, 60% width) next to a vertical bar chart (40% width), and a bottom section with a sortable data table showing 8 rows. Use monospace font for all numbers. The color palette should use only gray, one blue, and one green — no red, no orange, no purple.

Design a product detail page where the product image gallery is full-width at the top (not side-by-side with details). Show 4 product images in a masonry-style grid where the main image is 2x2 and three smaller images fill the remaining space. Below the gallery, split the page: left side (55%) shows product title, price with a strikethrough original price, color swatches as clickable circles with borders, and size selector as horizontal pill buttons. Right side (45%) shows a sticky purchase card with quantity selector, add-to-cart button, and 3 trust badges in a row (free shipping, returns, secure checkout) using small icons with labels.

Design a chat interface with a 280px left sidebar listing 8 conversation threads (each showing an avatar, title, preview text, and timestamp), and a main chat area. The chat shows alternating user messages (right-aligned, blue background, rounded corners with flat bottom-right) and AI messages (left-aligned, gray background, rounded corners with flat bottom-left). AI messages include a thinking indicator with three animated dots. Below the chat, show a message input bar with a text field, attachment button, and send button. Add a subtle header showing the current chat title and a model selector dropdown.

Design a settings page with a vertical left navigation showing 6 settings categories (General, Profile, Notifications, Security, Billing, API). The main area shows the currently selected category with form controls organized in cards. Each card has a section title, description, and 2-3 controls. Use toggle switches for boolean settings, dropdown selects for choices, and text inputs for values. Show a sticky bottom bar with Cancel and Save buttons that appears only when changes are made. Include a "Danger Zone" card at the bottom with red border and a delete account button.

Design a 4-screen mobile onboarding flow (375px wide, 812px tall). Screen 1: Welcome with a large illustration taking 60% of screen height, app name, and tagline. Screen 2: Feature highlight with an animated phone mockup showing the key feature. Screen 3: Permission request with clear explanation of why the app needs notifications, with Allow and Skip buttons. Screen 4: Profile setup with avatar upload circle, name field, and role dropdown. All screens share a progress indicator (4 dots) at the top and a primary CTA button at the bottom. Use a consistent illustration style across all screens.

Design a pricing section with 3 tiers (Starter, Pro, Enterprise) as vertical cards. The Pro tier should be visually elevated — larger, with a "Most Popular" badge, a colored top border (4px), and a subtle background tint. Each card shows: plan name, monthly price in large text, a brief tagline, a bulleted feature list of 6 items where included items have green checkmarks and excluded items have gray X marks with strikethrough text, and a CTA button. Below the cards, add a "Compare all features" expandable section that shows a full comparison table with grouped feature rows and checkmark/X indicators per tier.

Design a magazine-style hero section. Full-width background image with a multi-layered text overlay. The headline uses a large serif font (72px+) with mixed weights — first word light, second word bold italic. Subtitle in sans-serif, small caps. A thin horizontal rule separates headline from a pull-quote. No buttons above the fold — the first CTA appears after a scroll indicator (animated chevron). Color overlay: duotone blue-purple filter on the image.

Design a hero with maximum whitespace. Center a single sentence (max 12 words) in a large serif font on a pure white background. Below the text, a single text link with an arrow (not a button). No images, no illustrations, no gradients. The sentence should have one word in a different color (accent). Footer-style navigation at the very bottom of the viewport.

Design a comprehensive footer with dark background (#111). Layout: 5 link columns (Product, Solutions, Resources, Company, Legal) with 6-8 links each. Top section: logo + tagline + newsletter signup (email input + button inline). Bottom bar: copyright, language selector dropdown, social icons (GitHub, Twitter, LinkedIn, YouTube), and a "Back to top" button. All text in gray (#9CA3AF), links highlight to white on hover. Mobile: 2 columns + accordion.

Design a split-screen CTA section. Left half: dark background with white text, headline, 3 benefit bullets with custom icons, and a "Start Free Trial" button. Right half: light background with a product screenshot in a browser frame mockup, tilted 2 degrees with shadow. The two halves should feel like one cohesive unit, not two separate sections. A curved SVG divider separates the halves instead of a straight line. Maximum width: 100vw (truly edge-to-edge).

Design a "wall of love" testimonial section with 12+ testimonials in a masonry grid (4 columns). Each card: rounded corners, subtle border, pull-quote text (varying lengths), author name, role, company, and a small avatar. Some cards have a star rating (5 stars), others don't. 2-3 cards should be "featured" with accent border and slightly larger text. Cards should have varying heights based on quote length. Section header: "Don't take our word for it" with a count badge showing "200+ reviews".

Design a statistics section with 4 large numbers in a row. Each stat: animated counter that counts up from 0 on scroll-into-view, a short label below, and a subtle trend arrow (up/down) with percentage. Numbers use tabular monospace font (40px+). Background: subtle gradient from transparent to a 2% tint of the accent color. Dividers between stats: thin vertical lines. Responsive: 2x2 grid on tablet, 1 column stacked on mobile with horizontal dividers.

Design a logo cloud with two rows of company logos scrolling in opposite directions (top row left, bottom row right) as infinite marquees. Logos are grayscale by default, full color on hover. 16 logos total (8 per row). Speed: slow and smooth (30s per cycle). Section title: "Trusted by leading teams" in small uppercase text centered above. Background: clean white. Logos should be evenly sized within 120px x 40px containers. Pause marquee on hover.

Design a features section with 4 vertical tabs on the left (each: icon, title, one-line description) and a large preview area on the right (60% width). The preview shows a realistic app screenshot that cross-fades when switching tabs. Active tab: accent left border (3px), bold title, elevated card effect. Inactive tabs: subtle text, no border. Below the preview: 3 small metric badges showing specific numbers ("50% faster", "99.9% uptime", "500+ integrations"). Tab transitions: smooth 300ms crossfade. Mobile: tabs become horizontal scrollable pills above the preview.

Design a SaaS metrics dashboard. Top bar: date range picker (Last 7 days / 30 days / 90 days / Custom) and export button. KPI strip: MRR ($42,800, +12%), Active Users (1,234, +8%), Churn Rate (2.1%, -0.3%), NPS (72, +5). Main area: left chart (70%) showing MRR growth as area chart with goal line; right panel (30%) showing top 5 features by usage as horizontal bars. Bottom: recent activity feed (last 10 events with user avatar, action, timestamp). Color palette: indigo primary, emerald for positive, red for negative.

Design an e-commerce admin dashboard. Sidebar (220px): logo, nav items (Dashboard, Orders, Products, Customers, Marketing, Settings). Main content: Top row: 4 KPI cards (Revenue $18.2K, Orders 342, Conversion 3.2%, AOV $53.20) with sparklines. Middle: split between a revenue chart (stacked area: online vs in-store, last 30 days) and a donut chart showing traffic sources (Organic 42%, Paid 28%, Social 18%, Direct 12%). Bottom: "Recent Orders" table with columns: Order ID, Customer, Items, Total, Status badge (Shipped/Processing/Delivered), Date. 6 rows of realistic data.

Design a real-time operations dashboard. Dark theme (#0A0A0A background). Header: system status bar showing "All Systems Operational" with green dot, 99.97% uptime badge, and UTC clock. Grid layout: Top-left (2x1): live request rate chart (line chart with 1-minute granularity, last 60 minutes, current value: 2,847 req/s). Top-right (1x1): error rate gauge (0-5%, current: 0.12%). Middle-left (1x1): latency histogram (p50: 23ms, p95: 89ms, p99: 245ms). Middle-right (1x1): active connections counter (3,291) with animated number. Bottom: scrolling log viewer with color-coded severity levels (INFO blue, WARN yellow, ERROR red).

Design a project management dashboard. Top: project selector dropdown, team members avatar stack (5 members + "+3"), and a progress bar (67% complete). Left panel (65%): Kanban board with 4 columns (Backlog, In Progress, Review, Done) showing 3-4 cards each. Cards: title, assignee avatar, priority dot (red/yellow/green), due date. Right panel (35%): Timeline/Gantt showing 5 workstreams as horizontal bars across a 4-week calendar. Below: recent activity log showing commits, comments, and status changes.

Design a product collection page. Header: full-width banner (200px tall) with collection name "Summer Essentials" and breadcrumb. Below: filter bar with Sort dropdown (Featured, Price Low-High, Newest), 4 filter pills (Size, Color, Price Range, Brand), view toggle (grid/list), and results count "Showing 24 of 156 products". Product grid: 4 columns of product cards. Each card: 4:5 ratio image, brand name (small, uppercase), product name (1-line truncate), price (bold), original price strikethrough if on sale, star rating (4.3/5), 2 color swatches. Hover: quick-add button overlay. Pagination: numbered with prev/next arrows.

Design a shopping cart page. Left column (65%): cart items list. Each item: thumbnail (80x80), product name, variant info (Color: Navy, Size: M), quantity stepper (+/-), unit price, line total, remove link. Below items: promo code input with "Apply" button. Right column (35%): order summary card (sticky). Shows: Subtotal, Shipping (Free over $50), Tax, Total (large, bold). "Proceed to Checkout" button (full-width, primary). Below summary: accepted payment icons row (Visa, MC, Amex, PayPal, Apple Pay). Bottom of page: "You might also like" carousel showing 4 recommended products.

Design a single-page checkout (not multi-step). Left column (60%): accordion sections that expand one at a time — Contact (email, phone), Shipping Address (name, address, city, state, zip, country), Shipping Method (3 radio options: Standard Free 5-7 days, Express $9.99 2-3 days, Next Day $19.99), Payment (card number with brand detection icon, expiry MM/YY, CVV, name on card). Right column (40%): sticky order summary showing each item (thumbnail, name, qty, price), subtotal, shipping, tax, promo discount line, total. Trust badges: SSL, money-back guarantee, secure checkout.

Design a product review section. Top: average rating (4.6) with large star display, total review count (2,847 reviews), rating distribution bar chart (5-star: 68%, 4-star: 19%, 3-star: 8%, 2-star: 3%, 1-star: 2%). Filter bar: "Most Recent" / "Most Helpful" / "Highest Rated" / "Lowest Rated" and a search reviews input. Review cards: star rating, title (bold), review text (3-line clamp, expandable), author name, "Verified Purchase" badge, date, photo thumbnails (max 3, click to enlarge), helpful button with count ("Was this helpful? 23 people found this helpful"). Write Review CTA button with star icon.

Design a notification inbox panel. Header: "Notifications" title, unread count badge (7), "Mark all as read" text button, filter tabs (All, Unread, Mentions, Assigned). Notification list: each item has an icon (color-coded by type: comment blue, mention purple, assignment green, alert red), title, description (1-line truncate), timestamp ("2 minutes ago", "Yesterday"), unread dot indicator (blue), and hover actions (mark read, archive). Group notifications by date ("Today", "Yesterday", "This Week"). Empty state for "Mentions" tab: illustration + "No mentions yet" message. Bottom: "View all notifications" link.

Design a file manager interface. Top bar: breadcrumb path (Home > Projects > Design Assets), search input, view toggle (grid/list), sort dropdown, "Upload" button (primary), "New Folder" button (secondary). Grid view: file/folder cards showing thumbnail preview (images show actual preview, folders show folder icon with item count), name (1-line truncate), modified date, file size. Selected items: blue ring border, floating action bar appears at bottom ("Move", "Copy", "Download", "Delete"). Right sidebar (collapsible): file details panel showing full preview, name, size, type, created/modified dates, sharing settings, version history. Context menu on right-click: Open, Rename, Share, Move to, Download, Delete.

Design a user profile page. Header: cover photo (3:1 aspect ratio) with edit button overlay. Avatar (96px) overlapping the cover photo bottom edge. Below avatar: display name, handle (@username), bio (2 lines), location, website link, join date. Stats row: 1,247 Posts, 8.9K Followers, 342 Following. Edit Profile button (outline) and more options (⋯) button. Tab bar: Posts, Replies, Media, Likes. Content area: list of post cards matching the active tab. Each post card: text content, optional image, engagement stats (likes, replies, reposts), timestamp. Responsive: cover photo crops on mobile, stats go horizontal-scroll.

Design a Kanban board with 5 columns: Backlog (8 cards), To Do (5), In Progress (3), Review (2), Done (4). Each column: header with title, card count, and "+" add button. Cards: title (1-2 lines), assignee avatar (bottom-right), label dots (colored by category: Design pink, Frontend blue, Backend green, Bug red), due date (yellow if this week, red if overdue). Drag handle (grip dots) on hover. Column headers: subtle background tint matching their status. Horizontal scroll on small screens. WIP limit indicator on "In Progress" column (3/3, shown in yellow). Quick add: clicking "+" opens inline input at top of column.

Design a calendar week view. Header: month/year, prev/next arrows, Today button, view switcher (Day, Week, Month). Left: time column (7 AM - 9 PM, hourly labels). Grid: 7 day columns with date headers (Mon 24, Tue 25, etc.), today's column highlighted with accent top border. Events as colored blocks spanning their duration: blue for meetings (title, time, attendee count), green for focus time, purple for external, orange for reminders. Overlapping events side-by-side. Current time indicator: red horizontal line with dot. Bottom-left: mini month calendar. Clicking empty space opens "New Event" popover. All-day events shown in a dedicated strip above the time grid.

Design an advanced data table showing customer records. Toolbar: search input, filter button with active filter count badge, column visibility toggle, export dropdown (CSV, Excel, PDF), and "Add Customer" button. Table columns: checkbox (bulk select), Name (with avatar), Email, Status (Active/Inactive badge), Plan (Free/Pro/Enterprise badge), Revenue ($), Last Active (relative time), Actions (⋯ menu). Features: sortable columns (click header, show arrow indicator), resizable column widths, sticky header on scroll, alternating row backgrounds, hover row highlight. Footer: rows per page selector (10/25/50/100), pagination (Showing 1-10 of 847), bulk action bar (appears when rows selected: "3 selected — Delete, Export, Assign").

Design a mobile social feed (375x812). Top bar: camera icon (left), app logo (center), direct messages icon with unread badge (right). Stories row: horizontal scroll of story circles (user avatar with gradient ring for unseen, gray ring for seen), first circle is "Your Story" with + badge. Feed: cards with author row (avatar, username, verified badge, timestamp, ⋯ menu), full-width image (1:1 ratio), engagement bar (heart, comment, share, bookmark icons with counts), caption with username bold + text, "View all 47 comments" link, "Add a comment..." input. Pull-to-refresh. Bottom tab bar: Home (filled), Search, Create (+), Notifications (with dot), Profile.

Design a mobile fitness tracker screen (375x812). Top: greeting ("Good morning, Alex"), date, profile avatar. Main widget: circular progress ring (steps: 7,432 / 10,000) with step count in center, calories and distance below the ring. Daily activity cards row (horizontal scroll): Steps (with walking icon), Calories, Distance, Active Minutes — each with value, unit, and mini progress bar. Below: "Today's Workouts" section with 2 completed workout cards (Morning Run: 5.2km, 28:30, 320 cal — Yoga: 45 min, 180 cal) showing route map thumbnail or exercise icon. Bottom: weekly bar chart showing activity levels per day (Mon-Sun). Tab bar: Home, Workouts, Social, Profile.

Design a food delivery app home screen (375x812). Top: delivery address with chevron dropdown ("123 Main St"), search bar with filter icon. Promotions: horizontal scroll carousel (3 banner cards, 16:9 ratio, with "30% off first order" type messaging). Categories: horizontal scroll of circular icons (Pizza, Sushi, Burgers, Indian, Thai, Healthy, Desserts, Coffee). "Popular Near You" section: restaurant cards with food image (3:2 ratio), restaurant name, cuisine type, rating (4.5 ⭐), delivery time ("25-35 min"), delivery fee ("$2.99" or "Free"), distance. 2 columns. "Reorder" section: last 3 orders as compact horizontal cards with restaurant logo and "Reorder" button. Bottom tab bar: Home, Search, Orders, Profile.

Design a mobile banking home screen (375x812). Top: greeting, notification bell with badge. Card widget: credit/debit card visualization (dark gradient, card number partially masked ****4829, cardholder name, expiry, Visa/MC logo). Positioned over the card: balance "$12,847.32" with eye toggle to hide. Quick actions row: Send, Request, Pay Bills, Top Up (circular icon buttons). "Recent Transactions" list: each row has merchant icon/logo, merchant name, category tag, date, amount (+green/-red). Group by date (Today, Yesterday). Transaction categories: Shopping 🛍️, Food 🍕, Transport 🚗, Subscriptions 📺. Bottom: spending insights card "You've spent 15% less on dining this month" with mini chart. Tab bar: Home, Cards, Payments, More.

Design a mobile music player "Now Playing" screen (375x812). Background: blurred and color-extracted from album art. Top bar: chevron-down to dismiss, ⋯ options menu. Album art: large square (300x300), centered, with subtle shadow. Song title (bold, 20px), artist name (regular, 16px, muted). Progress bar: thin slider with current time (2:31) and total time (4:15), buffered progress shown subtly. Controls row: shuffle, previous, play/pause (large, 64px circle), next, repeat. Volume slider with speaker icons. Bottom row: device/speaker selector (AirPods icon + name), share button, queue button. Lyrics button that expands a scrollable lyrics overlay.

Design a 5-step SaaS onboarding wizard. Left sidebar (30%): vertical stepper with step numbers, titles, and checkmarks for completed steps. Steps: 1. Create Workspace, 2. Invite Team, 3. Connect Tools, 4. Import Data, 5. Set Preferences. Right content area (70%): current step form. Step 2 "Invite Team": email input with "Add" button, list of added teammates (email, role dropdown: Admin/Editor/Viewer, remove X), "Send Invitations" button. Bulk invite: "Paste email list" textarea. Skip link at bottom. Progress: "Step 2 of 5" with completion bar. Estimated time remaining: "~3 minutes left". Exit: "I'll do this later" link in bottom-left.

Design a billing settings page. Top card: current plan summary showing plan name "Pro Plan", price "$49/month", renewal date "Renews Apr 15, 2026", usage bar (8/10 seats used). "Change Plan" and "Cancel Subscription" buttons. Payment method card: Visa ending 4242, expiry 12/27, "Update" link. Below: billing history table with columns: Date, Description, Amount, Status (Paid green badge / Failed red badge), Invoice (download PDF link). Filter by year dropdown. Usage section: bar chart showing monthly API calls with limit line. Upcoming charge preview: "Next invoice: $49.00 on Apr 15". Alert: "You're at 80% of your seat limit" with upgrade CTA.

Design an API keys management page. Header: "API Keys" title, documentation link, "Create New Key" button (primary). Keys table: Name, Key (masked except last 4 chars, with copy button), Created date, Last Used (relative time), Status toggle (Active/Revoked), Actions (Regenerate, Delete). New key modal: name input, permissions checkboxes grouped (Read, Write, Admin), IP whitelist textarea (optional), expiry dropdown (Never, 30 days, 90 days, 1 year). Created key display: full key shown once in a code block with "Copy" button and warning "This key won't be shown again". Rate limit info: "Current limit: 1,000 requests/minute" with usage sparkline.

Design an integrations page. Top: search bar, category filter pills (All, CRM, Communication, Storage, Analytics, Payment, Custom). Grid of integration cards (3 columns): each shows app icon (48px), app name, category badge, brief description (1 line), install count ("5.2K installs"), and "Connect" button (or "Connected ✓" green state). Featured/recommended integrations: top row with larger cards, "Recommended" badge. Connected integrations section above the grid: horizontal scroll of small connected app icons with status indicators (green dot = active, yellow = needs attention). Settings: clicking connected integration opens a slide-over panel with configuration options and disconnect button.

Design a case study page layout. Hero: full-width project image (16:9), below: project title (36px serif), client name, year, services tags (Design, Development, Strategy). Metrics row: 3 large stats ("40% increase in conversions", "2x faster load time", "98% client satisfaction"). Content: alternating full-width image + text sections. Text sections: 2-column layout with section header (left, sticky) and body copy with bullet points (right). Design decisions section: before/after image slider. Pull-quote from client (large serif, 28px, with quotation marks, attribution). Tech stack: horizontal row of technology logos. Navigation: "Previous Project" / "Next Project" with thumbnails at page bottom.

Design a long-form blog article page. Centered content column (680px max-width). Top: category breadcrumb, title (32px, serif), subtitle (18px, sans-serif), author row (avatar, name, role, publish date, read time "8 min read"), cover image (16:9, full column width). Content: body text (18px, 1.7 line-height), subheadings (24px), blockquotes (left accent border, italic), code blocks (dark bg, syntax highlighted), inline images with captions. Right margin: floating table of contents (sticky, shows current section highlighted). Social share buttons (fixed left side): Twitter, LinkedIn, Copy Link. Bottom: author bio card, "Related Articles" grid (3 cards), comment section with nested replies.

Design a complete SaaS homepage. Sections in order: (1) Navigation: logo, 4 links, "Sign In" text link, "Start Free Trial" button. (2) Hero: headline (6-8 words), subtitle (2 lines), email input + "Get Started" button inline, social proof ("Join 10,000+ teams"). (3) Logo cloud: 8 company logos, grayscale. (4) Features: 3 features in bento grid with screenshots. (5) How It Works: 3-step numbered process with connecting lines. (6) Testimonials: 3 cards with photos, quotes, names, companies. (7) Pricing: 3 tiers (Starter $0, Pro $29, Enterprise custom). (8) FAQ: 6 accordion items. (9) Final CTA: dark bg, headline, email capture. (10) Footer: 4 columns + newsletter. All sections alternate between white and subtle gray backgrounds.

Design a coming soon / waitlist page. Centered layout, single screen. Top: small logo mark. Center: product name in display font (48px), tagline in muted text, brief description (2 sentences, max 140 chars). Email signup: "Enter your email" input + "Join the Waitlist" button. Below: waitlist count ("2,847 people ahead of you") with animated counter. Social proof: "Backed by Y Combinator" or similar badge. Background: subtle animated gradient mesh (3 colors, slow morphing). Footer: social links (Twitter, LinkedIn), "Built by [team name]" link. Mobile: everything stacks vertically, gradient mesh fills viewport.

Design a modal dialog system showing 4 variants on one page. (1) Confirmation modal: "Delete Project?" with warning icon, description text, "Cancel" and "Delete" (red) buttons. (2) Form modal: "Create New Workspace" with name input, description textarea, visibility radio (Public/Private), and "Create" button. (3) Success modal: green checkmark animation, "Payment Successful" heading, amount, "View Receipt" and "Close" buttons. (4) Full-screen modal: image gallery viewer with dark overlay, large image, prev/next arrows, image counter "3/12", close X button. All modals: rounded-xl, max-width varies, backdrop blur, centered vertically, scale-in animation on open.

Design 6 empty state variants in a 3x2 grid. Each: centered illustration (160px), heading, description (1-2 lines), and CTA button. (1) No search results: magnifying glass with X, "No results found", "Try different keywords". (2) Empty inbox: mailbox illustration, "All caught up!", "No new messages". (3) No projects: folder with +, "Create your first project", "Get Started" button. (4) Connection error: broken chain links, "Something went wrong", "Try Again" button. (5) Upgrade required: locked padlock, "This feature requires Pro", "Upgrade" button. (6) First-time user: waving hand, "Welcome! Let's get you set up", "Start Tour" button. Use a consistent illustration style across all 6 (line art, same stroke width, accent color highlights).

Design a toast notification system showing 5 variants stacked in the top-right corner of a page. (1) Success (green left border): checkmark icon, "Changes saved successfully", auto-dismiss timer bar. (2) Error (red left border): X icon, "Failed to upload file", "Retry" action link. (3) Warning (yellow left border): alert triangle, "Your session expires in 5 minutes", "Extend" button. (4) Info (blue left border): info icon, "New version available", "Update Now" link. (5) Loading (neutral): spinner icon, "Processing your request...", progress percentage. All toasts: white bg, shadow-lg, rounded-lg, close X button, 360px wide. Stacked with 8px gap. Entrance: slide-in from right. Exit: fade out + slide right. Max 3 visible, older ones queue.

User Onboarding Flow — Step-by-step flowchart showing new user signup through first value moment. Nodes: landing → signup form → email verify → profile setup → tutorial → dashboard. Branch: social login shortcut. Each node: rounded rect with icon, title, subtitle. Connecting arrows with labels. Decision diamonds for A/B paths. Color-code: green for happy path, amber for optional, red for drop-off risk. Include conversion % estimate at each step.

E-Commerce Checkout Journey Map — Horizontal journey map with 5 phases: Browse → Cart → Checkout → Payment → Confirmation. Each phase: user actions row, touchpoints row, emotions row (emoji scale from frustrated to delighted), pain points row (red flag icons), opportunities row (green lightbulb icons). Swim lanes for mobile vs desktop experience differences. Timeline bar at top with estimated duration per phase. Emotion curve graph overlaid connecting emoji anchors across phases.

SaaS Information Architecture — Tree diagram showing app navigation structure. Root: Dashboard. L1 nodes: Projects, Analytics, Team, Settings, Billing. L2 nodes: expand each L1 with 3-5 sub-pages. L3 where needed (e.g., Settings → Account → Security). Each node: page name + brief description. Color-code by section. Show primary nav vs secondary nav vs utility nav with different node border styles. Badge counts on relevant nodes (e.g., 3 notifications on Team).

Task Analysis Diagram — Hierarchical task breakdown for 'file a support ticket'. Top-level task node at root. Decompose into 5 sub-tasks: find help center, identify issue category, fill form, attach evidence, submit & track. Each sub-task further breaks into 2-4 action steps. Leaf nodes show: action verb + object, estimated time, error likelihood (low/medium/high dot). Color intensity increases with depth. Connector lines show sequence and parallel options.

Service Blueprint — Multi-layer horizontal flow for a food delivery order. Layers (top to bottom): Customer Actions, Frontstage (app UI touchpoints), Line of Visibility, Backstage (internal processes), Support Processes (systems/APIs). 7 columns representing phases: Browse → Order → Pay → Prepare → Deliver → Eat → Rate. Each cell: action description + time estimate. Failure points: red lightning bolt icons at known breakdowns. Evidence row at top showing physical/digital artifacts at each phase.

SaaS Customer Lifecycle Journey — End-to-end journey from awareness to advocacy. 6 phases: Awareness → Consideration → Trial → Onboarding → Active Use → Renewal/Churn. Each phase: key touchpoints (marketing site, demo, signup, emails, product features, billing). Row for user goals, row for emotions (satisfaction curve), row for KPIs (CAC, activation rate, DAU, NRR). Below: team ownership row color-coded by department (Marketing, Sales, Product, CS). Drop-off risk indicators between phases.

Multi-Screen Wireframe Flow — Connected wireframe sequence for a mobile banking app. 6 screens: Home (balance card + quick actions) → Transfer (recipient picker) → Amount Entry (keypad + balance check) → Confirm (summary card) → Processing (loading state) → Success (receipt + share). Each screen: low-fidelity wireframe box (320×568px) with placeholder UI elements. Arrow connectors between screens labeled with user action (tap, swipe, submit). Branch from Amount Entry to Error State screen.

Support Ticket Decision Tree — Binary decision flow for customer support triage. Start node: 'What type of issue?'. Diamond decision nodes with yes/no or category branches. Paths: Billing → refund/upgrade/cancel. Technical → known bug/unknown/feature request. Account → password reset/permissions/deletion. Each leaf node: resolution action card (color-coded green for self-service, blue for agent assist, red for escalation). Path length indicator showing steps to resolution. Total: 15+ leaf nodes.

Order State Machine Diagram — State diagram for an e-commerce order lifecycle. States: Draft → Submitted → Processing → Shipped → Delivered → Completed. Additional states: Cancelled, Refund Requested, Refunded, On Hold. Each state: rounded rect with status color (gray/blue/amber/green/red). Transitions: labeled arrows with trigger events (user_confirms, payment_success, carrier_pickup, delivery_confirmed). Guard conditions in brackets [payment_valid]. Entry/exit actions in state boxes. Highlight the happy path with thicker green arrows.

User Story Map — Jeff Patton-style story map for a project management app. Top row (backbone): user activities (Plan, Execute, Track, Report, Collaborate). Second row: user tasks under each activity (e.g., under Plan: Create Project, Set Timeline, Assign Team). Below: user stories as sticky-note cards arranged in vertical priority lanes (MVP, v1.1, v1.2). Color by story type: feature (blue), enhancement (purple), tech debt (orange). Horizontal release line separators. Story point estimates on each card.

Empathy Map Canvas — Four-quadrant empathy map for a first-time homebuyer. Center: user illustration with name 'Sarah, 28, first-time buyer'. Quadrants: Says (direct quotes in speech bubbles), Thinks (thought clouds with hopes and concerns), Does (action items with checkmark icons), Feels (emotion words with intensity bars). Bottom strip: Pains (3 pain points with severity indicators) and Gains (3 desired outcomes with importance ratings). Sticky-note aesthetic with slightly rotated cards in each quadrant.

E-Commerce Site Map — Hierarchical sitemap for an online clothing store. Root: Homepage. L1: Shop (Women, Men, Kids), Collections, Sale, Account, Help. L2 under Shop → Women: Tops, Bottoms, Dresses, Accessories, New Arrivals. Similar depth for Men and Kids. L2 under Account: Profile, Orders, Wishlist, Addresses, Payment Methods. Each node: page name, template type badge (PLP, PDP, form, content). Connector lines styled differently for primary nav (solid) vs footer nav (dashed) vs breadcrumb paths (dotted). Total: 40+ pages.

Mobile App Navigation Flow — Navigation model for a fitness tracking app. Show tab bar with 5 tabs: Home, Workouts, Progress, Social, Profile. From each tab: tree of reachable screens (2-3 depth). Annotate navigation type: push (→), modal (↑), tab switch (⇄), deep link (⚡). Highlight cross-tab navigation paths (e.g., Social → friend's Profile → their Workout). Show back navigation with dashed return arrows. Gesture annotations: swipe-back, pull-to-refresh, long-press actions.

Error State Flow Map — Comprehensive error handling flow for a payment form. Main flow: enter card → validate → process → success. Branch at each step to error states: invalid card number (inline validation), expired card (field-level error), insufficient funds (modal alert), network timeout (retry screen), 3D Secure challenge (redirect flow), fraud detection hold (status page). Each error state: screen mockup thumbnail, error message text, recovery action (retry, edit, contact support). Color-code: green (success), amber (recoverable), red (blocking).

Permission & Role Model — Visual role-based access control matrix for a SaaS platform. Columns: features (Dashboard, Projects, Team, Billing, Admin, API). Rows: roles (Viewer, Editor, Manager, Admin, Owner). Cells: permission level icons — full access (green check), limited (amber half-circle), read-only (blue eye), no access (red X). Below matrix: role hierarchy tree showing inheritance (Owner → Admin → Manager → Editor → Viewer). Side panel: permission detail for selected cell showing specific capabilities. Role count badge showing active users per role.

Notification System Flow — Multi-channel notification architecture for a collaboration app. Trigger events column: comment mention, task assigned, deadline approaching, status changed, new member joined. Each trigger fans out to channels: in-app (bell icon), email (envelope), push (phone), Slack (hash icon). Decision nodes for user preference filters (muted, digest mode, immediate). Each channel endpoint: preview of notification format (toast, email template, push card, Slack message). Frequency rules: real-time vs daily digest vs weekly summary.

Data Flow Diagram — Level 1 DFD for a healthcare appointment booking system. External entities (rounded rects): Patient, Doctor, Insurance Provider, Lab System. Processes (circles): Schedule Appointment, Verify Insurance, Check Availability, Send Reminders, Process Results. Data stores (open-ended rects): Patient Records, Appointment Calendar, Insurance Claims, Lab Results. Data flows: labeled arrows showing data type (patient info, availability slots, claim data, test results). Bi-directional flows where applicable. Number each process (1.0, 2.0, etc.).

API Integration Workflow — Sequence diagram for OAuth2 social login flow. Participants: User Browser, App Frontend, App Backend, Auth Provider (Google), User Database. Sequence: user clicks login → redirect to Google → user authenticates → callback with auth code → backend exchanges code for tokens → backend fetches user profile → create/update user record → return session token → redirect to dashboard. Each message: arrow with label and HTTP method/endpoint. Alt box for 'account already exists' vs 'new account'. Error box for 'auth denied'. Timing annotations on critical paths.

Cross-Platform User Flow — Side-by-side flow comparison for a photo-sharing feature across iOS, Android, and Web. Three parallel swim lanes. 5 steps: capture/upload → edit/filter → add caption → select audience → publish. Each step: platform-specific UI thumbnail (iOS bottom sheet vs Android dialog vs Web modal). Divergence points highlighted in amber where platforms differ. Convergence points in green where behavior is identical. Platform-specific gestures annotated (3D Touch, Material long-press, hover). Shared API calls shown as connecting bridges between lanes.

Accessibility Audit Flow — WCAG 2.1 audit workflow diagram. Start: select page/component to audit. Parallel branches for 4 principles: Perceivable (color contrast, alt text, captions), Operable (keyboard nav, focus order, timing), Understandable (labels, error messages, consistency), Robust (semantic HTML, ARIA roles, parsing). Each branch: checklist nodes with pass/fail/warning status. Merge into: severity scoring (critical/major/minor). End nodes: generate report, file JIRA tickets, schedule re-test. Include automated vs manual test indicators on each node.

Progressive Onboarding Sequence — Multi-session onboarding plan for a data analytics tool. Session 1 (first login): welcome modal → guided tour (5 tooltip stops: sidebar nav, data connector, query builder, chart creator, share button). Session 2 (day 2): contextual tip on unused features. Session 3 (day 5): 'power user' shortcut suggestions. Each touchpoint: trigger condition, UI element (tooltip, modal, banner, checklist), dismissal behavior, completion tracking. Checklist sidebar widget: 7 items with progress bar. Show: activation milestone markers and success metrics at each stage.

Retention Loop Diagram — Hooked model cycle for a fitness app. Four phases in a circular flow: Trigger (push notification: 'Your workout streak is at risk!') → Action (open app, start workout) → Variable Reward (achievement unlocked, leaderboard position, personal best) → Investment (log workout data, customize plan, invite friends). Each phase: detailed card with examples, user psychology note, and metric to track. Inner ring: daily micro-loop (single workout). Outer ring: weekly macro-loop (progress review). Arrows between rings showing escalation. Churn risk indicators at each phase.

Feature Discovery Path Map — Visualization of how users discover and adopt features in a project management tool. Left column: entry points (onboarding tour, sidebar nav, contextual suggestions, search, teammate sharing). Center: feature nodes arranged by adoption rate (high at top, low at bottom). Each feature node: name, adoption %, avg time to discover, discovery source breakdown (pie mini-chart). Right column: power-user features (keyboard shortcuts, API, automations). Arrows from entry points to features show discovery paths with thickness proportional to traffic. Bottleneck indicators where discovery drops.

Mobile Checkout Optimization Flow — A/B test-annotated checkout flow for a mobile commerce app. 4 screens: Cart Review → Shipping → Payment → Confirmation. Each screen: phone frame wireframe (375×812) with key UI elements. Between screens: conversion funnel metrics (% who proceed). A/B variants shown as branching paths: single-page checkout vs multi-step, Apple Pay express vs manual entry, guest checkout vs forced account creation. Each variant: hypothesis text, metric to measure, current conversion rate. Winner badge on best-performing variant.

Design System Contribution Flow — Governance workflow for proposing, reviewing, and publishing design system components. Phases: Proposal (submit RFC card with problem statement, examples, API sketch) → Review (design review meeting node, eng feasibility check) → Build (design in Figma, develop in code, write docs) → QA (accessibility audit, visual regression, cross-browser) → Publish (version bump, changelog, migration guide). Roles: contributor, design lead, eng lead, DS team. Decision gates: diamond nodes for approve/request-changes/reject at Review and QA. Status badges per phase.

Advanced Search Experience Flow — Search UX flow for a job board platform. Entry: search bar with autocomplete dropdown (recent searches, suggested queries, trending). Results page: filter sidebar (location, salary range, job type, experience level, remote toggle) + results list + map view toggle. Flow branches: zero results → suggestions + saved search CTA. Refinement loop: adjust filters → updated results with count badge. Detail flow: result card → job detail page → apply flow. Save/bookmark flow branching from results. Each node: screen thumbnail with key UI elements labeled.

Settings & Preferences Architecture — Organized settings taxonomy for a communication app. Top-level groups: Account, Notifications, Privacy, Appearance, Integrations, Data & Storage, Help. Each group expands to specific settings. Account: profile info, email, password, 2FA, connected accounts, delete account. Notifications: per-channel toggles (email, push, in-app) × per-event (messages, mentions, updates). Each leaf setting: control type annotation (toggle, dropdown, text input, slider, radio group). Priority indicators: settings users access most frequently highlighted. Danger zone: destructive actions (delete, export) separated with red border.

Sign-Up Flow Variants — Three parallel registration flow variants for A/B testing. Variant A: single-page form (email, password, name, role). Variant B: multi-step wizard (step 1: email + password → step 2: name + role → step 3: workspace setup). Variant C: social-first (Google/GitHub buttons prominent, email as secondary). Each variant: 375×812 mobile wireframes, step count, estimated completion time, form field count. Comparison table below: fields shown per step, cognitive load rating (1-5), predicted completion rate. Shared element: post-signup flow (email verification → onboarding).

Data Migration User Flow — Flow for migrating users from a competitor platform. Steps: Connect Source (OAuth to competitor API or CSV upload) → Map Fields (side-by-side mapping UI: source fields ↔ destination fields) → Preview (sample data table showing 5 rows of mapped data with validation highlights) → Configure (duplicate handling: skip/overwrite/merge options) → Execute (progress bar with item count, estimated time, error log) → Review (migration report: success count, warning count, error count, rollback button). Each step: estimated time, support callout, error recovery path.

Collaborative Editing State Flow — Real-time collaboration state machine for a document editor. States: Idle, Editing (local changes), Syncing (sending to server), Conflict Detected, Conflict Resolution, Merged. Transitions: user_types → Editing, save_triggered → Syncing, sync_success → Idle, sync_conflict → Conflict Detected, user_resolves → Merged → Syncing. Participant presence: avatar bubbles with cursor color assignments. Conflict resolution UI: three-way merge view (mine, theirs, merged). Offline state: cached changes queue with sync-on-reconnect flow. Cursor and selection broadcasting visualization.

Transactional Email Flow — Complete email communication map for a SaaS product. Trigger events (left column): signup, password reset, team invite, subscription change, usage alert, invoice, trial ending, churn risk. Each trigger: email template card (subject line, preview text, key content blocks, CTA button text/color). Timing annotations: immediate, 24hr delay, 3-day sequence. Follow-up branches: if opened → no action needed, if not opened → resend with different subject (72hr). Unsubscribe handling flow. Email category groupings: account, billing, product, marketing.

Form Validation Logic Flow — Client and server validation flow for a multi-field registration form. Fields: email, password, username, phone, date of birth. For each field: validation rules (regex pattern, min/max length, uniqueness check), validation timing (on-blur, on-submit, real-time), error message text, success indicator. Two-phase flow: Phase 1 (client-side, instant) catches format errors. Phase 2 (server-side, async) catches uniqueness and business rule violations. Show loading state during async validation. Accessibility annotations: ARIA live region updates, error message association via aria-describedby.

Freemium Upgrade Path Flow — Multi-touchpoint upgrade funnel for a design tool. Trigger points: usage limit hit (storage full, export limit reached, team seat maxed), feature gate (advanced export, version history, custom fonts), time-based (trial ending). Each trigger: contextual upgrade prompt UI (inline banner, modal, tooltip). Flow: trigger → upgrade prompt → pricing page (3 tiers: Free, Pro, Team with feature comparison) → checkout → confirmation → feature unlock animation. Downgrade path: Settings → plan change → data retention warning → confirmation. Win-back flow: post-churn email → special offer → re-activation.

Dark Mode Implementation Flow — Decision and implementation flow for adding dark mode to an existing product. Phase 1: Audit (inventory all color tokens, categorize as background/surface/text/border/accent). Phase 2: Token Architecture (define semantic tokens: --color-bg-primary maps to white in light, #1a1a1a in dark). Phase 3: Component Review (each component: screenshot in light → screenshot in dark → issues list). Phase 4: Edge Cases (images, shadows, elevation, third-party embeds, user-generated content). Decision nodes: system preference only vs user toggle vs scheduled. Testing checklist: contrast ratios, focus indicators, selection states, scrollbar styling.

Content Model Diagram — Entity-relationship diagram for a blog/media CMS. Entities: Article, Author, Category, Tag, Media Asset, Comment, Series. Each entity box: field list with types (string, rich-text, reference, date, enum, image). Relationships: Article → Author (many-to-one), Article → Category (many-to-many), Article → Tag (many-to-many), Article → Media (one-to-many), Article → Comment (one-to-many), Article → Series (many-to-one). Cardinality notation on relationship lines. Required vs optional fields indicated. Slug generation and URL pattern shown for routable entities. Content status enum: draft, review, published, archived.

Usability Test Report Dashboard — Research report layout. Header: study name, date range, participant count (N=12), methodology badge ('Moderated Remote'). Key findings section: 4 cards with severity (critical/major/minor badge), finding title, affected tasks count, representative participant quote in italics. Task success rate table: 8 tasks × completion rate (%) × avg time (seconds) × error count columns, sorted by lowest completion rate. Recommendation priority matrix: 2×2 grid (impact vs effort), findings plotted as numbered dots. SUS score gauge (0-100) with benchmark comparison line. Executive summary paragraph at top.

User Persona Card — Full persona profile card. Photo placeholder (gradient avatar circle), name 'Alex Chen', role 'Product Manager', age 34, location 'San Francisco, CA'. Pull quote callout in large italic text. Goals section: 3 bullet points with target icons. Frustrations section: 3 bullet points with warning triangle icons. Tech comfort scale: 5 dots (4 filled). Preferred channels: icon chips (Slack, Email, Notion). Day-in-the-life timeline: horizontal bar divided into activities (meetings 30%, deep work 25%, admin 20%, communication 15%, breaks 10%). Behavioral spectrum sliders: 5 axes (early adopter ↔ late majority, data-driven ↔ intuition-led, collaborative ↔ independent, price-sensitive ↔ quality-focused, mobile-first ↔ desktop-first).

Research Interview Guide — Structured interview protocol template. Header: study title, research questions (3 RQs), interviewer name, date, participant ID field. Sections: Introduction script (rapport building, consent, recording permission — verbatim text). Warm-up questions (3, open-ended, non-threatening). Core questions organized by theme: Context & Background (4 Qs), Current Workflow (4 Qs), Pain Points & Needs (4 Qs), Future State (3 Qs). Each question: main question in bold, 2-3 follow-up probes in lighter text. Wrap-up: summary reflection question, thank you script. Sidebar: interviewer notes area, observation checkboxes (confused, delighted, frustrated, surprised). Time allocation per section.

Survey Results Dashboard — Multi-chart survey analysis layout. Header: survey title, N=387 responses, response rate 42%, date range. Demographics section: 3 donut charts (role distribution, company size, experience level). Key metric: overall satisfaction score (4.2/5.0) with large number and trend arrow. Likert scale results: 8 statements shown as horizontal stacked bar charts (strongly disagree to strongly agree), sorted by most positive. Open-ended highlights: 6 quote cards with sentiment tag (positive/neutral/negative). Cross-tabulation table: satisfaction by company size. Statistical significance indicators (p < 0.05) on key comparisons.

Competitive Analysis Matrix — Feature comparison grid for 5 project management tools. Columns: your product + 4 competitors (Asana, Monday, Linear, Notion). Rows grouped by category: Task Management (6 features), Collaboration (5 features), Reporting (4 features), Integrations (5 features). Cells: green check (full support), amber half-circle (partial), red X (missing), gray dash (N/A). Summary row: total feature count per competitor. Pricing row: per-user monthly cost. Rating row: G2 satisfaction score. Unique differentiators row: 1-2 word competitive advantage per product. Sticky header and first column for scrolling.

Heuristic Evaluation Scorecard — Jakob Nielsen's 10 heuristics evaluation for a mobile banking app. Each heuristic: row with heuristic name, score (1-5 star rating), 2 specific examples (screenshot thumbnail + description), severity of worst violation (cosmetic/minor/major/catastrophic). Radar chart summarizing all 10 scores. Overall UX health score: weighted average displayed as large gauge. Top 3 'quick wins' section: low-effort, high-impact fixes with mockup thumbnails. Evaluator info: name, expertise level, evaluation date. Comparison column: industry benchmark scores.

Card Sort Results Visualization — Dendrogram and similarity matrix from a 30-card open card sort (N=25 participants). Top section: dendrogram (tree diagram) showing item clustering — items that were grouped together most often appear on adjacent branches. Similarity matrix: 30×30 heat map grid where color intensity shows how often two items were grouped together (darker = more frequent). Suggested categories section: 5-7 proposed groups with the cards that belong in each (>60% agreement threshold). Outlier cards: items with no clear group (highlighted in amber). Participant agreement score: standardized measure of consistency.

Tree Test Results Report — Findability results for 10 tasks against a navigation tree (N=30 participants). Per-task row: task description, correct destination, success rate (% who found correct answer), directness rate (% who navigated there without backtracking), time to complete (median seconds). Pie tree visualization: for the 3 worst-performing tasks, show where participants actually went (tree with branches sized by traffic, correct path highlighted green, common wrong paths in red). Overall findability score. Comparison to previous tree test (if applicable) with delta arrows. Recommendations: 3 navigation changes with expected impact.

A/B Test Results Card — Experiment results display for a homepage redesign test. Header: experiment name, hypothesis text, running time (14 days), total visitors (N=24,500). Variants: Control (A) and Treatment (B) side-by-side. Per variant: screenshot thumbnail, primary metric (conversion rate) with large number, confidence interval whisker plot, sample size. Statistical summary: relative uplift (+12.4%), p-value (0.003), statistical significance badge (green 'Significant'). Secondary metrics table: bounce rate, time on page, scroll depth — each with variant comparison and significance indicator. Recommendation: 'Ship Treatment' or 'Iterate' or 'Inconclusive — extend test'. Segmented results: mobile vs desktop breakdown.

Product Analytics Dashboard — Key product metrics overview. Top row: 5 KPI cards (DAU, WAU, MAU, DAU/MAU ratio, Retention D7) each with sparkline, value, and week-over-week trend arrow. Acquisition funnel: Visit → Signup → Activation → Retained (bar chart narrowing left to right with conversion % between each step). Engagement chart: daily active users line chart (30 days) with 7-day moving average overlay. Feature adoption table: 10 features × usage %, power users %, new user %, trending direction. Cohort retention grid: 8-week cohort heatmap (rows = signup week, columns = week number, cells = retention %). User segments: pie chart of user types (power user, casual, dormant, churned).

Click Heatmap Overlay Report — Heatmap analysis for a landing page. Main visual: page screenshot with color-gradient overlay (blue = cool/few clicks, red = hot/many clicks). Annotated callouts: 5 numbered findings pointing to specific areas. Finding cards (right sidebar): #1 'CTA button receives only 3% of clicks', #2 'Navigation menu gets 45% of engagement', #3 'Hero image area — 20% of clicks on non-clickable element', #4 'Footer links surprisingly popular', #5 'Secondary CTA outperforms primary'. Summary metrics: total clicks (N=8,400), unique visitors, click-through rate. Device comparison: side-by-side mobile vs desktop heatmaps. Scroll depth overlay: horizontal bands showing 25/50/75/100% scroll markers with % of visitors reaching each.

Session Recording Highlights Reel — Curated findings from 20 user session recordings. Header: total sessions watched, total hours reviewed, time period. Highlight cards (8 cards): each with timestamp range, participant ID, screen thumbnail at key moment, observation title ('User struggled to find export button'), severity badge, behavior tag (rage click, u-turn, long pause, error recovery). Grouped by theme: Navigation Issues (3), Form Friction (2), Feature Discovery (2), Delight Moment (1). Each card: 'Watch Clip' button linking to timestamped recording. Summary: top 3 patterns with occurrence count across sessions. Impact matrix: frequency × severity scatter plot of all observations.

Diary Study Timeline — 14-day longitudinal study visualization for a meal planning app (N=8 participants). Horizontal timeline with day markers. Per participant row: entry dots on days they submitted (color-coded by sentiment: green positive, amber neutral, red negative). Click entry dot: expanded card showing photo, text entry, mood rating, context (at home/at work/commuting), tagged themes. Participation rate graph: % of participants submitting per day (line chart). Theme emergence timeline: when themes first appeared and how they grew over time (stacked area chart). Highlight reel: 6 most insightful entries with participant quotes. Dropout tracking: which participants stopped and when.

Field Study Observation Notes — Structured observation template for a contextual inquiry at a retail store. Header: location, date, observer, participant role, session duration. Environment sketch area: rough layout diagram of the physical space with participant path traced. Timeline of observations: vertical timeline with timestamps. Each observation: timestamp, photo placeholder, what happened (factual), interpretation (researcher's hypothesis), direct quote (if any), tagged category (workflow, workaround, tool use, communication, frustration, delight). Affinity note: color-coded sticky for later synthesis. Summary counts: observations by category bar chart. Key insights: 3 preliminary findings with confidence level (high/medium/low).

Accessibility Audit Report — WCAG 2.1 AA compliance audit for a web application. Executive summary: overall compliance score (72/100), critical issues count (4), pages audited (12). Compliance by principle: 4 progress bars for Perceivable, Operable, Understandable, Robust. Issue table: 20 issues sorted by severity (critical first). Each issue: WCAG criterion code (e.g., 1.4.3), description, affected pages, screenshot with annotation, remediation recommendation, effort estimate (S/M/L). Per-page scorecard: 12 pages × compliance score heatmap. Assistive technology testing matrix: screen reader (NVDA, VoiceOver) × keyboard-only × magnification results per page. Timeline: recommended fix order with dependencies.

UX Benchmark Comparison — Quarterly UX metrics comparison (Q1 vs Q2 vs Q3 vs Q4). Metrics tracked: SUS score, task completion rate (8 tasks), error rate, time on task, CSAT, NPS. Each metric: line chart showing quarterly progression with target line. Comparison table: metric × quarter × delta from previous quarter (green up arrow, red down arrow). Competitive benchmark overlay: industry average line on each chart. Statistical significance flags on quarter-over-quarter changes. Summary scorecard: 3 metrics improving, 2 stable, 1 declining with root cause hypothesis for each. Methodology consistency note: sample size, task list changes, participant demographics per quarter.

User Segment Profiles — Behavioral segmentation of 4 user clusters for a productivity app. Each segment: card with cluster name (Power Users, Steady Contributors, Occasional Visitors, At-Risk Churners), user count and % of total, defining characteristics (3 bullets), key metrics (sessions/week, features used, tenure), engagement sparkline (30 days), top features used (ranked list of 5), predicted LTV range, recommended actions (2-3 product interventions). Cluster comparison radar chart: 5 axes (frequency, depth, breadth, recency, tenure) per segment overlaid. Migration flow: Sankey diagram showing how users move between segments month-over-month.

Behavioral Cohort Analysis Card — Cohort retention analysis comparing users who completed onboarding tutorial vs those who skipped. Two retention curves on same chart: tutorial completers (blue line) vs skippers (red line) over 12 weeks. Week 1 retention: completers 68% vs skippers 41%. Vertical annotation lines at key moments (week 2: activation, week 4: habit formation, week 8: long-term retention). Summary card: lift from tutorial completion (+65% at week 12). Statistical test result: Chi-square p < 0.001. Breakdown by tutorial step: which steps correlate most with retention (horizontal bar chart). Recommendation: 'Invest in onboarding — each step completed correlates with X% higher retention'.

NPS/CSAT Analysis Report — Net Promoter Score deep dive. Hero metric: NPS score (+42) in large display with gauge visualization (range -100 to +100). Segment breakdown: horizontal stacked bar (Promoters 58% green, Passives 26% amber, Detractors 16% red). Trend chart: monthly NPS over 12 months with industry benchmark line. Verbatim analysis: word cloud from open-ended responses, top 5 promoter themes (cards with quote + count), top 5 detractor themes (cards with quote + count). Segment comparison: NPS by plan type (Free, Pro, Enterprise), NPS by tenure (<3mo, 3-12mo, 12mo+), NPS by role. Action items: 3 recommendations to convert detractors, 3 to activate passives.

Feature Request Tracker Board — Customer feature request management board. Columns: New Requests, Under Review, Planned, In Progress, Shipped. Each card: request title, description (2 lines), vote count with upvote button, requester count (unique customers), top company logos requesting, tags (category, platform), submission date, status badge. Sorting options: most votes, most recent, most customers. Filter bar: by tag, by customer tier (free/paid/enterprise), by platform. Sidebar detail panel on card click: full description, all voter comments, linked JIRA ticket, product team response. Summary stats: total open requests, avg age, this month shipped.

Bug Triage Board — User-reported issue triage and tracking dashboard. Severity columns: Critical (red header), Major (orange), Minor (yellow), Cosmetic (blue). Each bug card: title, reporter info, affected feature area tag, reproduction steps count, screenshot thumbnail, device/browser info, reported date, assigned engineer avatar (or 'Unassigned' placeholder). Metrics bar: total open bugs, avg resolution time, bugs opened this week vs closed this week (bar comparison). SLA indicators: critical bugs with time-since-reported countdown (red if >24hrs). Duplicate detection: linked bug count badge. Filter: by feature area, by reporter type (internal/external), by platform.

Research Repository Card Grid — Searchable research knowledge base. Each study card: title, study type badge (usability test, survey, interview, analytics review), date, researcher name, participant count, key insight headline, tags (product area, user segment). Grid layout with search bar + filters (study type, date range, product area, user segment). Study detail page: executive summary, methodology, key findings (numbered), supporting data (charts/quotes), recommendations, related studies. 'Nugget' system: individual insights extracted from studies, tagged and cross-referenced. Dashboard: studies per quarter trend, most researched product areas, insight coverage gaps.

Jobs-to-Be-Done Framework Card — JTBD canvas for a meal kit delivery service. Core functional job: 'Help me prepare a home-cooked dinner without the planning effort.' Job statement anatomy: [When ___] [I want to ___] [So I can ___]. Related jobs: 3 adjacent jobs in connected bubbles. Job steps: 8-step horizontal process (define menu → check inventory → find recipes → make list → shop → prep → cook → clean up). Per step: pain points (red flags), current solutions (competitor logos), opportunity score (importance minus satisfaction). Emotional jobs section: 3 cards (feel like a good parent, impress guests, avoid guilt of takeout). Social jobs section: 2 cards (be seen as healthy, contribute to household). Forces diagram: push/pull/anxiety/habit forces for switching to the product.

Patient Journey Map — End-to-end patient experience for scheduling and attending a specialist appointment. 7 phases: Symptom Onset → Research → Referral → Scheduling → Pre-Visit → Visit → Follow-Up. Each phase: patient actions, touchpoints (app, phone, portal, in-person), emotions (worry scale 1-5), wait times (hours/days), information needs, support interactions. Backstage row: what the clinic does at each phase (verify insurance, prepare records, review results). Pain points: red annotations at each phase. Moments of truth: starred critical interactions that determine overall satisfaction. Accessibility notes: per-phase barriers for patients with disabilities. Caregiver row: parallel actions by family member/caregiver supporting the patient.

Survey Design Template — Structured survey layout for a product satisfaction study. Header: survey title, estimated completion time (5 min), progress bar. Section 1 — Screening (2 questions: role dropdown, usage frequency radio). Section 2 — Satisfaction (5 Likert scale questions with 5-point scale, statement on left, radio buttons on right). Section 3 — Feature Rating (matrix question: 8 features × importance and satisfaction rating). Section 4 — Open-Ended (2 text areas: 'What do you value most?' and 'What would you improve?'). Section 5 — Demographics (optional, clearly marked: company size, team size). Logic callouts: skip logic arrows showing conditional paths (e.g., if usage < monthly → skip to section 5). Submit button with 'Your responses are anonymous' reassurance text.

Affinity Diagram Board — Research synthesis board from 15 user interviews about collaboration pain points. 6 theme columns with headers: Communication Gaps, Tool Overload, Context Switching, Permission Confusion, Async vs Sync, Feedback Loops. Each theme: 8-12 sticky note cards with participant quotes or observations. Color-coded by participant (P1 through P15, repeating color palette). Each sticky: quote text, participant ID, interview timestamp. Meta row above themes: insight statement synthesizing each column (bold text on white card). Orphan zone: 4-5 stickies that don't fit any theme (labeled 'Uncategorized'). Dot voting: red dots on stickies indicating team votes for most important findings. Summary: theme ranked by sticky count and vote count.

UX Metrics Tracking Dashboard — Google HEART framework metrics dashboard. 5 metric rows: Happiness (CSAT 4.2/5, NPS +38), Engagement (DAU/MAU 32%, sessions/week 4.1), Adoption (new user signups, feature adoption rate), Retention (D1 72%, D7 45%, D30 28%), Task Success (completion rate 89%, error rate 3.2%, time-on-task avg). Each row: current value (large number), sparkline trend (30 days), target with gap indicator, leading indicator flag. Summary health score: traffic light per metric (green/amber/red). Alert rules: configurable thresholds that trigger amber/red. Filter bar: by product area, user segment, platform. Export: PDF report and CSV data download buttons.

Participant Screener Survey — Recruitment screener for a usability study on a travel booking app. Header: study description (1 sentence), incentive amount ($75), session format (60-min remote video), date range. Questions: 1. How often do you book travel online? (radio: weekly/monthly/quarterly/rarely/never — disqualify 'never'). 2. Which platforms have you used? (checkbox: Expedia, Booking.com, Airbnb, Google Flights, other). 3. When did you last book? (radio: within 1 week/1 month/3 months/6+ months). 4. Role (dropdown). 5. Device preference (radio: phone/tablet/laptop). 6. Accessibility needs (open text). Qualification logic: auto-qualify if books monthly+ and used 2+ platforms. Disqualification message: 'Thank you, you do not match our current study criteria.' Schedule link for qualified participants.

Competitor UX Audit Comparison — Side-by-side UX comparison of 4 competitor onboarding flows. Each competitor column: app name and logo, screenshot per onboarding step (6 steps max), step count badge, estimated completion time, friction points annotated (red markers on screenshots), delight moments annotated (green markers). Comparison table below: fields requested, social login options, email verification timing, tutorial type (tooltip/video/interactive), time to first value, FTUE completion rate (if published). Best practices section: 3 patterns to adopt (with source competitor), 3 anti-patterns to avoid. Summary recommendation: proposed hybrid onboarding flow borrowing best elements.

Mental Model Diagram — Indi Young-style mental model for how people manage personal finances. Top half (user behavior): towers of tasks grouped into mental spaces (Earning, Spending, Saving, Investing, Protecting). Each tower: stacked behavior boxes (e.g., under Spending: 'compare prices', 'check reviews', 'set budget limits', 'track purchases'). Bottom half (product support): matching columns showing which product features support each behavior. Gap analysis: red-highlighted areas where user behaviors have no product support (opportunities). Overlap analysis: green-highlighted areas where product features align well with behaviors. Width of towers proportional to frequency/importance. Cross-reference: which persona types exhibit which mental spaces most.

Workshop Facilitation Board — Design sprint-style workshop plan for a feature prioritization session. Agenda timeline: 3-hour session divided into 6 activities. Activity 1: Icebreaker (10 min) — 'How Might We' brainstorm with sticky notes. Activity 2: Problem Framing (20 min) — present research findings, 3 key insight cards. Activity 3: Ideation (30 min) — Crazy 8s sketching template (8 boxes per participant). Activity 4: Dot Voting (15 min) — voting grid with 3 dots per participant. Activity 5: Effort/Impact Mapping (25 min) — 2×2 matrix for placing top-voted ideas. Activity 6: Action Planning (20 min) — next steps cards with owner, deadline, definition of done. Each activity: timer, materials needed, facilitator script bullet points, expected output.

Ethnographic Research Summary — Field research findings from 2-week embedded study in a hospital emergency department. Study overview: location, dates, hours observed (120+), staff interviewed (18), patients observed (40+). Key themes section: 5 theme cards each with: theme title, representative photo placeholder, 2-3 supporting observations, direct quote, implication for design. Environment map: floor plan with zones color-coded by activity (triage, waiting, treatment, admin). Communication patterns: network diagram showing information flows between roles (doctor, nurse, tech, admin, patient). Workaround catalog: 8 documented workarounds staff use to compensate for system limitations. Artifact gallery: photos of physical tools, notes, whiteboards staff use. Cultural insights: 3 unwritten rules that technology must respect.

Product Requirements Document — PRD template layout. Header: product name, version (v2.1), author, status badge (Draft/Review/Approved), last updated date. Sections: Executive Summary (2-3 sentences in callout box), Problem Statement with 3 supporting data cards (metric, insight, source), User Stories table (5 rows: as user X, I want Y, so that Z, with priority and acceptance criteria columns), Success Metrics (4 KPI cards: metric name, current baseline, target value, measurement method), Scope section with in-scope/out-of-scope two-column layout, Technical Requirements checklist (8 items with checkboxes), Timeline with 5 milestone markers on horizontal track, Risks & Mitigations table (4 rows: risk, likelihood, impact, mitigation), Dependencies list with status indicators (blocked/unblocked).

Product Roadmap — Horizontal timeline roadmap spanning 4 quarters (Q1-Q4). Swim lanes by team: Frontend, Backend, Design, Research. Each item: card with title, owner avatar, status chip (planned/in-progress/shipped with color coding), t-shirt size (S/M/L/XL badge). Alternative view toggle: Now/Next/Later columns. Dependency arrows between items across swim lanes (dashed lines with arrow heads). Theme color-coding: Performance (blue), Growth (green), Platform (purple), Tech Debt (orange). Milestone diamonds at quarter boundaries with label (Beta, GA, v2.0). Legend bar at top explaining all visual encodings. Filter: by team, by theme, by status.

Feature Specification Document — Detailed spec for a 'Team Workspaces' feature. Header: feature name, owner, target release, status badge. Overview section: one-paragraph description + annotated mockup placeholder (labeled wireframe box). User flows section: 3 numbered user flows (create workspace, invite members, switch workspaces) each as a mini flowchart. Data model section: entity diagram showing Workspace, Member, Role relationships. API endpoints table: 5 rows with method, endpoint, request body, response, auth level. Edge cases section: 6 edge cases as cards (e.g., 'User invited to workspace they're already in', 'Workspace owner tries to leave'). Acceptance criteria: numbered checklist of 10 criteria. Open questions: 3 unresolved decisions with options and recommendation.

Competitive Landscape Map — 2×2 strategic positioning map for the project management tool market. Axes: horizontal (Simple ↔ Complex), vertical (Individual ↔ Team). Quadrant labels: top-left 'Personal Productivity', top-right 'Enterprise PM', bottom-left 'Simple Collaboration', bottom-right 'Team Workflows'. Competitor logos plotted as circles sized by market share. Your product: highlighted with distinctive marker. Movement arrows showing competitor trajectory over last 2 years. Opportunity zones: dashed circles in underserved areas. Below map: competitor profile cards (6 competitors): company name, founded year, funding, pricing, key differentiator, target persona, Achilles heel. Summary: strategic positioning recommendation with rationale.

RICE Scoring Matrix — Feature prioritization table using the RICE framework. Columns: Feature Name, Reach (users/quarter), Impact (0.25/0.5/1/2/3 scale), Confidence (10-100%), Effort (person-months), RICE Score (calculated). 12 feature rows sorted by RICE score descending. Color-coded score cells: top 4 green (build now), middle 4 amber (consider), bottom 4 red (deprioritize). Inline explanations: hover/expand for impact scale definition. Summary: total effort for top 4 features vs available capacity. Scatter plot below: Effort (x-axis) vs RICE Score (y-axis), features as labeled dots, quadrant lines for quick wins vs big bets. Footer: methodology notes and scoring assumptions.

Opportunity Solution Tree — Teresa Torres-style OST for improving user activation. Root node: desired outcome ('Increase 7-day activation rate from 32% to 50%'). Level 1: opportunity space nodes (3 main opportunities: 'Users don't understand core value', 'Setup is too complex', 'No reason to return after signup'). Level 2: sub-opportunities under each (2-3 per parent). Level 3: solution ideas as leaf nodes (3-4 per sub-opportunity). Each solution: experiment badge (test type: A/B, prototype, fake door). Experiment results overlay: green check for validated, red X for invalidated, amber clock for in-progress. Assumption mapping: key assumptions listed next to each solution with risk rating. Visual: tree flowing top-down with connecting lines, color-coded by branch.

Impact Mapping Diagram — Impact map for increasing monthly recurring revenue by 25%. Center: Goal node ('Increase MRR 25% by Q4'). First ring: Actors (5 nodes: New Prospects, Free Users, Pro Users, Churned Users, Partners). Second ring: Impacts — what behavior change from each actor (e.g., New Prospects: 'Sign up for trial', Free Users: 'Upgrade to Pro'). Third ring: Deliverables — what we can build (e.g., under 'Upgrade to Pro': trial extension, feature teaser, social proof widget). Each deliverable: effort estimate badge, confidence level dot. Color by actor. Faded deliverables that were considered but deprioritized. Summary: total deliverables selected, total effort, expected impact per actor.

Release Notes Template — Product update announcement for v3.2 release. Header: version badge, release date, one-line tagline ('Faster search, smarter filters, fewer clicks'). Hero feature: large card with title, animated GIF placeholder (labeled box), 3-sentence description, 'Try it now' CTA button. Feature list: 4 feature cards with icon, title, one-sentence description, 'New' or 'Improved' badge. Bug fixes section: collapsible accordion with 8 items (one-liner each). Known issues: 2 items with status (investigating/workaround available). Breaking changes: 1 item in amber alert box with migration guide link. Footer: feedback button ('How do you like this update?'), link to full documentation, social share buttons.

Product Changelog Layout — Vertical timeline changelog for a developer tool. Each entry: version number badge (semantic versioning), date, change type chips (Feature, Fix, Improvement, Deprecation — each color-coded). Expandable sections: entry title + summary when collapsed, full details + code snippets when expanded. Filter bar: by change type, by date range, by product area. Search bar for finding specific changes. 'Subscribe to updates' email input at top. Version comparison: select two versions to see all changes between them. Per entry: GitHub PR link, documentation link, contributor avatar. Pinned entry: latest version highlighted at top with 'Latest' badge. Pagination: load-more button for older entries.

Stakeholder Presentation Deck — 8-slide product review layout for executive stakeholders. Slide 1: Title slide (product name, quarter, presenter). Slide 2: Quarterly goals recap (3 goal cards with status: on-track/at-risk/behind). Slide 3: Key metrics dashboard (4 KPI cards with trend arrows, miniature charts). Slide 4: Shipped features timeline (horizontal timeline with 6 shipped items). Slide 5: Customer impact (3 customer quote cards + NPS trend). Slide 6: Upcoming roadmap (Now/Next/Later columns). Slide 7: Risks & blockers (3 risk cards with mitigation status). Slide 8: Ask/decision needed (2-3 decision cards with options and recommendation). Each slide: consistent header with section title, page number, company logo.

Sprint Planning Board — Two-week sprint Kanban board. Columns: Backlog, To Do, In Progress, In Review, Done. Each card: ticket ID, title, story points badge (1/2/3/5/8/13), type tag (feature/bug/chore), assignee avatar, due date, priority indicator (P0-P3 colored dots). WIP limits displayed on In Progress (max 3) and In Review (max 2) columns with visual warning when exceeded. Sprint header: sprint name, start/end dates, sprint goal sentence. Burndown mini-chart in header: ideal line vs actual progress. Capacity bar: team total story points capacity vs committed points. Swimlanes option: toggle between flat list and grouped by epic.

Sprint Retrospective Template — 4-column retrospective board. Columns: 'What went well' (green), 'What didn't go well' (red), 'What puzzled us' (amber), 'Action items' (blue). Each column: 6-8 sticky note cards with text and author initials. Dot voting: red dots on cards showing team votes. Timer display: 5 min per phase (write, discuss, vote, plan). Action items column: each card has owner avatar, deadline, definition of done. Previous retro followup section at top: last sprint's action items with status (done/in-progress/dropped). Mood meter: 5-point emoji scale with anonymous team vote results (bar chart). Sprint metrics comparison: velocity this sprint vs 3-sprint average.

Product Decision Log — Searchable decision record for a product team. Table layout: decision ID, date, title, category tag (technical/product/design/business), status (proposed/decided/revisited), decision maker(s), one-line decision statement. Expandable detail: context paragraph, options considered (3 options as cards with pros/cons), chosen option highlighted, rationale paragraph, dissenting opinions noted, review date. Filter: by category, by status, by date range, by decision maker. Timeline view toggle: decisions plotted chronologically. Linked artifacts: related PRDs, design files, research studies. 'Challenge this decision' button with structured template (new evidence, proposed change, impact assessment).

Experiment Tracker Dashboard — Portfolio view of all active and completed experiments. Kanban columns: Hypothesis (ideas), Designed (ready to run), Running (live), Analyzing (data collected), Decided (shipped/killed). Each experiment card: title, hypothesis statement ('If we X, then Y, because Z'), primary metric, experiment type badge (A/B, multivariate, feature flag), start date, owner avatar. Running experiments: sample size progress bar (current N / required N), estimated days remaining. Decided experiments: result badge (winner/loser/inconclusive), impact summary (metric lift or 'no effect'). Summary metrics: experiments run this quarter, win rate (%), avg time to decision, cumulative revenue impact. Learning library: completed experiments searchable by feature area.

Growth Model Canvas — Growth loop and funnel hybrid for a marketplace platform. Top section: AARRR funnel (Acquisition → Activation → Retention → Referral → Revenue) with conversion rate between each stage. Middle section: growth loops — 3 circular flow diagrams: Content Loop (user creates listing → appears in search → new user discovers → signs up → creates listing), Viral Loop (user invites friend → friend joins → both get credit → invite more), Paid Loop (revenue → reinvest in ads → new users → revenue). Each loop: key metric at each node, bottleneck indicator. Bottom section: growth model inputs and outputs table — input levers (ad spend, content velocity, referral incentive) mapped to output metrics (new users, revenue, LTV). Sensitivity analysis: which lever has the highest impact.

Pricing Page Comparison — Three-tier pricing layout. Columns: Free, Pro ($15/mo), Enterprise (custom). Each tier: name, price (monthly/annual toggle with savings badge), tagline (one sentence), feature list (8-10 items with checkmarks, X marks, and limited badges), CTA button (different text per tier: 'Get Started', 'Start Free Trial', 'Contact Sales'). Pro tier: 'Most Popular' badge with highlighted border. Feature comparison table below: 20 feature rows × 3 tiers with tooltips on complex features. FAQ section: 6 expandable questions (billing, cancellation, upgrade path, team pricing, student discount, refund policy). Trust bar: security badges, customer logos, uptime guarantee.

Go-to-Market Timeline — 8-week launch plan for a new product feature. Horizontal timeline with week markers. Swim lanes by function: Product (feature freeze, bug fixes, final QA), Marketing (blog post draft, email campaign setup, social assets, press outreach), Sales (training materials, demo script, FAQ doc), Support (knowledge base articles, macro templates, escalation runbook). Each item: card with task name, owner, status, dependency arrows. Milestone diamonds: Internal Preview (W2), Beta Launch (W4), Public Launch (W6), Post-Launch Review (W8). Critical path highlighted in bold. Checklist panel: launch day checklist with 15 items across all teams. Risk register: 4 launch risks with contingency plans.

Customer Feedback Board — Aggregated customer feedback wall. Three source columns: Support Tickets, NPS Verbatims, Sales Call Notes. Each feedback card: quote text, source badge, customer name/company (anonymized option), sentiment tag (positive/negative/neutral), product area tag, date. Theme clusters: feedback cards grouped under theme headers (Performance, Pricing, Missing Features, UX Issues, Praise). Per theme: card count, sentiment distribution mini bar, trend arrow (growing/stable/declining). Action tracker: linked improvement initiatives per theme with status. Spotlight section: 'Feedback of the Week' highlighted card. Filter: by source, by sentiment, by product area, by customer tier. Search: full-text search across all feedback.

Feature Flag Dashboard — Feature flag management interface. Table view: flag name, environment (dev/staging/prod badges), status (on/off toggle), rollout percentage (slider 0-100%), user segment targets (chip list), created date, owner avatar, last modified. Detail panel on row click: flag description, rollout history timeline, associated experiment (if any), kill switch button (red), code references count. Filters: by environment, by status, by owner. Stale flag detector: flags unchanged for 30+ days highlighted in amber with 'Clean up?' prompt. Dependency graph: which flags depend on which (preventing accidental disabling). Audit log: who changed what flag when (timestamped entries). Rollout plan: scheduled percentage ramp (10% → 25% → 50% → 100%) with dates.

Analytics Event Taxonomy — Structured event tracking plan for a SaaS application. Hierarchy view: event categories (Navigation, Engagement, Conversion, Error) → event names → event properties. Each event: name (verb_noun format: page_viewed, button_clicked, form_submitted), category badge, properties list (key: type, example value, required/optional), trigger description, implementation status (not started/implemented/validated). Property standards table: common properties across all events (user_id, session_id, timestamp, platform, app_version). Naming convention guide: prefix rules, casing, prohibited characters. Coverage matrix: product features × tracking coverage (full/partial/none). Implementation checklist per event: frontend tag, backend logging, data warehouse schema, dashboard connection.

KPI Dashboard Template — Executive KPI overview for a B2B SaaS product. Top row: 4 hero metric cards (MRR, Customer Count, Churn Rate, NPS) each with current value, period-over-period change (with green/red arrow), sparkline (12 months), target line on sparkline. Section 2: Revenue breakdown — stacked bar chart (new business, expansion, churned) monthly. Section 3: Funnel metrics — horizontal funnel (Leads → MQLs → SQLs → Opportunities → Closed Won) with conversion rate between stages. Section 4: Customer health — cohort retention heatmap (12 months). Section 5: Team velocity — story points delivered per sprint (bar chart, 8 sprints). Each section: date range selector, comparison toggle (vs previous period, vs plan). Alert badges on metrics that are off-track vs plan.

North Star Metric Tracker — Single-metric focus dashboard for team alignment. Hero display: North Star metric name ('Weekly Active Creators'), current value (24,300), trend (+8.2% MoM), 90-day target (30,000) with progress bar. Leading indicator cards: 4 cards showing input metrics that drive the North Star (New Signups, Tutorial Completion Rate, First Creation within 7 days, Return Rate). Each card: metric value, trend, correlation strength with North Star (strong/moderate/weak badge). Team contribution section: how each team's OKRs connect to the North Star (Product: 'Reduce time to first creation', Growth: 'Increase signup conversion', Platform: 'Improve creation tool reliability'). Historical chart: 12-month line chart with milestone annotations (launches, experiments). Forecast: projected trajectory line based on current trend vs target.

Product Health Scorecard — Multi-dimensional product quality assessment. Dimensions (rows): Performance (page load time, API latency, uptime), Reliability (error rate, crash rate, incident count), Usability (task success rate, CSAT, support ticket volume), Growth (activation rate, retention, referral rate), Technical Debt (code coverage, dependency age, open tech-debt tickets). Each dimension: health indicator (green/amber/red traffic light), current value, trend arrow (improving/stable/declining), target, owner team. Overall health score: weighted composite (0-100) displayed as large gauge. Trend chart: composite score over 12 weeks. Incident log: last 5 incidents with severity, duration, impact. Action items: top 3 improvement initiatives with owner and deadline.

Incident Postmortem Template — Structured incident review for a production outage. Header: incident title, severity (SEV1/SEV2/SEV3 badge), date, duration, impact statement (X users affected, $Y revenue impact). Timeline section: chronological event log (detected, acknowledged, mitigated, resolved) with timestamps and responsible person. Root cause: fishbone/Ishikawa diagram with categories (People, Process, Technology, External). 5 Whys analysis: nested why chain reaching root cause. Impact assessment: affected systems diagram, user impact by segment. What went well: 3 green cards. What went wrong: 3 red cards. Action items table: 8 items with owner, priority, deadline, status. Prevention measures: 3 systemic changes to prevent recurrence. Review schedule: 30/60/90 day check-in dates.

Integration Partner Cards — Integration marketplace grid layout. Each integration card: partner logo, partner name, category tag (CRM, Communication, Analytics, Storage, DevOps), short description (1 sentence), 'Connect' button, popularity indicator (install count), status badge (official/community/beta). Grid filterable by category. Featured integrations banner: top 3 integrations with hero cards (larger, with screenshots). Recently added section: 4 new integrations with 'New' badge. Coming soon section: 3 requested integrations with vote count and 'Notify me' button. Per card expanded view: setup steps (numbered list), permissions required (scope list), data sync details (what data, frequency, direction), pricing (free/premium badge), reviews (star rating + count).

API Documentation Layout — Developer-facing API reference page. Three-panel layout: left sidebar (endpoint navigation grouped by resource: Users, Projects, Tasks, Webhooks), center content (endpoint documentation), right panel (code examples). Per endpoint: HTTP method badge (GET/POST/PUT/DELETE color-coded), endpoint path, one-line description, authentication requirements, request parameters table (name, type, required, description), request body JSON example, response body JSON example with field descriptions, status codes table (200, 400, 401, 403, 404, 429, 500). Code examples panel: tabbed by language (cURL, Python, JavaScript, Go). Interactive 'Try it' section: editable request with 'Send' button and live response. Rate limiting info: requests per minute, current usage.

Developer Portal Homepage — Developer-focused landing page for a platform API. Hero section: tagline ('Build with [Product] API'), description, two CTAs ('Quick Start Guide' primary, 'API Reference' secondary). Use case cards: 3 cards showing what developers can build (Sync Data, Build Integrations, Automate Workflows) each with icon, title, description, 'Learn more' link. Getting started steps: 3-step horizontal process (1. Get API Key, 2. Make First Request, 3. Explore Endpoints) with code snippet preview for step 2. SDK section: 4 SDK cards (Python, JavaScript, Ruby, Go) with install command (pip install, npm install), GitHub stars count, latest version badge. Status section: current API status (operational green/degraded amber/outage red), uptime percentage (99.98%), link to status page. Community section: Slack/Discord channel link, Stack Overflow tag, GitHub discussions.

System Status Page — Public-facing service status page. Header: overall status banner (All Systems Operational / Degraded Performance / Major Outage) with color. Component list: 8 services (Web App, API, Database, File Storage, Email, Search, Authentication, Webhooks) each with status indicator (green/amber/red dot), component name, uptime percentage (90 days). 90-day uptime chart: horizontal bar per component showing daily status (green/amber/red blocks). Active incidents section: current incident card with title, severity, impact, timeline (detected → investigating → identified → monitoring → resolved), status updates with timestamps. Past incidents: collapsible list of last 30 days. Scheduled maintenance: upcoming windows with date, duration, affected components. Subscribe: email/webhook/RSS notification options.

SLA Compliance Dashboard — Enterprise SLA monitoring for a B2B platform. SLA tier cards: 3 tiers (Standard 99.5%, Professional 99.9%, Enterprise 99.99%) each with current compliance %, customer count, and risk indicator. Metric tracking table: 6 SLA metrics (Uptime, API Response Time, Support Response Time, Data Processing Time, Backup Frequency, Recovery Time) × target × actual × status (meeting/at-risk/breaching). Time-series chart: uptime percentage daily over 90 days with SLA target line. Breach incident log: table of SLA breaches with date, metric, actual vs target, affected customers, credit issued. Financial impact: total SLA credits issued this quarter, trend vs previous quarters. Alert configuration: threshold settings for early warning before SLA breach. Customer-specific view: drill down to individual customer's SLA performance.

OKR Tracking Dashboard — Quarterly OKR overview for a product organization. Company-level objective cards: 3 objectives each with confidence level (on track/at risk/off track), overall progress percentage. Expanding each objective: 3-4 key results with progress bar (0-100%), current value vs target, owner avatar, status update text (last updated date). Team alignment view: tree showing how team OKRs ladder up to company OKRs (connecting lines). Health summary: pie chart of all KRs by status (on track/at risk/off track). Weekly check-in section: latest status notes per KR with mood indicator. Quarter timeline: horizontal bar showing current position in quarter with time remaining. Historical comparison: previous quarter's OKR achievement rate for context. Scoring guide: 0.0-1.0 scale with Google-style grading (0.7 = good).

Team Capacity Planning Board — Resource allocation visualization for a 6-person product team over 4 sprints. Rows: team members (name, role, avatar). Columns: sprints (2-week blocks). Cells: stacked color bars showing allocation (feature work blue, tech debt orange, support purple, meetings gray, PTO red). Each cell: total available hours, allocated hours, utilization percentage. Over-allocation warning: cells where allocation > 100% highlighted with red border. Team summary row: aggregate allocation per sprint. Project allocation view: same data grouped by project instead of person. Bench capacity: unallocated hours available for new work. Historical accuracy: planned vs actual allocation for last 3 sprints. Toggle: story points vs hours.

Design-to-Dev Handoff Checklist — Structured specification handoff flow for a design-to-engineering workflow. Start: design complete gate (checklist: responsive breakpoints defined, all states documented, tokens used, copy finalized). Phase 1: specification export (spacing values, color tokens, typography specs, component hierarchy). Phase 2: interactive review (annotated mockups with measurement overlays, click-through prototype link, edge case screenshots). Phase 3: dev questions (Q&A board where engineers post questions tagged by component, designer responds with clarification + updated spec). Phase 4: implementation review (side-by-side: design vs build screenshot, pixel-diff overlay, QA checklist). Each phase: expected output, DRI, estimated time, completion criteria. Overall flow: Kanban board with columns per phase.

Concept Test Results Summary — Concept validation report for 3 feature concepts tested with 20 participants. Header: study name, methodology (unmoderated concept test), participant count, date. Per concept card: concept name, one-sentence description, mockup thumbnail, desirability score (1-5 scale with bar visualization), purchase intent (definitely/probably/maybe/probably not/definitely not stacked bar), top 3 positive reactions (word chips with count), top 3 concerns (word chips with count), representative quote. Comparison table: 3 concepts side-by-side on desirability, comprehension (% who understood correctly), uniqueness (1-5), relevance (1-5). Winner recommendation with rationale. Next steps: 3 action items for the winning concept.

Value Proposition Canvas — Alexander Osterwalder-style canvas for a project management tool. Right side (Customer Profile): circle divided into 3 segments — Customer Jobs (5 functional, 2 social, 1 emotional job), Pains (6 pain points ranked by severity with color bars), Gains (5 desired outcomes ranked by relevance). Left side (Value Map): square divided into 3 segments — Products & Services (list of features), Pain Relievers (how each feature addresses a specific pain, connected with lines), Gain Creators (how each feature enables a specific gain, connected with lines). Center: fit indicators showing which pains/gains are addressed (green connectors) and which are unaddressed (red gaps). Summary card: value proposition statement in one sentence. Competitive overlay: which pains/gains competitors address vs your product.