# Churn Dashboard Redesign Brief
**Prepared for:** Leadership Review | April 14, 2026  
**Prepared by:** VP Growth Team  
**Target Delivery:** Q2 2026

---

## Executive Summary

Current churn dashboard has 14 visuals that are difficult to parse in meetings and unreadable on mobile (55% of sessions). This redesign reduces to 6 focused visuals with clear narrative flow from "what changed" → "where to act", optimized for both 16:9 presentation and iPhone review.

**Key Changes:**
- Reduce visual count from 14 → 6 core visuals
- Mobile-first layout with responsive breakpoints
- Accessible color system (WCAG 2.1 AA compliant)
- Unified filter panel with clear reset option
- Drill-through paths for segment deep-dives

---

## Design Principles

1. **Answer First, Explore Second** — Lead with the headline metric, then provide drill paths
2. **Mobile = Primary** — Design for 375px width first, scale up to desktop
3. **15-Minute Comprehension** — Executives should grasp status in under 1 minute, explore in 14
4. **Accessible by Default** — Never rely on color alone for status encoding

---

## Recommended Page Layout

### Primary Page: "Churn Overview"
**Target: 6 visuals, <3 second load time**

```
┌─────────────────────────────────────────────────────┐
│  FILTER PANEL (collapsible on mobile)              │
│  Week Range | Segment | Plan Tier | Region | Reset │
└─────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────┐
│  1. KPI SCORECARD (horizontal cards)                │
│  ┌──────────┬──────────┬──────────┬──────────┐     │
│  │ Churn %  │ 4wk Ret% │ Net Subs │ Active   │     │
│  │ 4.8%     │ 68.2%    │ -1,245   │ 31,806   │     │
│  │ ↑ 0.6pp  │ ↓ 3.1pp  │ ↓ 892    │ ↑ 0.4%   │     │
│  └──────────┴──────────┴──────────┴──────────┘     │
└─────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────┐
│  2. CHURN TREND (line chart, 12 weeks)              │
│  Shows weekly churn % with March pricing change     │
│  annotation. Cross-highlights with segment visual.  │
└─────────────────────────────────────────────────────┘

┌──────────────────────┬──────────────────────────────┐
│  3. SEGMENT IMPACT   │  4. RETENTION COHORT         │
│  (stacked bar)       │  (small multiples line)      │
│  Shows cancellations │  4-week retention by segment │
│  by segment with     │  Starter/Growth/Enterprise   │
│  ARPU context        │  trend comparison            │
└──────────────────────┴──────────────────────────────┘

┌─────────────────────────────────────────────────────┐
│  5. RISK MATRIX (dot plot, simplified)              │
│  Churn Rate (Y) vs Active Subs (X) by segment      │
│  Bubble size = cancellations, color = trend         │
└─────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────┐
│  6. ACTION PRIORITY TABLE (top 5 segment/plan)      │
│  Segment | Plan | Churn | Δ | Subs at Risk | ARPU  │
│  Sortable, shows where to intervene first           │
└─────────────────────────────────────────────────────┘
```

---

## Visual Specifications

### 1. KPI Scorecard
**Type:** Card visual (4 metrics, horizontal layout)  
**Why:** Immediate status check; mobile-friendly horizontal scroll if needed  
**Metrics:**
- Weekly Churn Rate % (primary KPI)
- 4-Week Retention % (leading indicator)
- Net Subscriber Change (volume context)
- Active Subscriber Base (denominator awareness)

**Design:**
- Large metric value (32px bold)
- Delta indicator with directional arrow and color
- Week-over-week comparison in smaller text (14px)
- Cards stack vertically on mobile (<768px)

