SaaS Integrations Page UX: Patterns and Real Examples
A practical guide to SaaS integrations UX — the patterns behind integration directories, connection flows, OAuth handoffs, and connected-account management that make a product feel like the center of a workflow, grounded in real product examples.
Almost no SaaS product is an island. The tools people actually keep are the ones that plug into the rest of their stack — pulling data from a CRM, posting to a chat app, syncing a calendar, firing a webhook when something changes. The integrations page is where that promise is kept or broken. It is the screen where a user decides whether your product will live at the center of their workflow or sit in a tab they forget to open. Yet integrations UX is one of the most under-designed surfaces in SaaS: a grid of logos, a confusing OAuth bounce, and no clear way to tell what is connected or what broke.
Clay — a real integration screen from the SaaSUI library.
This guide covers SaaS integrations UX end to end: what the integrations surface actually is, why connecting two products is harder to design than it looks, the patterns worth knowing by heart, how to tell whether your integrations experience is working, and the mistakes that quietly make a powerful feature feel fragile — each grounded in how real SaaS products solve these problems in shipped interfaces.
What is SaaS integrations UX?
SaaS integrations UX is the design of how users discover, connect, configure, and manage the other tools your product talks to. It spans several distinct screens: the integrations directory or marketplace where users browse what is available, the connection flow that authorizes access (usually an OAuth handoff to the other service), the per-integration configuration where users map fields and choose what syncs, and the connected-accounts view where they monitor, edit, and disconnect what is already wired up. Good integrations UX is not a logo wall — it is a small product inside your product that has to make joining two systems feel safe and obvious.
Directory vs connection vs management
These are three different jobs and they fail in different ways. The directory answers "what can this connect to?" and lives or dies on findability and trust signals. The connection flow answers "how do I turn this on?" and is judged on how cleanly it handles the handoff to another product and the return trip back. The management view answers "what is connected, is it healthy, and how do I change it?" — the part teams forget, and the reason integrations silently rot. The strongest products treat all three as one coherent journey rather than three disconnected screens.
Clerk — a real integration screen from the SaaSUI library.
Why integrations UX is different — and harder — to design
Designing an integrations experience carries constraints most in-app features never face. Understanding them is what separates a real integrations surface from a marketing logo grid.
You are designing across a boundary you do not control
A connection flow hands the user off to another company’s product — their consent screen, their login, their permission language — then has to receive them back gracefully. You cannot style that middle step, you cannot guarantee it succeeds, and you have to make the round trip feel like one continuous action even though half of it happens somewhere else.
Trust and permissions are the whole conversation
Connecting an integration means granting access to data — contacts, files, calendars, messages. Users hesitate here for good reason. The UI has to state plainly what scope is being requested, why it is needed, and what the product will and will not do with it. Vague permission language is where conversion on the integrations page quietly dies.
Coda — a real integration screen from the SaaSUI library.
Failure is normal, not exceptional
Tokens expire, scopes get revoked, the other service has an outage, a field mapping breaks. Unlike most features, an integration’s steady state includes failure. The experience has to surface a broken connection clearly, explain it in human terms, and offer a one-click path to reconnect — instead of silently dropping syncs until a user notices missing data weeks later.
CommandBar — a real integration screen from the SaaSUI library.
Configuration is where power and confusion both live
Beyond on/off, real integrations need mapping: which fields sync, in which direction, how often, and what happens to conflicts. That configuration is where the value is — and where users get lost. The design challenge is exposing enough control for power users without turning a simple "connect Slack" into a database-admin task for everyone else.
Confluence — a real integration screen from the SaaSUI library.
Core principles of good integrations UX
A handful of principles underpin almost every integrations experience that people actually complete. They are simple to state and easy to abandon under feature pressure.
- Make the directory findable and trustworthy: searchable, categorized, and showing each integration’s status, popularity, or "official" badge so users can judge it at a glance.
- Keep the connection flow tight: minimize steps, set expectations before the OAuth handoff, and return the user to exactly where they left off with clear confirmation that it worked.
- State permissions in plain language: name the scope, the reason, and the limits up front — turn the scariest moment of the flow into the most reassuring one.
- Design the connected state, not just the connect button: show what is linked, when it last synced, and whether it is healthy, so the integration stays visible after setup.
- Treat broken connections as a first-class state: detect expiry and revocation, explain them in human terms, and make reconnecting a single obvious action.
- Progressive configuration: ship a sensible default mapping that works immediately, and reveal advanced field-mapping and sync controls only to users who go looking for them.
Essential SaaS integrations patterns
Certain patterns recur across nearly every well-designed integrations surface because they solve problems unique to connecting separate systems. These are the building blocks worth knowing by heart.
The integrations directory
A browsable, searchable catalog of available connections, grouped by category (communication, CRM, storage, analytics) with recognizable logos, short descriptions, and status badges. Good directories make it obvious what is official, what is popular, and what the user has already connected — so the page works as both discovery and management.
The connect / OAuth handoff
The flow that authorizes access: a clear pre-handoff screen that sets expectations, the redirect to the other service’s consent screen, and a clean return with unmistakable success or failure feedback. The art is making a multi-party redirect feel like a single confident click.
Permission and scope disclosure
An explicit, human-readable summary of exactly what data the integration can read or write, ideally scoped to the minimum needed and explained by benefit. This is the trust gate; the clearer it is, the more users complete the connection.
Connected-account management
A view of every active integration with last-sync time, health status, the account it is linked to, and controls to reconfigure or disconnect. This is the screen that keeps integrations from rotting silently — and the one teams most often skip.
Field mapping and sync configuration
The controls that decide what syncs where: mapping fields between systems, choosing sync direction and frequency, and handling conflicts. Strong designs lead with a working default and tuck the full mapping table behind an "advanced" affordance.
Error, reconnect, and empty states
The states that make or break trust over time: a clear broken-connection banner with a one-click reconnect, a helpful empty directory state that suggests popular first integrations, and inline errors that explain what failed and what to do next.
How to measure integrations UX
An integrations surface is highly measurable, and the numbers tell you where the experience leaks. The metrics that matter include:
- Connection completion rate: the share of users who start a connection and finish it, the clearest signal of friction in the OAuth handoff or permission step.
- Directory-to-connect rate: how often browsing the directory turns into an actual connection, showing whether discovery and trust signals are landing.
- Time-to-first-connection: how long from intent to a working integration, especially during onboarding where integrations often drive activation.
- Connection health rate: the share of active integrations currently in a healthy (non-broken) state — a quiet measure of long-term reliability and reconnect UX.
- Reconnect rate after failure: how often users successfully restore a broken connection, telling you whether your error and reconnect states actually work.
- Integrations per active account: how many connections retained accounts keep, a strong correlate of stickiness and expansion.
Common integrations UX mistakes to avoid
- Shipping a logo wall with no search, categories, or status, so users cannot find or judge what they need.
- Dropping the user into an OAuth screen with no context, then leaving them stranded with no clear return or confirmation.
- Hiding or vague permission language that makes users abandon at the exact moment they were ready to connect.
- Designing only the connect button and forgetting the connected state, so users cannot tell what is linked or whether it is working.
- Letting broken connections fail silently, dropping syncs for weeks until a user notices missing data.
- Exposing full field-mapping complexity to everyone instead of leading with a working default and gating advanced controls.
- Treating disconnect as a hidden, scary action instead of a clear, reversible part of managing connected accounts.
SaaS integrations experiences worth studying
The fastest way to improve is to study how leading products solve these problems in shipped interfaces, not in mockups. Look at how mature platforms design a searchable, categorized integrations directory with clear official and popularity signals, how the best connection flows set expectations before the OAuth handoff and confirm success on the way back, how products surface a connected-accounts view with last-sync and health, and how strong field-mapping screens lead with a default and reveal complexity progressively. The patterns become obvious when you see them solved well across many real products side by side.
Frequently asked questions
What is a SaaS integrations page?
A SaaS integrations page is the surface where users discover, connect, configure, and manage the other tools a product works with. It usually combines a directory of available integrations, a connection flow that authorizes access (often via OAuth), per-integration configuration, and a connected-accounts view for monitoring and disconnecting. It is what lets a product sit at the center of a user’s workflow rather than in isolation.
What makes integrations UX good?
Good integrations UX makes a findable, trustworthy directory; a tight connection flow that sets expectations and confirms success; plain-language permission disclosure; a clear connected state with sync health; first-class handling of broken connections with one-click reconnect; and progressive configuration that ships a working default before exposing advanced mapping. Because integrations cross a boundary you do not control, clarity and trust matter more than visual flourish.
How do you design an OAuth connection flow?
Set expectations before the handoff with a short screen that names what is being connected and what access is requested, redirect to the other service’s consent screen, then return the user to exactly where they started with unmistakable success or failure feedback. Keep steps minimal, request the narrowest scope that works, and design the failure path — a clear error plus an obvious retry — as carefully as the happy path.
How do you handle a broken integration?
Detect the failure (expired token, revoked scope, upstream outage), surface it clearly with a banner or status on the connected-accounts view, explain it in human terms, and offer a single obvious reconnect action. The goal is to catch the break before the user notices missing data, and to make restoring the connection a one-click task rather than a support ticket.
Explore real SaaS integrations UX in the SaaSUI library
Every principle and pattern above shows up in live products. Browse hand-picked integration and connection screens from real SaaS applications in the SaaSUI.Design library to see how leading teams design the surface that connects their product to the rest of a user’s stack.
Interested in sponsoring SaaSUI.Design? Learn about sponsorship options →