The SaaS UI Design Checklist: 50 Checks Before Launch

This is a specific, opinionated checklist — not a generic design principles overview. Every item corresponds to a real pattern that either adds or detracts from the quality signal your product sends to users and investors.

Work through it on your highest-traffic screens first. Score it honestly. Fix the 🔴 items before anything else.

Section 1: Marketing Homepage (10 checks)

[ ] 🔴 The above-the-fold headline clearly states what the product does and who it's for — in one sentence, without jargon
[ ] 🔴 A visitor who has never heard of your product can describe it accurately after reading only the headline and subheadline
[ ] 🔴 There is one clear primary CTA above the fold — not three competing buttons
[ ] 🟡 The first social proof element (client logos, testimonials, or usage metric) appears above the fold or within the first scroll
[ ] 🟡 The primary CTA copy describes what happens when you click — "Start free trial" or "Book a demo," not "Get started"
[ ] 🟡 The homepage answers "who is this for?" explicitly — by name or description of the target user
[ ] 🟡 The pricing is either shown directly or a "Pricing" link is clearly visible in the navigation
[ ] 🔵 The page loads in under 3 seconds on a standard connection
[ ] 🔵 Social proof includes named testimonials with attributable companies — not just anonymous quotes
[ ] 🔵 The mobile view of the homepage is tested and functions correctly

Section 2: Onboarding Flow (10 checks)

[ ] 🔴 New users can reach their first meaningful value moment in under 5 minutes
[ ] 🔴 Every step in the onboarding has a clear, single action — not "fill out your profile, connect your integrations, and invite your team"
[ ] 🔴 Empty states at each step explain why there's nothing there and what to do about it
[ ] 🔴 The first screen inside the product (post-signup) shows a clear first action — not a blank dashboard
[ ] 🟡 A progress indicator shows users how far through onboarding they are
[ ] 🟡 The onboarding can be skipped or deferred for users who want to explore first
[ ] 🟡 Inline help or tooltip text explains unfamiliar concepts without requiring users to open documentation
[ ] 🟡 Error messages in onboarding forms explain what went wrong and how to fix it — not just "invalid input"
[ ] 🔵 Email verification is not required before users can access the core product
[ ] 🔵 Users who abandon onboarding mid-flow receive a follow-up email with a link to resume

Section 3: Core Dashboard (10 checks)

[ ] 🔴 The most important metric is visually dominant — larger, bolder, or more prominently placed than secondary metrics
[ ] 🔴 The dashboard has a clear primary action — something the user should do or can do from this view
[ ] 🔴 Empty states are designed — not blank containers — and explain what actions will populate them
[ ] 🔴 Every chart has a clear label that explains what it shows and what the X/Y axes represent
[ ] 🟡 Charts use the simplest chart type that communicates the information — bar charts for comparison, line charts for trends, single numbers for point-in-time metrics
[ ] 🟡 The time range or filter context is always visible — users should always know what period the data represents
[ ] 🟡 Loading states use skeleton screens or shimmer — not blank containers with a spinner
[ ] 🟡 Role-based differences (what admin sees vs. user sees) are tested and correct
[ ] 🔵 The dashboard is usable at 1280px (standard laptop), 1440px (desktop), and 375px (mobile) widths
[ ] 🔵 "No data" states distinguish between "no data yet" and "no data matching your current filters"

Section 4: Typography and Visual Hierarchy (8 checks)

[ ] 🔴 The page can be scanned (without reading carefully) and the most important information is still clear
[ ] 🟡 There are no more than 3 font sizes used on any single screen
[ ] 🟡 Body text is at least 14px (ideally 16px) and has adequate contrast against the background
[ ] 🟡 All text in the product is dark enough to pass WCAG AA contrast standards
[ ] 🟡 Heading hierarchy is consistent: page titles use one style, section headers another, labels another
[ ] 🟡 No text is in all-caps except for specific labels where it's intentional (status badges, short metadata)
[ ] 🔵 The type scale (size ratio between heading levels) is consistent across all screens
[ ] 🔵 Link text is distinguishable from surrounding body text without relying on colour alone

Section 5: Components and Consistency (8 checks)

[ ] 🔴 Every button type (primary, secondary, destructive) looks the same throughout the product
[ ] 🔴 Destructive actions (delete, remove, revoke) are visually distinct from constructive actions
[ ] 🟡 Form inputs look the same across all forms in the product
[ ] 🟡 Error states on inputs show the error message adjacent to the input that caused it — not at the top of the form
[ ] 🟡 Toast notifications and banners (success, error, warning, info) are visually distinguishable from each other
[ ] 🟡 Modal dialogs are used for confirmations and contextual actions — not for displaying large amounts of content
[ ] 🔵 Hover states exist on all interactive elements that have them on desktop
[ ] 🔵 Focus states are visible on all interactive elements for keyboard navigation

Section 6: Copy and Messaging (4 checks)

[ ] 🔴 Error messages describe what happened and what the user should do next — not just that something went wrong
[ ] 🟡 Button labels use active verbs that describe the action: "Save changes," "Delete project," not "OK" or "Submit"
[ ] 🟡 Confirmation dialogs describe the specific consequence of the action before confirming it
[ ] 🔵 The product uses consistent terminology — the same feature is called the same name everywhere

Scoring Your Checklist

Count your passes, warns, and fails by category:

| Status | Meaning | Fix priority | |---|---|---| | 🔴 Critical | Likely causing user confusion or conversion loss | Fix before showing to investors or new users | | 🟡 Warning | Reduces quality perception or adds friction | Fix in the next sprint | | 🔵 Notice | Polish-level improvement | Fix when you have capacity |

The minimum bar before a fundraise or enterprise demo: All 🔴 items passing. Aim for 80%+ of 🟡 items passing.

If your product is scoring below 70% on this checklist and you want a systematic plan for how to fix it, book a free 30-minute design review. We'll run the audit on your specific product and give you a prioritised list of what to fix first.

Frequently Asked Questions

When should I run a SaaS UI design checklist?+

Before any significant product launch or redesign, after each major feature addition, and as a quarterly review. Most valuable immediately before a fundraise or sales push — when you need to know whether the product looks credible enough to show to investors and enterprise prospects.

How long does a UI design audit take?+

A focused review of 3–5 key screens takes 60–90 minutes. A comprehensive audit of a full product takes 2–4 hours. The goal is to identify the highest-priority issues, not achieve a perfect score. Five critical issues fixed is worth more than 40 minor issues documented.

What's the most important section for a pre-revenue SaaS?+

The marketing homepage and onboarding sections. Pre-revenue, these two screens determine whether you can attract and activate users. A rough dashboard is forgivable at pre-revenue stage; a marketing site that doesn't communicate what the product does will silently kill acquisition.

Should I use this checklist myself or have a designer run it?+

Both. Run it yourself first, then have a designer run it independently. Designers catch issues that founders normalise after seeing the product every day — the button that's almost the right colour, the spacing that's almost consistent, the copy that almost says what it means.

What score should I aim for before a fundraise?+

85% or above, with no critical (🔴) items outstanding. Investors aren't doing a systematic design audit — they're forming a gestalt impression. A product with 0–5% of checks failing reads as polished and intentional. A product with 15% failing looks slightly rough in ways that are hard to articulate but easy to feel.