How to Design a SaaS Dashboard in 2026 — 8-Step Framework + 12 Examples
Step-by-step framework for designing a SaaS dashboard that drives action. Learn the 8 principles top SaaS apps follow (Linear, Stripe, Vercel, Notion) with annotated examples.
TL;DR — How to Design a SaaS Dashboard
The 8-step framework top SaaS designers use:
- Identify the 3-5 metrics that matter to your specific user role
- Design empty state first (most users see it before they see the loaded version)
- Lead with the next best action, not raw data
- Use 1 hero metric + 4-6 supporting metrics (not 20)
- Default to relevant time range (today / 7-day, not all-time)
- Make every chart click-through to detail (no dead-ends)
- Show team activity if multi-player matters
- Test with users who have 0 data and 1 year of data (different needs)
Best-in-class examples: Linear, Stripe, Vercel, Notion, Figma, Mixpanel, Posthog. Browse all dashboard patterns on Gummble's pattern hub.
Pricing references in this post accurate at publish time (May 2026).
Why most SaaS dashboards fail
Common failures:
- Too many metrics — 20 widgets in a 2-column grid. User picks none.
- No next action — pure data display. User leaves.
- Bad empty state — "Nothing here yet." User assumes the product is broken.
- Wrong time range default — "All time" when user wants today.
- Charts that don't drill down — visualization without depth.
The framework below avoids all five.
Step 1 — Identify the 3-5 metrics that matter
Different roles care about different metrics:
| Role | Hero metric | Supporting metrics | |---|---|---| | Founder (B2B SaaS) | MRR | New signups, churn, ARPU, growth rate | | PM | Active users | Feature adoption, retention curve, NPS | | Engineer (DevOps) | Uptime / errors | P95 latency, deploy frequency, error rate | | Marketer | Conversions | Traffic sources, funnel stages, CPC | | Sales | Pipeline value | Deals closed, MQL→SQL rate, velocity |
Don't try to serve all roles in one dashboard. Build role-specific dashboards or persistent filters.
Step 2 — Design empty state first
Most new users see your dashboard with 0 data. Design for this case first.
A great empty state:
- Explains what will appear here ("Your monthly revenue chart will show here once you have your first sale")
- Provides a next action ("Add your first product →")
- Optionally shows sample data so the user can imagine the loaded state
Anti-pattern: "No data yet." with no context or action. Users assume the product is broken.
Examples to study: Linear's empty issues view, Stripe's empty payments view, Notion's empty database view.
Step 3 — Lead with the next best action
Dashboards that just display data don't drive product use. The user should see what to do next immediately.
Examples of "next best action" patterns:
- Stripe Dashboard: "Process your first payment" CTA above the chart
- Linear: "Add an issue" pill at the top of an empty board
- Notion: "Continue working on [last edited doc]" card at top
- Mixpanel: "Set up your first event" wizard if no events exist
Place this above or beside the hero metric, not buried.
Step 4 — Use 1 hero metric + 4-6 supporting
Cognitive load research: 7 ± 2 items is the human working-memory limit. Dashboards with 15-20 widgets fail this test.
Layout:
- Top center: 1 hero metric, large, with delta from previous period
- Top row: 3-5 supporting metrics, smaller
- Below: 1-2 charts (trends over time)
- Bottom: Recent activity feed
Avoid 4-column grids of 20 metrics. They feel comprehensive but they're noise.
Step 5 — Default to relevant time range
90% of dashboard sessions look at the last 7 or 30 days, not all-time. Default to the most-used range.
Specific patterns:
- B2B SaaS: 30-day default, with toggles for 7d / 90d / 1y
- Habit trackers: today's view default, week/month toggles
- Analytics tools: 24h / 7d / 30d / 90d (Stripe, Mixpanel, Posthog all do this)
Anti-pattern: All-time as default. Useless for active users.
Step 6 — Every chart drills down to detail
A chart that's just a picture is wasted screen real estate.
Every chart should:
- Be clickable (tap a bar → see that day's data)
- Have hover states with exact values
- Link to a filtered detail view ("View all signups from Tuesday")
Best-in-class: Stripe Dashboard charts → click → filter the table below. Mixpanel charts → click → see the underlying user list.
Step 7 — Show team activity if multi-player
For team SaaS tools (Linear, Figma, Notion, Slack), seeing teammate activity drives engagement:
- Recent comments
- Updates from others
- Mentions
- Activity feed
Place this in a sidebar or below the hero. Not in the hero — that's for the user's own metrics.
Step 8 — Test with 0 data and 1 year of data
These are very different experiences. Test both:
- 0 data: Does the empty state explain + guide?
- 1 year of data: Does the dashboard remain readable, fast, and useful? Or does it become noise?
Common failure: dashboards that look great with sample data fail at scale.
12 best SaaS dashboards in 2026
| App | What it does well | |---|---| | Linear | Empty states + clear hero metric per view | | Stripe | Time range default + drill-down on every chart | | Vercel | Fastest dashboard load (under 200ms) | | Notion | Personalized "continue working on" cards | | Figma | Activity feed + recent files prominent | | Mixpanel | Powerful filters without overwhelming UI | | Posthog | Customizable tiles + free tier | | Datadog | Dense but readable for engineers | | Stripe Dashboard | Best B2B SaaS dashboard, period | | Cron (Notion Calendar) | Personal task hero metric | | Tinybird | Minimal — just the data that matters | | Plausible | Privacy-first analytics with clean UI |
Browse more dashboard examples → on Gummble's pattern hub.
Tools comparison for designing dashboards
| Need | Best tool | |---|---| | Reference dashboards from real SaaS apps | Gummble Pattern Hub — Dashboard | | Charting library | Recharts (React) or Visx | | Data viz reference | Datavizproject.com | | Empty state references | Gummble — Empty States |
Common dashboard mistakes
1. Designing for the founder, not the user
Founders want to see "everything." Users want to see "what matters to me." Design for users.
2. Loading slow
A dashboard that takes 3 seconds to load loses 50% of sessions. Cache aggressively, lazy-load below-fold widgets.
3. No hierarchy
If everything is the same size, nothing is important. Use visual hierarchy: hero metric is 2× larger than supporting.
4. Mixing metric units carelessly
$ next to % next to count next to time. User has to mentally re-scale every widget. Group similar units together.
5. No "what's new" indicator
Users don't know what changed since their last visit. Add a "since you last visited" delta or activity feed.
FAQ
How many widgets should a SaaS dashboard have?
5-7 widgets max for the main view. 1 hero + 4-6 supporting. More than 7 hits the cognitive load ceiling.
What's the best dashboard layout?
Hero metric center-top → supporting metrics in a row → 1-2 trend charts → recent activity feed. Single column or 2-column.
Should dashboards show real-time data?
For ops dashboards (uptime, errors): yes, real-time. For business dashboards (MRR, signups): hourly or daily refresh is fine — real-time is misleading on lagging metrics.
What dashboard tool should I copy?
Stripe Dashboard for B2B SaaS, Linear for productivity tools, Mixpanel for analytics-heavy products. Browse Gummble's dashboard pattern hub for full curation.
How long does it take to design a SaaS dashboard?
For an MVP: 2-3 days of research + 3-5 days of design. For a polished v1: 2-3 weeks total.
What's the most common dashboard mistake?
Too many widgets. 15-20 widgets with no hierarchy = users see nothing. Cut to 5-7 with one clear hero.
Bottom line
Great SaaS dashboards in 2026 lead with one hero metric + 4-6 supporting metrics, design empty states first, default to 7- or 30-day ranges, and make every chart drill down to detail.
The masters: Linear, Stripe, Vercel, Notion, Figma. Study them on Gummble's dashboard pattern hub.
Related:
The Gummble editorial team curates UI design inspiration from thousands of real iOS and web apps. We write about design patterns, trends, and the craft of shipping great interfaces.
Follow on Twitter →See these patterns in action
Browse 1,500+ curated apps from the world's best iOS and web products.
Browse the Library →