By Mehdi HassanSettings pages get designed last and visited rarely, so they're often where a SaaS product looks least finished. But they're also where users make high-stakes decisions: who gets access, what they pay, what gets deleted. A confusing settings area causes support tickets, accidental changes and churn at billing time. This guide treats settings as a product surface with its own patterns. It's part of our guide to SaaS product design.
How should you structure a SaaS settings page design?
Structure SaaS settings in three top-level areas: personal settings that affect only the signed-in user, workspace settings that affect everyone in the team, and billing. Inside each area, use a left-hand list of sections so users can scan and jump, and keep each section to one task.
Area | Typical sections | Who sees it |
|---|---|---|
Personal | Profile, notifications, appearance, security, connected accounts | Every user |
Workspace | General, members and roles, integrations, data and import, API | Admins, some read-only for members |
Billing | Plan, usage, payment method, invoices | Owners and billing admins |
Danger zone | Transfer ownership, delete workspace | Owners only |
Label the areas clearly in the navigation, for example "Your account" and "Acme workspace", so users always know whether a change affects only them or the whole team. Where settings live relative to the rest of the app is covered in SaaS information architecture.
How do you group options in account settings UX?
Group options in account settings by the task a user arrives with, such as "change my email", "stop these notifications" or "connect Slack", rather than by how the backend stores them. Each section should be short enough to scan without scrolling far.
- One task per section. Notifications get their own page; they don't share one with profile details.
- Most common first. Put the options people change most at the top of each section.
- Explain every option. A label plus one sentence on what changes, as covered in UX writing for SaaS.
- Show the current state. Display the current value, plan or connection status before the control.
- Add search when settings grow. Once there are many sections, a settings search saves users from guessing.
Notifications deserve a special mention because they often become a grid of channels and events. Group events by area, offer sensible defaults, and include a single "Pause all" control so users don't turn off email entirely out of frustration.
Should SaaS settings autosave or use a Save button?
SaaS settings should autosave for independent controls such as toggles, radio choices and single selects, and use an explicit Save button for forms where several fields change together, such as a profile or billing address. The rule that matters most is consistency: one model per page, clearly signalled.
Save model | Best for | Must include |
|---|---|---|
Autosave | Toggles, theme, notification choices | A visible Saved confirmation near the control |
Explicit Save | Forms with related fields, such as profile or address | Disabled Save until something changes, unsaved-changes warning |
Save with confirmation | Changes with wide effects, such as a domain or SSO | A summary of what will change and for whom |
Explicit Save forms need a guard: if the user tries to leave with unsaved changes, ask whether to discard them. Autosave needs the opposite: a quick, visible confirmation and an undo for anything with a wide effect.
How do you design dangerous actions in settings?
Design dangerous actions by separating them visually into a danger zone at the bottom of the relevant section, naming exactly what will be lost, and requiring an explicit confirmation step for anything irreversible, such as typing the workspace name. Offer a softer option, like archive or export, beside the destructive one.
Separate them
Put irreversible actions in their own block at the end, with a clear border and heading. Never place Delete next to Save.
Name the consequence
Say what will be lost and for whom: "Deletes 48 projects and all files for 12 members."
Offer an alternative
Show Export data or Archive workspace beside Delete, for users who only want a pause.
Confirm explicitly
Ask users to type the workspace name, or re-enter their password for account deletion.
Allow a grace period where possible
A scheduled deletion that can be cancelled for a short period prevents the worst mistakes.
Only owners should see these actions, which ties settings to your permission model. Our guide to roles and permissions UX covers how to hide or disable controls by role.
How should the billing settings page work?
The billing settings page should show, at a glance, the current plan, what it costs, when the next charge happens, current usage against limits and the payment method. Upgrades, downgrades and cancellation should all be reachable from here, without a hunt.
Keep the plan names, limits and wording identical to your public pricing page, so users aren't surprised. Our guide to SaaS pricing page design covers that side. Make cancellation honest and findable: a dark-pattern cancel flow may delay churn for a month, but it creates angry reviews and chargebacks. If you want to keep customers, offer a pause or a downgrade before the cancel step.
What a clear billing summary includes
A clear billing summary fits in one card: the plan name and price, the billing period, the date and amount of the next charge, seats used against seats paid, usage against any limits with a simple meter, the card on file with its expiry, and links to change plan, update payment and download invoices. Anything that needs action, such as a failing card or a limit about to be reached, appears at the top of the card in plain words, with the fix one click away.
Which other settings need special care?
Integrations, appearance and data settings need special care because they connect to things outside the page: third-party accounts, the whole interface and the user's own records. Each benefits from showing status and consequences clearly.
- Integrations: show connected or disconnected status, the account connected, when it last synced and a reconnect button. A directory of available integrations can follow the patterns in SaaS integrations page design.
- Appearance: offer light, dark and system options, and preview the choice instantly. Our guide to dark mode for SaaS apps covers how to build it properly.
- Data and import: show import history and errors, and make export available to admins at any time.
- Security: show active sessions, two-factor status and recent sign-ins in plain language.
Settings are also where inconsistency piles up fastest, because each team adds its own page. A shared section template, with the same heading, description, control and save pattern, keeps them coherent. That's the consistency principle from B2B SaaS UX principles applied to one area. If your settings area has grown messy, it's a contained piece of work that fits well into a fixed-scope sprint, such as our $3,000 brand and design sprint.
