703 lines
34 KiB
Markdown
703 lines
34 KiB
Markdown
# 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)
|