SaaS Dashboard Design: 12 Patterns That Drive Activation and Retention
Plain-text descriptions of 11 SaaS dashboard UI patterns: empty states, KPI cards, tables vs cards, filters, alerts, loading states and data export.
A website that looks cheap doesn't necessarily have bad design. More often, it has good design with two or three specific failures that undermine the whole. The good news: most of these failures are fixable without a redesign.
Here are the eight most common ones and exactly what to do about each.
Typography is the single biggest differentiator between sites that feel polished and sites that feel amateur. Most startup sites have two problems:
Too many weights. Using Regular, Medium, SemiBold, Bold, and ExtraBold across a site signals lack of constraint. Pick two: one for headings (typically Bold or SemiBold), one for body (Regular). If you need a third, Medium for UI labels.
Inconsistent sizing. A site where H2s vary in size from section to section, or where body text is 14px in one component and 16px in another, reads as unfinished. Define a type scale and enforce it: 12, 14, 16, 20, 24, 32, 48, 64. Nothing else.
The fix: Open your site's CSS and count how many font-size and font-weight values appear. If it's more than eight sizes and three weights, you have a typography problem. Consolidate.
Stock photography is immediately identifiable to everyone who has spent more than an hour on the internet. The smiling diverse team around a conference table, the laptop open on a coffee shop table, the hands typing on a keyboard — these images communicate nothing about your product and everything about your inability to invest in real visuals.
The fix for limited budgets:
Option 1: Don't use photography. A bold typographic hero with a short, specific claim looks better than a generic stock photo. Many excellent sites use no photography at all.
Option 2: Use product screenshots. If your product exists, show it. A real screenshot of your dashboard annotated with callouts is more credible than any stock image.
Option 3: Use illustrations. Custom illustration is expensive but timeless. Tools like Blush.design or a custom illustrator on Contra can produce brand-specific illustrations that don't look like anyone else's.
Option 4: Use abstract visuals. Gradients, geometric patterns, or CSS-generated visuals are better than bad photography. They don't communicate anything specific, but they also don't signal generic.
Colour inconsistency is one of the fastest signals of an amateur site. The specific failure mode: using slightly different shades of the same colour across components because no one defined a colour system.
The primary button is #2563EB. The hover state is #1D4ED8. The link colour is #3B82F6. The active nav item is #1E40AF. These are all "blue" but they're not the same blue, and the brain registers the inconsistency even when the user doesn't consciously notice it.
The fix: Define three to five colours. Name them. Use only them. A minimal colour system: one primary (your brand colour), one neutral (grey scale from white to near-black), and one semantic (red for error, green for success, amber for warning). Everything else is a variation of these three.
If you're on Webflow, this is CSS variables in site settings. If you're on Next.js, this is your Tailwind config or CSS custom properties. Define them once, use them everywhere, never hardcode a hex value outside the system.
"Learn more" is the worst call to action in existence. It says: we don't know what you should do, so do something noncommittal. "Submit" is the second worst. "Click here" is the third.
Button copy is a micro-commitment. Users read it and ask: is this worth clicking? "Learn more" gives them no reason to say yes.
The fix: Replace button copy with action + outcome.
The specificity of the action tells users exactly what clicking will do. This alone often improves click rates measurably.
The footer is the last thing users see before they decide whether to scroll back up and convert or leave. Most startup sites waste this space with a minimal link list and a copyright line.
Users who scroll to the footer are still evaluating. They're looking for the signals that answer: can I trust this company?
What should be in your footer:
The footer doesn't need to be elaborate. It needs to signal legitimacy.
Social proof is on most startup sites. But placement matters as much as presence.
Common placement mistakes:
The fix:
More than half of your visitors are on mobile. Sites that look excellent on desktop and break on mobile are signalling that you don't care about half your visitors.
The specific failures that make mobile sites look cheap:
Horizontal overflow. Content that extends beyond the viewport edge creates a horizontal scrollbar. This happens most often with fixed-width elements, code blocks, and table layouts.
Tiny tap targets. Buttons and links under 44px height are hard to tap reliably. Apple's HIG and Google's Material both specify 44–48px minimum.
Text that doesn't scale. Hero headlines that are 72px on desktop become 72px on mobile and require horizontal scrolling. Use responsive font sizes (clamp() in CSS or Tailwind's responsive prefixes).
The fix: Test your site on a real mobile device, not browser DevTools. DevTools mobile simulation doesn't catch every real-device issue. Send the URL to your phone and spend five minutes clicking through it.
The perception of quality correlates with perceived load speed. A site that loads in 3 seconds "feels" lower quality than a site that loads in 1.2 seconds — independent of design quality.
This is measurable. Google's research on the correlation between load time and user perception of site quality shows consistent results: slower sites are rated lower quality even when design is held constant.
The single most impactful fix: optimise your hero image. Convert it to WebP, add fetchpriority="high", and preload it. This single change moves most marketing sites from "slow" to "fast" on mobile.
Beyond the hero: remove third-party scripts you don't actively use. Every chat widget, analytics library, and A/B testing tool that fires on page load adds weight. Audit what's actually running on your site and remove anything you haven't checked in the last 90 days.
Not all eight problems carry equal weight. Fix in this order:
All eight are implementable without a full redesign. Most are one afternoon of work.
Want a specific audit of your site's credibility problems? Start a conversation — we'll look at your site and tell you exactly what's costing you.
We take on a small number of projects each quarter. Tell us what you're building.
Plain-text descriptions of 11 SaaS dashboard UI patterns: empty states, KPI cards, tables vs cards, filters, alerts, loading states and data export.
We tore down 10 top marketing websites (Linear, Stripe and more): Core Web Vitals, hero copy, social proof and what you can copy for your own site.