**Color Logic:**
- Churn increase: Amber (#F39C12) if <0.5pp, Red (#C0392B) if ≥0.5pp
- Retention decrease: Same logic inverted
- Include icon (▲▼) + color + text label ("Up 0.6pp")

---

### 2. Churn Trend Line Chart
**Type:** Line chart with area fill  
**Why:** Shows trajectory and March inflection point clearly  
**Data:** Last 12 weeks of weekly churn rate %

**Design:**
- Single line with subtle area fill (10% opacity)
- Vertical annotation line at March 9 ("Pricing/Onboarding Changes")
- Y-axis starts at 0% for honest scale
- Tooltip shows: Week | Churn % | Cancellations | Active Subs
- Cross-highlight enabled with segment visuals

**Mobile Optimization:**
- Reduce to 8 weeks on <768px width
- Larger touch targets on data points (44x44px)
- Simplified axis labels

---

### 3. Segment Impact Stacked Bar
**Type:** Stacked bar chart (horizontal)  
**Why:** Shows contribution to total cancellations by segment  
**Data:** Current week cancellations by segment

**Design:**
- Horizontal bars (better for mobile)
- Segments: Starter | Growth | Enterprise
- Color: Brand blue (#0B5CAB) with opacity variations (100%, 70%, 40%)
- Data labels show both count and percentage
- ARPU shown as secondary axis or in tooltip

**Interaction:**
- Click segment to filter entire page
- Drill-through to segment detail page

---

### 4. Retention Cohort Small Multiples
**Type:** Small multiples line chart  
**Why:** Shows retention trend by segment without clutter  
**Data:** 4-week retention % over last 12 weeks

**Design:**
- 3 mini charts (Starter, Growth, Enterprise)
- Same Y-axis scale (50-100%) for comparison
- Sparkline style with minimal chrome
- Current value prominently displayed

**Mobile:**
- Stack vertically on <768px
- Expand to full width for readability

---

### 5. Risk Matrix Dot Plot
**Type:** Scatter plot (simplified from current matrix)  
**Why:** Shows risk concentration without overwhelming detail  
**Data:** Current week, one dot per segment/plan combination

**Design:**
- X-axis: Active Subscribers (log scale if needed)
- Y-axis: Churn Rate %
- Bubble size: Cancellations (absolute count)
- Color: Trend direction (Red = worsening, Teal = improving, Gray = stable)
- Quadrant lines at median churn and median subscriber count

**Accessibility:**
- Color + pattern fill (solid/striped/dotted)
- Tooltip includes all context
- Legend clearly explains encoding

**Mobile:**
- Reduce to top 10 segments only
- Larger minimum bubble size for touch

---

### 6. Action Priority Table
**Type:** Table visual with conditional formatting  
**Why:** Gives clear "where to act" guidance for retention team  
**Data:** Top 5 segment/plan combinations by risk score

**Columns:**
1. Segment
2. Plan Tier
3. Current Churn %
4. Δ vs 4-week avg
5. Subscribers at Risk (active subs × churn rate)
6. ARPU (context for intervention ROI)

**Design:**
- Sort by "Subscribers at Risk" descending by default
- Conditional formatting: Red background (>5% churn), Amber (3-5%), None (<3%)
- Include pattern (diagonal lines) for color-blind users
- Max 5 rows on primary page; drill-through for full list

**Mobile:**
- Horizontal scroll enabled
- Sticky first column (Segment)
- Minimum column width 80px

---

## Filter & Interaction Design

### Unified Filter Panel
**Location:** Top of page, collapsible on mobile  
**Filters:**
1. **Week Range** — Dropdown: Last 8 weeks | Last 12 weeks | Last 26 weeks | Custom
2. **Segment** — Multi-select: Starter | Growth | Enterprise | (All)
3. **Plan Tier** — Multi-select: Monthly | Annual | (All)
4. **Region** — Multi-select: North America | Europe | APAC | (All)
5. **Reset All** — Button (prominent, right-aligned)

**Design:**
- Horizontal layout on desktop (all in one row)
- Vertical stack on mobile with accordion collapse
- Active filter count badge when collapsed
- Sync between desktop and mobile layouts
- Clear visual indicator when filters are active (blue border)

**Accessibility:**
- Keyboard navigable
- Screen reader announces filter changes
- Focus trap when filter panel is open on mobile

---

## Mobile-First Considerations

### Breakpoints
- **Mobile:** <768px (iPhone, Android phones)
- **Tablet:** 768-1024px (iPad)
- **Desktop:** >1024px (laptop, external monitor)

### Mobile Layout Changes
1. **KPI Cards:** Stack vertically, full width
2. **Trend Chart:** Reduce to 8 weeks, larger touch targets
3. **Segment Impact + Retention:** Stack vertically (not side-by-side)
4. **Risk Matrix:** Show top 10 only, larger bubbles
5. **Action Table:** Horizontal scroll, sticky first column
6. **Filter Panel:** Accordion collapse with badge

### Touch Targets
- Minimum 44x44px for all interactive elements
- Increased padding between visuals (16px minimum)
- Larger data point markers on charts (8px radius minimum)

### Performance
- Lazy load visuals below fold on mobile
- Reduce data points on mobile (8 weeks vs 12 weeks)
- Compress images and use SVG where possible
- Target <3 second load on 4G connection

---

## Accessible Color System

### Status Colors (WCAG 2.1 AA Compliant)
**Critical Alert:**
- Color: #C0392B (red)
- Pattern: Diagonal lines (45°)
- Icon: ⚠️ or ▲
- Text: "Critical" or "High Risk"

**Caution:**
- Color: #F39C12 (amber)
- Pattern: Dotted fill
- Icon: ⚡ or ●
- Text: "Caution" or "Monitor"

**Positive:**
- Color: #17A673 (teal)
- Pattern: Solid fill
- Icon: ✓ or ▼
- Text: "Improving" or "Stable"

**Neutral:**
- Color: #2C3E50 (dark gray)
- Pattern: No fill
- Icon: ─
- Text: "No Change"

### Brand Colors
- **Primary:** #0B5CAB (deep blue) — main charts, headers
- **Accent:** #17A673 (teal) — positive indicators, CTAs
- **Background:** #FFFFFF (white) — page background
- **Surface:** #F8F9FA (light gray) — card backgrounds
- **Text:** #2C3E50 (dark gray) — body text
- **Text Secondary:** #7F8C8D (medium gray) — labels, captions

### Contrast Ratios
- Body text (14px): 4.5:1 minimum (#2C3E50 on #FFFFFF = 12.6:1 ✓)
- Large text (18px+): 3:1 minimum
- Interactive elements: 3:1 minimum
- Chart data: 4.5:1 minimum for readability

### Color-Blind Considerations
- Never use color alone to convey information
- Always pair with: icon, pattern, text label, or position
- Test with Color Oracle or similar tool
- Avoid red/green only combinations (use red/blue or amber/teal)

---

## Drill-Through Paths

### From Primary Page → Segment Detail Page
**Trigger:** Click segment in bar chart or table  
**Destination:** Segment detail page with:
1. Segment KPI scorecard (filtered)
2. Plan tier breakdown (stacked area chart)
3. Regional split (map or bar chart)
4. Cohort retention curve (line chart by signup week)
5. Cancellation reasons (if available)
6. Back button to overview

**Design:**
- Breadcrumb navigation (Overview > Starter Segment)
- Maintain filter context from primary page
- Mobile: Full-screen drill-through with slide transition

---

## Implementation Notes

### Power BI Specific
- Use native visuals only (no custom visuals for performance)
- Enable cross-highlighting between trend and segment visuals
- Set up mobile layout in Power BI Mobile Layout view
- Test on actual iPhone/Android devices, not just emulator
- Use bookmarks for "Reset Filters" button
- Set up row-level security if needed for regional access

### Data Refresh
- Schedule refresh before Monday 8am leadership review
- Add "Last Updated" timestamp to page header
- Set up failure alerts to data team

### Accessibility Testing
- Run Power BI Accessibility Checker
- Provide alt text for all visuals (template below)
- Test with screen reader (NVDA or JAWS)
- Verify keyboard navigation works

### Alt Text Templates
```
Visual 1: "KPI scorecard showing current week churn rate of 4.8%, up 0.6 percentage points from last week. Four-week retention is 68.2%, down 3.1 percentage points."

Visual 2: "Line chart showing weekly churn rate trend over 12 weeks. Churn increased from 4.2% in mid-February to 4.8% in early April, with notable increase after March 9 pricing changes."

Visual 3: "Stacked bar chart showing cancellations by segment. Starter segment accounts for 65% of cancellations, Growth 30%, Enterprise 5%."

[Continue for each visual...]
```

---

## Success Metrics

**Immediate (Week 1):**
- Dashboard load time <3 seconds on VPN
- 100% of executives can identify top risk segment in <60 seconds
- Zero accessibility violations in Power BI checker

**Short-term (Month 1):**
- Mobile session duration increases by 30%
- Filter usage increases (indicates exploration)
- Positive feedback from leadership review

**Long-term (Quarter 1):**
- Faster decision-making on retention interventions
- Reduced "can you pull this data" ad-hoc requests
- Template adopted for other executive dashboards

---

## Next Steps

1. **Review & Approve** — Leadership sign-off on design (April 14)
2. **Build Prototype** — Power BI developer creates mockup (April 15-18)
3. **User Testing** — Test with 2-3 executives on mobile (April 21)
4. **Iterate** — Refine based on feedback (April 22-25)
5. **Launch** — Deploy to production (April 28)
6. **Monitor** — Track usage and gather feedback (ongoing)

---

## Appendix: Current vs Proposed Comparison

| Aspect | Current | Proposed | Impact |
|--------|---------|----------|--------|
| Visual Count | 14 | 6 | -57% clutter |
| Mobile Readability | Poor (matrix unreadable) | Optimized (responsive) | +55% mobile sessions |
| Load Time | 5-7 seconds | <3 seconds | +40% faster |
| Filter Location | Split (top + right) | Unified (top) | Clearer context |
| Accessibility | Red/green only | Color + pattern + text | WCAG 2.1 AA |
| Narrative Flow | Unclear | What → Where → Why | Faster decisions |
| Drill Capability | Limited | Segment detail page | Deeper analysis |

---

**Questions or Feedback:** Contact VP Growth team  
**Version:** 1.0 | April 14, 2026