screenroveIntegrations page design: 83 app directories and connect flows
Integrations page design across 83 screens from 48 SaaS products: directory counts that don't add up, trust badges, flat grids, plan locks and connect steps.
Integrations page design has one number every team wants to show off, and in our captures it was the least reliable thing on the page. Across 83 screens from 48 SaaS products, the catalogue size disagreed with itself three times: Zapier says "9,000+" in its editor and "10,000+" in onboarding, Lovable's category counts add up to 162 against "All 153", and ToolJet's add up to 92 against "All data sources (98)".
Meanwhile the screens people actually use show very few integrations. The median directory screen we captured had 9 integrations in view; the median connect screen had 3. This study breaks the integration pages wall into its four views, then looks at counts, trust badges, flat grids and plan locks.
Four views, four different jobs
A vision model tagged each screen with one view: a directory (browse the catalogue), an integration detail page, a connect or authorise step, or the settings page for things already connected. One screen had no attributes recorded, so the shares below use 82.
| View | Screens | With search | With categories | With a featured row | Median integrations visible |
|---|---|---|---|---|---|
| Directory | 31 | 22 | 18 | 15 | 9 |
| Connect / authorise | 33 | 9 | 0 | 4 | 3 |
| Connected settings | 13 | 5 | 2 | 1 | 1 |
| Integration detail | 5 | 0 | 0 | 0 | 1 |
Two things stand out. Connect screens outnumber directories, because most products meet the user mid-flow ("connect your calendar", "connect your code") rather than sending them to a catalogue. And detail pages are rare: five screens from three products (Cal.com, Raycast and Vercel). Most products go straight from a tile to an OAuth prompt.
Integrations page design starts with the directory
Of the 31 directories, 22 had search, 18 had category navigation and 16 had both. Featured or "Popular" rows appeared on 15, about half. The seven with neither search nor categories were all short: none showed more than 18 integrations. Examples include Tally's 12 borderless entries, tldraw's 18 embed rows and a Cal.com category page of 9 cards.
That is the useful rule hiding in the data: 21 of the 30 directories with a countable grid showed 12 or fewer integrations on the first screen, and the largest, Zapier's action picker, showed 27. Whatever the catalogue size, the first screen is a shortlist. The design decision is which 9 to 12 you pick and how the rest are reached: by search, by category or both.
Counted categories are the clearest wayfinding we saw. Lovable lists "Productivity 67" next to "Security 2", so you know before clicking whether a category is worth opening. ToolJet does the same in its left rail, and Cal.com puts counts on photo tiles ("Conferencing 24 apps", "Automation 21 apps") above "Most popular" and "Recently added" carousels.
Catalogue counts that disagree with themselves
Counts help until they stop adding up. On the Lovable screen the nine category counts total 162 against "All 153", presumably because some connectors sit in more than one category. ToolJet's rail reads "ALL DATA SOURCES (98)" above Databases 25, APIs 51, Cloud Storages 4 and AI 12, which total 92, and Databricks appears both under "Commonly used" and under "Databases". Neither is wrong, exactly, but a reader who adds them up gets a different answer from the one printed.
Zapier's mismatch is across two screens of the same product. The editor picker says "Search 9,000+ apps and tools…" while the onboarding app step says "Search 10,000+ apps". Round numbers drift as catalogues grow, and nobody owns updating every placeholder.
PostHog is the opposite case: the maths holds ("Choose from 912 sources", 12 tiles, "Show 900 more sources"), but the screen shows 1.3% of what it advertises. The number is there to reassure, not to navigate. The more useful element is the one above the search box: a single npx -y @posthog/wizard@latest warehouse command that detects databases in your project. Fillout avoids the problem by saying "dozens of 3rd party apps" and leaving it there.
Trust badges only work when they vary
Several directories label who built an integration. The signal depends on whether the label changes.
Grafana Cloud's plugin cards are the best example. The nine visible cards carry 8 green "Signed" badges, 6 "Installed" and one blue "Enterprise", and the author line reads "By Grafana Labs", "By Grafana", "By 3CX" or "By Andrew Rodgers". You can scan the grid and tell first-party from community, installed from not.
Compare Linear's public directory, where all six Essentials cards say "By Linear" with a verified tick, Deepnote, where every visible tile carries a shield and "Built-in", and Perplexity, which puts a verified tick on every connector card. A badge on every card reads as styling. It only becomes information further down the page, if partner-built entries appear without it.
Detail pages are where provenance gets spelled out. Cal.com shows "Published by Cal.com" and a footnote that it "does not endorse or certify these apps unless they are published by Cal.com". Vercel's marketplace lists Linear as Type "Third Party" with "1,000+" installs, while Raycast's Linear extension shows "393,710 Installs". Same integration, three stores, three ways of saying how much to trust it.
Flat grids are fine for small catalogues
Not every catalogue needs a store. Canny's Autopilot setup is 23 equal outlined buttons, Slack to Shopify, with no search, no categories and no featured row. Underneath: "Don't see an integration? Tell us what you need". Fillout puts 12 square "Popular apps" tiles in a six-column grid before "More integrations". Under roughly two dozen items, a flat grid with a request link does the job that search and categories do for larger catalogues.
Larger catalogues shelve instead. Perplexity uses Popular, New and Creative carousels with "View all", plus Discover, All, Connected and Available filter pills. Zapier splits its picker into "Your top apps", "Popular built-in tools" and "Zapier products".
Plan locks belong in the catalogue, not behind it
Three products kept locked integrations visible rather than hiding them. Neon shows Datadog and OpenTelemetry as normal cards whose button reads "Upgrade plan to add", directly under featured GitHub and Vercel cards that say "Add". Netlify gates Slack workspace installation with a lock ribbon, "This feature is available on Pro and Enterprise plans" and "Upgrade to unlock". Descript's export menu greys 4 of its 8 podcast hosts (Buzzsprout, Captivate, Castos, Transistor) and adds an info icon to each. In each case the user learns the integration exists and what it would take to use it.
Connect screens are short and sell first
The median connect screen offered 3 options, and 6 of 32 offered exactly one. The strongest ones explain the benefit before asking for authorisation.
Linear lists "Code reviews", "Automate issues" and "Code context for Linear AI" above "Authenticate with GitHub". Sentry pairs "How we use repository access" ticks with a "We will never:" list that includes "Train AI on your code", plus "Revoke access any time in settings" under the Git buttons. Both leave a plain way out: "Skip" and "Continue without a repo".
How we counted
We captured these screens in desktop browsers with research accounts between September and October 2026. A vision model recorded each screen's view, whether it had search, categories or a featured row, and how many integrations were visible; those attributes are checkable on each screen's page. Visible counts depend on viewport and scroll position, and a product can appear more than once. We report what we saw on screen, not A/B results, so none of this says which pattern converts better.
What to steal
- Design the first screen as a shortlist. Nine to twelve integrations, chosen deliberately, then search and categories for the rest.
- Count your categories, and make the counts add up. If items sit in several categories, say so, or drop the "All" total.
- Put the catalogue size in one place. One source of truth for "9,000+" beats three placeholders that drift.
- Make badges discriminate. Signed, installed, first-party and plan-gated should look different from each other, as on Grafana.
- Show locked integrations with the unlock path on the button. Neon's "Upgrade plan to add" is a good default.
- Sell before you authorise. Three benefit rows and a clear skip, as Linear and Sentry do, ahead of the OAuth prompt.
- Under about 25 integrations, skip the store. A flat grid plus a "tell us what you need" link is enough.
Browse every screen on the integration pages wall, filter to screens with a featured row, or open product collections like Zapier, Grafana Cloud and Lovable. Building one now? Connect the Screenrove MCP server and ask your agent for integration directories with counted categories, or connect steps from developer tools.