34 KiB
34 KiB
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):
-
Pure Coverage — % of total storage on Pure
- Value: 30% | Trend: ↑ +5% YoY | Status: 🟡 Opportunity
- Rationale: Shows expansion potential; top sales driver
-
Fleet Age — Average age of Pure systems
- Value: 4.2 yr | Trend: → flat | Status: 🟡 Refresh Window Approaching
- Rationale: Indicates refresh opportunity timing
-
Expansion Opportunity Size — $ value of consolidation potential
- Value: $3.5M | Trend: ↑ Growing | Status: 🟢 Pipeline-Ready
- Rationale: Deal size at a glance; guides priority
-
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:
- ✅ Is the 3-pane layout clear? Does it support the 10K → ground zoom?
- ✅ Are the 4 KPIs the right ones, or would you change them?
- ✅ Does the drill-down interaction (click card → expand) feel right, or prefer modal?
- ✅ Should the right pane be scrollable independently, or scroll with center pane?
- ✅ Any major UX concerns with the navigation flow?
- ✅ Is the timeline component clear (horizontal bar vs. vertical list)?
- ✅ Color palette acceptable, or want different accent colors?
- ✅ 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)