# Account Dossier Interactive Dashboard — Design Document **Version:** 0.1 (MVP) **Author:** Claude **Date:** 2026-10-07 **Status:** Design Review (Pre-Prototype) --- ## 1. Overview & Purpose **What:** Interactive HTML/React dashboard that surfaces account intelligence for a single Pure Storage customer or prospect. Provides a "10,000 ft view" with drill-down to ground-level detail. **Why:** SEs need to move quickly from account snapshot → discovery prep → conversation context without context-switching between Sheets, notes, and browser tabs. One dashboard per customer becomes the source of reference for that account. **MVP Scope:** The 10 essential questions (List 1 + List 2 from account intelligence framework) **Future Scope:** Relationships, opportunities, financial modeling, industry trends, sentiment analysis, timeline views --- ## 2. User Personas & Use Cases ### Primary User **Ryan** (You, Enterprise SE) - Prepping for discovery calls - Hunting for competitive displacement opportunities - Planning expansion/renewal strategy - Sharing account context with team (future) ### Use Cases (in priority order, all equally weighted for MVP) | Use Case | What They Need | Where Dashboard Helps | |----------|---|---| | **Pre-call Prep (15 min before discovery)** | Quick account snapshot + key metrics + conversation hooks | Overview pane + drill-down to specific List items; see what changed since last call | | **Competitive Displacement Hunting** | Incumbent vendors + footprint + gaps + consolidation leverage | List 2 drill-down showing Pure coverage % + high-value data not on Pure; see EMC systems aging | | **Expansion/Renewal Planning** | Growth trajectory + budget cycle + stakeholder sentiment + upcoming initiatives | Opportunity tab (future) + timeline + stakeholder relationships; see refresh window + budget headroom | ### Secondary User (Future) **Account team** (Sales, Solution Architect, Customer Success) - Read-only view of account summary - Understand strategic context before customer calls --- ## 3. Architecture Overview ### 3.1 Data Flow Diagram ``` ┌─────────────────────────────────────────────────────────────┐ │ Per-Customer Data Sources (DRY: No Duplication) │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 📊 Google Sheet (Structured Data) │ │ ├─ Account tab (List 1 metrics) │ │ ├─ Pure-Deployment tab (List 2 metrics) │ │ ├─ Relationships tab (Contacts, sentiment, history) │ │ ├─ Interactions tab (Call/email log with sentiment) │ │ ├─ Financials tab (ARR, contracts, opportunities) │ │ ├─ Industry-Trends tab (Curated insights) │ │ └─ Metadata tab (Sync status, ownership, sharing) │ │ │ │ 📝 Obsidian Markdown File (Unstructured Context) │ │ ├─ Discovery notes (narrative, conversation context) │ │ ├─ Strategy (account themes, expansion hooks) │ │ ├─ Relationship notes (person-by-person context) │ │ └─ Internal flags (competitive threats, risks) │ │ │ └─────────────────────────────────────────────────────────────┘ ↓ (via API or manual sync) ↓ ┌─────────────────────────────────────────────────────────────┐ │ Interactive Dashboard (HTML/React Artifact) │ │ Reads from both sources, displays in 3-pane layout │ │ No data copying; all reads from source │ └─────────────────────────────────────────────────────────────┘ ↓ (displayed to user) ↓ ┌─────────────────────────────────────────────────────────────┐ │ User Actions: │ │ • View account snapshot │ │ • Drill into List 1 / List 2 metrics │ │ • Check stakeholder sentiment │ │ • Review opportunity pipeline │ │ • Log new interaction │ │ • Open full Sheets / Obsidian for detailed editing │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 4. UI/UX Design ### 4.1 Layout: 3-Pane Architecture ``` ┌──────────────────────────────────────────────────────────────────────┐ │ HEADER: Account Name | Status | Vertical | Location | [Share] [Edit] │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ LEFT PANE │ CENTER PANE │ RIGHT PANE │ │ (Overview) │ (Details & Drill-down) │ (Context) │ │ │ │ │ │ ┌─────────────────┐ │ ┌────────────────────┐ │ ┌────────────┐ │ │ │ Account Health │ │ │ Tab Bar: │ │ │ Latest │ │ │ │ Scorecard │ │ │ Overview | List1 │ │ │ Interactions │ │ │ ◆ 4 KPIs │ │ │ List2 | Oppty │ │ │ │ │ │ │ (visual) │ │ │ │ │ │ ┌────────┐ │ │ │ │ │ │ │ ┌──────────────┐ │ │ │ Sarah │ │ │ │ ├─────────────────┤ │ │ │ Item 1 Card │ │ │ │ Chen │ │ │ │ │ Key Dates │ │ │ │ [Summary] │ │ │ │ Call │ │ │ │ │ Timeline │ │ │ │ [10K ft] │ │ │ │ 2d ago │ │ │ │ │ • Refresh: 6mo │ │ │ │ [Status] │ │ │ │ ⭐⭐⭐ │ │ │ │ │ • Budget: 3mo │ │ │ └──────────────┘ │ │ │ (Drill) │ │ │ │ │ • Contract: 8mo │ │ │ │ │ │└────────┘ │ │ │ │ │ │ │ ┌──────────────┐ │ │ │ │ │ │ ├─────────────────┤ │ │ │ Item 2 Card │ │ │ ├──────────┤ │ │ │ Actions │ │ │ │ [Summary] │ │ │ │ [Log new]│ │ │ │ [QBR Prep] │ │ │ │ [10K ft] │ │ │ │ │ │ │ │ [Edit Account] │ │ │ │ [Status] │ │ │ │ Related │ │ │ │ [Open Sheets] │ │ │ └──────────────┘ │ │ │ Notes │ │ │ │ [View Notes] │ │ │ │ │ │ (from MD) │ │ │ │ [Share] │ │ │ .... (3 more) │ │ │ │ │ │ │ │ │ │ │ │ │ [View all]│ │ │ └─────────────────┘ │ └────────────────────┘ │ └────────────┘ │ │ │ │ │ └──────────────────────────────────────────────────────────────────────┘ ``` ### 4.2 Left Pane: Account Overview (10,000 ft) **Purpose:** At a glance, is this account healthy? What's the most critical thing to know? **Components:** #### Health Scorecard (4 KPIs) Visual status cards, each with: - **Metric name** + current value - **Trend indicator** (↑ up, ↓ down, → flat) - **Status badge** (green / yellow / red) - **Drillable** — click to zoom into that metric **KPIs (MVP):** 1. **Pure Coverage** — % of total storage on Pure - Value: 30% | Trend: ↑ +5% YoY | Status: 🟡 Opportunity - Rationale: Shows expansion potential; top sales driver 2. **Fleet Age** — Average age of Pure systems - Value: 4.2 yr | Trend: → flat | Status: 🟡 Refresh Window Approaching - Rationale: Indicates refresh opportunity timing 3. **Expansion Opportunity Size** — $ value of consolidation potential - Value: $3.5M | Trend: ↑ Growing | Status: 🟢 Pipeline-Ready - Rationale: Deal size at a glance; guides priority 4. **Engagement Momentum** — Recency of last interaction + champion sentiment - Value: 5 days | Trend: ↑ Active | Status: 🟢 Engaged - Rationale: Is this account warm or cold? #### Key Dates Timeline Visual timeline of critical dates: - **Refresh Date**: Next Pure system refresh - **Budget Cycle**: When capex decisions happen - **Contract Renewal**: When Pure contract is up - **Next Review**: When you should reconnect Format: Horizontal timeline or vertical list with "X days until" callouts. #### Action Buttons (Quick nav) - **QBR Prep** → Opens checklist template - **Edit Account** → Opens Sheets in new tab - **View Notes** → Opens Obsidian vault or embedded Markdown - **Share** → (Future) generates shareable summary link - **Log Interaction** → Quick-add form (bottom right pane) --- ### 4.3 Center Pane: Details & Drill-Down **Purpose:** Zoom from 10K ft into List 1 and List 2 metrics. See details, trends, and rationale. **Tab Structure:** #### Tab 1: Overview (Summary of all 10 items) Shows all 5 List 1 items + all 5 List 2 items as **cards in a grid**: - Card layout: Title | 10K ft summary | Status badge | Click to drill - Color-coded by item type (List 1 = blue accent, List 2 = green accent) - Scanning-friendly; can see account at a glance #### Tab 2: Account Profile (List 1 Deep Dive) Five expandable cards, one per List 1 item: **Card 1: Data Footprint & Workload Breakdown** ``` ┌─ Data Footprint & Workload Breakdown ───────────────────┐ │ 10K FT VIEW: │ │ 500TB current | +18% YoY | 2yr forecast: 700TB │ │ Workloads: 40% OLTP | 35% Analytics | 25% Unstructured │ │ │ │ [CLICK TO EXPAND ▼] │ │ │ │ EXPANDED VIEW: │ │ ┌─ Breakdown Table ──────────────────────────────────┐ │ │ │ Tier │ Current │ Growth │ 2yr Forecast │ Note │ │ │ OLTP │ 200TB │ +15% │ 265TB │ TX DB │ │ │ Analytics │ 175TB │ +25% │ 275TB │ DW │ │ │ Unstructured│ 125TB │ +12% │ 160TB │ Lake │ │ └────────────────────────────────────────────────────┘ │ │ │ │ ┌─ Capacity Growth Chart ────────────────────────────┐ │ │ │ [Line chart: 3yr history + 2yr forecast] │ │ │ │ Shows growth trajectory, where Pure could capture │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ CONTEXT FROM NOTES: │ │ "Customer mentioned big analytics push for FY27..." │ │ │ │ [Related Links: 10-K | Analyst Report] │ └─────────────────────────────────────────────────────────┘ ``` **Card 2: Current Storage Vendors & Installed Infrastructure** ``` ┌─ Current Storage Vendors ──────────────────────────────┐ │ 10K FT VIEW: │ │ NetApp 50% | Pure 30% | Dell 20% (of 1200TB total) │ │ Consolidation Opportunity: HIGH │ │ │ │ [CLICK TO EXPAND ▼] │ │ │ │ EXPANDED VIEW: │ │ ┌─ Vendor Breakdown (Pie Chart) ─────────────────────┐ │ │ │ [Visual pie showing % by vendor] │ │ │ │ NetApp = oldest systems, refresh due │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ ┌─ Incumbent Systems Detail ────────────────────────┐ │ │ │ Vendor: EMC Symmetrix DMX-4 │ │ │ │ Capacity: 200TB | Age: 6 years | Status: AGING │ │ │ │ Use Case: Core banking OLTP │ │ │ │ 💡 Displacement Target: Move to Pure FlashArray │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ COMPETITIVE CONTEXT: │ │ "This EMC system is at end-of-life; customer risk- │ │ averse but willing to consolidate if migration is │ │ proven. Reference customer opportunity." │ │ │ │ [Related: Competitive Intel | Displacement Playbook] │ └──────────────────────────────────────────────────────────┘ ``` **Cards 3-5:** Similar drill-down structure for Business Drivers, Architecture, Budget/Authority #### Tab 3: Pure Deployment (List 2 Deep Dive) Five cards showing Pure-specific metrics, one per List 2 item. **Card 1: Current Pure Installed Base** ``` ┌─ Current Pure Installed Base ──────────────────────────┐ │ 10K FT VIEW: │ │ 2 FlashArray systems (150TB) | Healthy | 4.2yr avg age │ │ Headroom: 52TB | Refresh window: 18mo │ │ │ │ [CLICK TO EXPAND ▼] │ │ │ │ EXPANDED VIEW: │ │ ┌─ Systems Inventory Table ──────────────────────────┐ │ │ │ System | Type | Capacity | Util | Headroom | Age │ │ │ │ FA-P1 | FA | 75TB | 65% | 26TB | 5.1yr │ │ │ │ FA-DR | FA | 75TB | 40% | 45TB | 3.3yr │ │ │ │ Refresh Needed │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ ┌─ Utilization & Headroom Heatmap ──────────────────┐ │ │ │ [Visual: System cards with fill % + headroom bar] │ │ │ │ FA-P1: ████████ 65% USED (26TB headroom) │ │ │ │ FA-DR: █████░░░ 40% USED (45TB headroom) │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ EXPANSION IMPLICATION: │ │ "FA-P1 will need refresh/capacity add in 18 months; │ │ FA-DR has headroom for growth without additional spend" │ │ │ │ [Related: Pure1 Dashboard | Refresh Planning Guide] │ └──────────────────────────────────────────────────────────┘ ``` **Cards 2-5:** Performance/Satisfaction, Coverage Gaps, Refresh Cycles, Stakeholders --- ### 4.4 Right Pane: Unstructured Context & Interactions **Purpose:** Connect quantitative data (left/center) to narrative context (right). See "why" behind the numbers. **Components:** #### Latest Interactions (Log) Shows most recent 3-5 interactions with sentiment: ``` ┌─ Interactions ────────────────────────────────────────┐ │ ⭐⭐⭐⭐⭐ Sarah Chen (VP Storage) │ │ Call — 2026-10-02 · 5 days ago │ │ "Discussed multi-site replication, pain with NetApp" │ │ Status: Strong Advocate for Pure adoption │ │ │ │ ⭐⭐⭐ Mike Lopez (CIO) │ │ Email — 2026-09-15 · 22 days ago │ │ "Budget constraints; interested in OpEx models" │ │ Status: Neutral, cost-focused │ │ │ │ ⭐⭐ Jennifer Park (CFO) │ │ Meeting — 2026-08-20 · 47 days ago │ │ "Positive on storage consolidation, capex tight" │ │ Status: Positive but budget-constrained │ │ │ │ [+ Log New Interaction] │ └───────────────────────────────────────────────────────┘ ``` #### Related Notes (from Markdown) Embedded snippet from Obsidian Markdown file: ``` ┌─ Discovery Notes ──────────────────────────────────────┐ │ STRATEGY THEME: Consolidation play │ │ Customer is post-acquisition; consolidating 3 data │ │ centers into 2. Big opportunity to move from multi- │ │ vendor (EMC + NetApp) to Pure standardization. │ │ │ │ RISK: Customer risk-averse on primary storage. │ │ LEVER: Success story at reference customer + DR copy. │ │ │ │ NEXT STEP: Sarah is scheduled for Q4 arch review. │ │ Come with: Multi-site replication architecture, │ │ consolidation cost model. │ │ │ │ [View Full Notes] [Edit in Obsidian] │ └───────────────────────────────────────────────────────┘ ``` #### Quick Actions - **[Log Interaction]** → Popup form to add call/email/meeting - **[View All Notes]** → Opens Obsidian file - **[View Sheets]** → Opens Google Sheets - **[Share Account]** → (Future) generates link --- ### 4.5 Responsive Behavior & Interactivity #### Drill-Down Interactions - **Cards expand in place** — no modal/new page; content slides down - **Breadcrumb trail** — e.g., "Account > List 1 > Data Footprint" so you know where you are - **Collapse others** — When one card expands, others collapse (reduces noise) - **Smooth transitions** — Cards animate open/closed #### Status Badges & Visual Indicators | Status | Color | Meaning | |--------|-------|---------| | 🟢 Green | Good / On Track / Advocate | Positive signal | | 🟡 Yellow | Caution / Aging / Neutral | Attention needed | | 🔴 Red | Risk / Critical / Urgent | Action required | | ⚪ Gray | Unknown / TBD | Need more info | #### Data-Driven Highlights Conditional visual emphasis on metrics: - **Refresh window approaching** (>4yr age) → Highlighted in yellow - **Coverage gap opportunity** (low % Pure) → Highlighted in orange - **Budget cycle in next 90 days** → Underlined with "upcoming" tag - **Strong champion sentiment** → Starbursts/badge next to name --- ## 5. Component Breakdown & Data Mapping ### 5.1 Component Hierarchy ``` DashboardApp ├── Header │ ├── AccountName │ ├── StatusBadge (Prospect/Customer) │ ├── MetadataBar (Vertical, Location, Last Updated) │ └── HeaderActions ([Share] [Edit] [Settings]) │ ├── MainLayout (3-pane) │ │ │ ├── LeftPane (Overview) │ │ ├── HealthScorecard │ │ │ ├── KPICard (Pure Coverage) │ │ │ ├── KPICard (Fleet Age) │ │ │ ├── KPICard (Opportunity Size) │ │ │ └── KPICard (Engagement Momentum) │ │ ├── TimelineComponent │ │ │ ├── TimelineEvent (Refresh Date) │ │ │ ├── TimelineEvent (Budget Cycle) │ │ │ ├── TimelineEvent (Contract Renewal) │ │ │ └── TimelineEvent (Next Review) │ │ └── ActionButtons │ │ ├── Button (QBR Prep) │ │ ├── Button (Edit Account) │ │ ├── Button (View Notes) │ │ └── Button (Share) │ │ │ ├── CenterPane (Details & Drill-Down) │ │ ├── TabBar │ │ │ ├── Tab (Overview) │ │ │ ├── Tab (List 1: Account Profile) │ │ │ ├── Tab (List 2: Pure Deployment) │ │ │ └── Tab (Opportunities — future) │ │ │ │ │ └── TabContent (varies by tab) │ │ └── DetailsCard (repeating) │ │ ├── CardHeader (title + status) │ │ ├── CardSummary (10K ft view) │ │ ├── ExpandButton │ │ └── ExpandedContent (on click) │ │ ├── DetailTable / Chart │ │ ├── TrendVisualization │ │ └── RelatedContext │ │ │ └── RightPane (Context) │ ├── InteractionLog │ │ └── InteractionItem (repeating) │ │ ├── Sentiment (stars) │ │ ├── Contact Info │ │ ├── Timestamp │ │ └── Summary │ ├── RelatedNotes │ │ └── NotesSnippet │ └── QuickActions │ ├── Button (Log Interaction) │ ├── Button (View All Notes) │ └── Button (View Sheets) ``` ### 5.2 Data Source Mapping | Component | Data Source | Sheet Location | Notes | |-----------|---|---|---| | **Account Name** | Account tab | Name | | | **Status Badges** | Account tab | Status, Vertical, Location | | | **Health Scorecard** | Account + Pure-Deployment tabs | Multiple cells + formulas | Calculated KPIs | | **Timeline** | Account tab | Columns: Next Refresh Date, Budget Cycle, Contract End, Next Review | | | **List 1 Cards** | Account tab | Tabs: Item 1-5 data | Five expandable items | | **List 2 Cards** | Pure-Deployment tab | Tabs: Item 1-5 data | Five expandable items | | **Interaction Log** | Interactions tab | Contact, Type, Date, Sentiment, Summary | Sorted by date DESC | | **Related Notes** | Markdown file (Obsidian) | Fetched via API or embed | Text snippet + link | --- ## 6. Visual Design Principles ### Color Palette (Themeable) - **Accent Blue** (Primary): List 1 items, account overview - **Accent Green** (Secondary): List 2 items, Pure deployment - **Status Green** (Success): Healthy, positive, on-track - **Status Yellow** (Warning): Approaching refresh, caution needed - **Status Red** (Critical): Urgent action required - **Neutral Gray**: Unknown, TBD, secondary content - **Text Dark Gray** (Light mode) / **Text Light Gray** (Dark mode) - **Background**: Light/dark mode adaptive ### Typography - **Header**: Large, bold, account name stands out - **Tab titles**: Medium weight, clear tab distinction - **Card titles**: Semi-bold, clickable indicator (▼) - **Data values**: Monospace for numbers (easier to scan) - **Labels**: Smaller, muted color ### Spacing & Layout - **Panes**: Equal width (33% each) or responsive flex at smaller widths - **Cards**: Padding ~20px, margin ~16px between cards - **Drill-down**: Animated 200ms expand/collapse - **Mobile**: Stack panes vertically (future consideration) --- ## 7. Navigation & User Flows ### Flow 1: Pre-Call Prep (15 min before discovery) ``` User lands on dashboard ↓ Glances at Health Scorecard (30 sec) — "Pure coverage 30%, fleet aging, $3.5M upside" ↓ Checks Key Dates Timeline (30 sec) — "Budget cycle in 3 mo, refresh in 18 mo" ↓ Clicks "QBR Prep" action → Opens checklist template in new tab ↓ Scrolls to Center pane, clicks "Current Vendors" card to see EMC footprint ↓ Reads right pane: "Customer risk-averse on primary storage; use reference story" ↓ Click [Log Interaction] → Pre-fills with today's call, ready to document post-call ``` ### Flow 2: Competitive Displacement Hunt ``` User is looking for displacement opportunities ↓ Opens Account dashboard ↓ Glances at Scorecard: "Pure coverage 30%" → Opportunity ↓ Clicks "Data Footprint" card → Sees workload breakdown ↓ Clicks "Current Vendors" card → Sees EMC system (200TB, 6yr old, primary OLTP) ↓ Clicks "Coverage Gaps" card → Confirms: "EMC Symmetrix not on Pure yet" ↓ Reads notes: "Customer risk-averse but willing to migrate if proven" ↓ Action: Find reference customer, prepare migration playbook for next call ``` ### Flow 3: Expansion Planning ``` User reviewing account for renewal/expansion ↓ Glances at Scorecard: Fleet age, Opportunity size, Engagement momentum ↓ Clicks "Fleet Age" card → Sees FA-P1 refresh window in 18 months ↓ Clicks "Refresh Cycles" card → Confirms capex cycle and window ↓ Checks Stakeholder info in right pane → "Sarah (VP Storage) is champion, strong advocate" ↓ Clicks "Opportunities" tab (future) → See pipeline: Analytics consolidation (Q2 2027, $1.5M) ↓ Action: Schedule architecture review with Sarah for Q1; prepare proposal for analytics move ``` --- ## 8. Data Sync & Freshness ### MVP Approach: Manual Sync - **Sheet → Dashboard**: Copy-paste JSON export or Google Sheets API call (daily/on-demand) - **Markdown → Dashboard**: Fetch from Obsidian API or GitHub if synced - **Freshness**: Dashboard is "point-in-time snapshot" at time of load - **Update frequency**: User refreshes page or manually syncs from edit screens ### Future: Live Sync - Dashboard queries Google Sheets API in real-time - Interactions logged directly to Sheets (no manual re-entry) - Markdown fetched from Obsidian Sync API - Auto-refresh KPIs every 5 minutes --- ## 9. Extensibility Points (Future Phases) ### Phase 2: Relationships & Interaction History - **Tab 4: Relationships** — Org chart, sentiment timeline, interaction history - **Interaction log** — Searchable, filterable by contact, type, sentiment - **Sentiment analysis** — Chart showing mood trend over time ### Phase 3: Opportunities & Pipeline - **Tab 5: Opportunities** — Consolidation roadmap, deal timeline, revenue forecast - **Milestone tracking** — Countdown to RFP, contract close, etc. ### Phase 4: Financial Modeling - **10-K integration** — Embed PDF link, key metrics extracted - **Opportunity forecasting** — If analytics consolidates, revenue impact - **Budget impact model** — Capex vs. OpEx trade-off calculator ### Phase 5: Industry & Competitive Context - **Industry trends** — Curated insights relevant to account - **Competitor tracking** — Win/loss intelligence, displacement playbooks - **Market context** — Industry growth rates, regulatory changes --- ## 10. Technical Architecture ### Technology Stack - **Frontend**: React (or vanilla JS if keeping simple) - **Styling**: Tailwind CSS (or custom CSS-in-JS) - **Data sources**: - Google Sheets API (for Account, Pure-Deployment, Relationships, Financials tabs) - Markdown file (from Obsidian or GitHub) - **Deployment**: Claude artifact (publishable, shareable URL) or self-hosted on homelab - **Build**: Vite (fast dev) or Create React App ### API Integration (MVP) ``` Frontend (React) ↓ ├─→ Google Sheets API v4 │ └─ Fetch: Account!A:Z, PureDeployment!A:Z, Relationships!A:Z, etc. │ Rate: On-demand or 5-min cache │ └─→ Markdown fetch (via Obsidian API or raw GitHub/Drive link) └─ Fetch: Markdown content, parse for snippets ``` ### State Management - **Client-side state**: React hooks (useState, useEffect) - **Server state**: Google Sheets is source of truth - **UI state**: Which tab active, which card expanded - **No local storage** (MVP): Always fresh from source --- ## 11. Accessibility & Usability ### Keyboard Navigation - Tab through cards, tabs, buttons - Enter/Space to expand cards - Escape to collapse all - Ctrl/Cmd+Click to open links in new tab ### Screen Readers - Semantic HTML (headers, nav, main, article) - ARIA labels on custom components - Heading hierarchy (H1 = account name, H2 = tabs, H3 = card titles) ### Color Contrast - All text meets WCAG AA standards - Status indicators have labels (not color alone) - Links underlined or clearly differentiated ### Mobile Responsiveness (Future) - Stack panes vertically on small screens - Touch-friendly button sizes (44px minimum) - Collapsible sections for readability --- ## 12. Success Metrics (MVP) | Metric | Target | How to Measure | |--------|--------|---| | **Time to account snapshot** | <2 min to full context | User time log | | **Drill-down effectiveness** | Find key metric in <30 sec | User task test | | **Information completeness** | All 10 items readily visible | Checklist | | **Visual clarity** | No confusion on next steps | User feedback | | **Engagement** | Used for all 3 use cases equally | Usage logs | --- ## 13. Known Constraints & Trade-offs | Constraint | Impact | Mitigation | |-----------|--------|---| | **Manual sync (MVP)** | Data can lag if Sheets updated but dashboard not refreshed | Clear "last updated" timestamp; button to manual sync | | **No real-time collaboration** | If account team edits Sheets while viewing dashboard, changes won't appear until reload | Future: implement live sync | | **Single-customer dashboard** | Can't compare metrics across accounts in MVP | Future: roll-up view with filtering | | **API rate limits (Sheets)** | Can't refresh dashboard every second | Cache on client; user triggers refresh manually | --- ## 14. Success Criteria for Prototype ✅ **Must Have (MVP)** - [ ] All 10 items (List 1 + List 2) visible and organized - [ ] 3-pane layout functioning (left/center/right) - [ ] Cards expand/collapse on click with animation - [ ] Health scorecard with 4 KPIs calculated - [ ] Timeline showing key dates - [ ] Sample data flowing in from mock Sheets - [ ] Navigation between tabs (Overview, List 1, List 2) - [ ] Status badges and visual indicators rendering correctly ⚡ **Should Have (Nice to Have)** - [ ] Trend indicators (↑ ↓ →) on KPI cards - [ ] Sample charts (pie, line) in expanded views - [ ] Markdown snippet embedded in right pane - [ ] Interaction log with sentiment stars - [ ] Dark mode toggle 🎯 **Nice to Have (Future)** - [ ] Google Sheets API actually connected (MVP uses mock data) - [ ] Relationships tab structure visible - [ ] QBR Prep modal/checklist - [ ] Share functionality - [ ] Export to PDF --- ## 15. Design Review Checklist **Questions for Ryan before prototype:** 1. ✅ Is the 3-pane layout clear? Does it support the 10K → ground zoom? 2. ✅ Are the 4 KPIs the right ones, or would you change them? 3. ✅ Does the drill-down interaction (click card → expand) feel right, or prefer modal? 4. ✅ Should the right pane be scrollable independently, or scroll with center pane? 5. ✅ Any major UX concerns with the navigation flow? 6. ✅ Is the timeline component clear (horizontal bar vs. vertical list)? 7. ✅ Color palette acceptable, or want different accent colors? 8. ✅ Any tabs or components you'd add/remove for MVP? --- **Document Status:** Ready for Design Review & Feedback **Next Step:** Prototype build (pending approval of this design)