Integrations
Page Redesign.
A rewrite of how Security Managers add new tools to Permiso, starting in the documentation that was tripping them up, then extending into the integrations UI itself: clearer setup instructions, a cleaner module layout, and smart filtering so customers can actually find what they're looking for.
Role
Lead Product Designer
Format
Onboarding + integrations UI redesign
Surface
Web app · enterprise SaaS
Persona
Security Manager
Collaboration
Frontend Eng · Customer Success
Signals
CS tickets · LogRocket sessions
Customers kept getting stuck in the same place.
Our customer success team was fielding repeated questions about integration setup, and LogRocket session data confirmed that users were getting stuck in the same parts of the onboarding flow.
The data wasn't ambiguous: customers were dropping off at the documentation step, retyping the same identifiers across screens, and abandoning the flow before the integration ever connected.
Setup was the moment a customer committed to Permiso. If that moment failed, everything downstream failed with it.
The platform, and the person doing the setup.
Permiso Platform
Permiso secures the modern identity attack surface across cloud, SaaS, and on-prem environments. The platform is only useful once it's wired into a customer's tooling. Every integration is a new source of identity signal feeding the rest of the product.
Security Manager
Security Managers sit above the SOC Analysts on the customer side and hold the clearance to add new integrations. They're typically setting Permiso up for their team, connecting AWS, Okta, Google Workspace, and similar tools, then handing the day-to-day work off. Setup is one of the few moments they're inside the product themselves.
From repeated tickets to a clearer module.
Listen
Pulled themes from CS tickets & LogRocket sessions.
Audit docs
Walked every integration's setup instructions end-to-end.
Rewrite copy
Reworked instructional copy with frontend engineering.
Redesign layout
Restructured the integration module UI for scan-ability.
Add smart filtering
Let customers find tools by category, status, and search.
The mocks below show the progression of the integrations module UI. The detailed onboarding instructions per integration aren't shown here. Those live behind customer-specific connection flows, but the documentation rewrite drove every layout decision on the surrounding shell.
The instructions were there. They just weren't readable.
-
The same handful of integrations generated the bulk of CS tickets. Setup language was inconsistent across them.
-
Steps weren't visually distinct: numbered list items and supporting commentary ran together as a single block of prose.
-
Customers were retyping identifiers they'd already entered upstream because the docs never referenced what they'd just done.
-
Code samples and UI references shared the same weight as body copy, so the eye had nowhere to land.
Per-integration onboarding instructions are omitted from this public case study. They live behind customer-specific connection flows. The mocks that follow show the surrounding integrations module UI, which the documentation rewrite reshaped from the outside in.
The module, two passes in.
The integrations page started as an unsorted grid of every available tool. Customers couldn't tell which were connected, which were available, or where to start. Each pass below tightens that read.
-
No clear status distinguished connected, available, or coming-soon integrations.
-
No grouping or hierarchy. A long flat grid forced visual scanning of every tile.
-
The integration description was hidden in a hover state, so users had to mouse over each card to read what a tool actually did.
-
The setup entry point sat inside the tile, with no preview of what setup actually involved.
The original integrations module: flat grid, no status, no grouping, no filtering.
The first pass introduced category grouping (Identity, Cloud, SaaS), designation tags on each card (Posture, Threat Detection), a search function, and clearer tile hierarchy.
The second pass moved the integration description out of the hover state and onto the card itself, so users can read what each tool does at a glance. It also refined the card with a more distinct Beta tag, a count of connected integrations, and multi-select category filtering.
Setup isn't separate from the product, it is the product.
Thank you for your time.
rachelsobrepena@pm.me