Designpixil · saas-design
The SaaS UI Design Checklist: 50 Checks Before Launch
50 checks to run on your SaaS product before launch: information hierarchy, onboarding, dashboards, empty states, mobile, and copy. Ready to use.
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.
Related reading: Why Your SaaS Looks Vibecoded (And How to Fix It) · SaaS Dashboard Design Best Practices · SaaS UI Audit for B2B Products
Our work
Work with us
Senior product design for your SaaS or AI startup.
30-minute call. We look at your product and tell you exactly what needs fixing.
Related