CRM App UI Design: Pipedrive, Attio & HubSpot (2026)
How Pipedrive, Attio, and HubSpot tackle crm app UI design — data density, pipeline views, record pages, and onboarding — with 9 patterns you can apply.
Why CRM App UI Design Is One of the Hardest Problems in SaaS
Good crm app UI design is hard because teams live in these products four to eight hours a day. Sales reps, account managers, and ops leads cycle through pipeline views, contact records, activity logs, and reports in tight loops. Every wasted click, every over-crowded record page, every missing keyboard shortcut compounds across thousands of interactions a week.
What makes it genuinely hard is that the underlying data model is complex — contacts, companies, deals, activities, pipelines, properties, sequences — and that complexity has to live somewhere. The design question is never "can we show everything?" (you can't). It's "what do we surface, in what order, at what level of detail, for which user in which context?"
In 2026, the CRM design conversation has split into three distinct camps. Pipedrive is pipeline-first and activity-driven — it builds everything around the sales pipeline and nudges you toward your next action. Attio is data-model-first, more like Notion or Airtable for CRM data — flexible schema, powerful table views, relationships as first-class UI. HubSpot is platform-first, an all-in-one suite that has to knit together CRM, marketing, service, and operations under a single nav roof.
Each camp makes hard trade-offs. Each one teaches something you can apply to any data-heavy B2B product.
What Makes CRM UI Uniquely Hard
Before going app-by-app, it's worth naming the core tensions that every CRM design team fights:
Data density vs. scannability. A deal record might have 40 fields — stage, owner, close date, deal value, source, custom properties, related contacts, associated company, last activity, next activity. Showing all of them is overwhelming. Hiding them means users miss things. The answer is always layered disclosure, but the exact layers are where taste and product decisions diverge.
The pipeline (kanban) metaphor and its limits. Kanban boards for sales pipelines are near-universal now, and for good reason — they make stage distribution and deal volume scannable at a glance. But they break down at scale. When you have 80 deals across 6 stages, the kanban becomes unnavigable. Most CRMs solve this with list view + filters as an escape hatch, but the transition between views often feels like leaving the product.
Record pages: how much to show before it's a wall. The 360° contact or deal record is the most contested screen in CRM design. Too sparse and you lose context. Too dense and users stop reading and start scrolling past everything. The best solutions combine a strong information hierarchy with aggressive progressive disclosure — show the summary, reveal the detail on demand.
Customization vs. opinionation. Every company's sales process is different. CRMs are under constant pressure to be infinitely configurable. But infinite configurability produces infinite blank canvases and decision fatigue. The best CRM UIs offer flexible schema inside opinionated structure — you can add any field, but the default layout still makes sense out of the box.
Pipedrive — Pipeline-First, Activity-Driven
Pipedrive's core design philosophy is legible in every screen: the pipeline is the center of gravity, and every element is in service of moving deals forward.
The kanban pipeline view. Pipedrive's pipeline kanban gets several things right: deal cards are dense without feeling cramped — they surface deal name, value, and expected close date with a subtle color indicator for overdue next activities. Column headers show aggregate deal value and count, so you can assess stage health without counting cards. Drag-to-stage feedback is snappy, with a clear drop target highlight. The key design decision is restraint: the card doesn't try to show every field. It shows the three things a sales rep needs to triage — what is it, how big is it, what's the status signal.
The deal record page. Open a deal and the layout splits into a primary activity timeline and a properties sidebar. This is a meaningful design call: it says "a deal is fundamentally a sequence of things that happened and things that need to happen," not just a database row. The next-activity nudge — a persistent prompt showing your next scheduled call, or a warning that no next activity is scheduled — is a great example of leading with action rather than data. The sidebar keeps field-level detail available without competing visually with the timeline.
Inline quick-add vs. full forms. Pipedrive's inline add interactions (adding a deal directly from a pipeline column, logging a call without leaving the record) reduce friction compared to bouncing users to a separate full-form page. This pattern — capture the minimum viable data inline, let users fill details later — is one of the most transferable principles for any B2B data entry flow.
Sales dashboard and reporting. Pipedrive's reports section is a well-executed example of a b2b saas dashboard design that doesn't try to be a BI tool. It focuses on the metrics a sales manager actually needs: revenue forecast, deals won/lost, activities completed, and deals progress by rep. The charts are clear, the filters are surfaced, and the layout doesn't try to pack everything into one view.
Takeaway: Show deal-level status signals (overdue activity color) on kanban cards without adding fields. Lead record pages with a chronological activity timeline rather than a wall of properties. Use persistent next-action nudges to bridge the gap between "what just happened" and "what to do next."
Attio — Data-Model-First, Modern and Flexible
Attio is designing for a different user: someone who thinks in databases, wants to define their own objects and relationships, and finds traditional CRMs too rigid. The reference points are Notion and Airtable, not Salesforce and Pipedrive.
Table view: dense data done cleanly. Attio's default list view is a spreadsheet-style table. Column types are clearly typed — text, number, date, select, relation, formula — and each type has a distinct visual treatment that aids scannability. Inline editing works the way you'd expect: click a cell, type, confirm. No modal. No page navigation. This is the right call for high-volume data entry. Sort controls live in column headers; filters are handled by a top-level filter bar — keeping the interaction model close to the data rather than tucked behind a settings drawer.
Record pages as connected objects. In Attio, a contact record isn't just a bag of fields. It surfaces its relationships — the company it belongs to, the deals it's associated with, the list memberships it has — as interactive UI elements, not just linked IDs. You can see and navigate the object graph from within any record. This is "relationships as first-class UI," and it's increasingly the right model for any product where entities have meaningful connections to each other. A user doesn't want to switch tabs to see what company a contact works at. They want to see it in context, clickable, with enough preview to decide whether to navigate there.
Saved views as the navigation model. Attio's left sidebar is organized around saved views — filtered, sorted, grouped cuts of your data that persist across sessions. This is a smarter navigation model than deep folder trees or tabs for a tool with a flexible schema. A view is essentially a bookmark for a specific lens on your data. Power users build views for their workflows ("Deals closing this month," "Leads not contacted in 30 days," "Churned customers in APAC") and then navigate their CRM through those views rather than through a generic record browser. The pattern generalizes: for any complex data tool, saved views beat hierarchical folders for everyday navigation.
Onboarding for a flexible-schema tool. Flexible schema tools face a brutal onboarding problem: the blank canvas. If your product can do anything, new users often do nothing because they don't know where to start. Attio's approach is to ship opinionated templates (a contacts model, a companies model, a deals model) that look complete out of the box, with just enough configuration hooks visible to signal that customization is possible without overwhelming a new user with options. The onboarding flow threads the needle between "this is ready to use immediately" and "you can make it yours."
Takeaway: Type-aware columns (distinct visual treatment per data type) make dense tables scannable at a glance. Surface relationships as interactive, navigable elements inside record pages — not just linked text. Solve the blank-canvas onboarding problem with pre-built templates that signal flexibility without requiring it upfront.
HubSpot — Platform-First, All-in-One
HubSpot has a design problem no other CRM faces at the same scale: it's not really a CRM. It's a CRM plus email marketing plus a website builder plus customer service plus operations tools plus a content hub. All of that has to coexist under one navigation roof without making the product feel like five different apps bolted together.
Global navigation for a multi-product suite. HubSpot's current nav shows the hard choices you make when a platform spans a dozen product areas. The top-level nav is organized by job-to-be-done (Marketing, Sales, Service, Operations, Commerce) rather than by feature — the right call, because it maps to how teams self-identify rather than how the product is built. Within each area, a secondary nav surfaces the key views. The challenge is that cross-product flows (a contact moving from marketing lead to sales opportunity to service ticket) require navigation across these boundaries, and those transitions aren't always seamless.
The 360° contact record. HubSpot's contact record is the most feature-complete in this comparison and, predictably, the most visually dense. It surfaces contact properties, deal associations, ticket associations, email history, call logs, meeting records, form submissions, page views, and more in a tabbed layout with a persistent properties panel on the right. The design challenge is that all of this is legitimately useful to someone — just not all at once. HubSpot's solution is tabs (Activity, Emails, Calls, Meetings, Notes, Tasks) that break the timeline into job-specific lenses. It's a reasonable approach, though it does mean the full picture of a contact relationship requires tab-hopping.
Empty states and onboarding checklists. HubSpot handles first-run experience well at platform scale. New accounts see a persistent onboarding checklist covering key setup steps (connect email, import contacts, set up a pipeline, install the tracking code) with progress indicators and contextual help. Individual feature areas show empty states that explain what the feature does, preview the populated state, and give a clear first call to action. The empty state is not a dead end — it's a tutorial in disguise.
Takeaway: In multi-product platforms, organize global nav by job-to-be-done rather than by feature. Use tabbed timelines (by activity type) to manage contact record density without hiding information. Treat empty states as entry points: explain the value, preview the populated state, give one clear first action.
Side-by-Side Comparison
| Pipedrive | Attio | HubSpot | |
|---|---|---|---|
| Core metaphor | Pipeline as workflow | Database of connected objects | Unified platform hub |
| Primary view | Kanban pipeline | Typed table / list | Contact / deal record |
| Customization | Configurable fields, stages | Fully flexible schema, custom objects | Highly configurable, property groups |
| Best for | Focused sales teams, pipeline management | Teams who want database-level flexibility | Companies needing CRM + marketing + service |
| Density handling | Status signals on cards, timeline on records | Type-aware columns, inline edit, saved views | Tabbed record sections, onboarding checklists |
5 CRM App UI Design Principles for B2B Tools
These patterns generalize beyond CRM to any product where users manage complex, high-volume data daily.
1. Lead with the next action, not just data. Data tells you what happened. An action prompt tells you what to do about it. Surfacing the user's most important pending action at the top of a record or dashboard reduces the cognitive work of figuring out what comes next.
2. Make dense tables inline-editable. Every modal or page navigation to edit a single field adds friction to a high-frequency action. For data-entry-heavy products, inline table editing is close to non-negotiable for power users.
3. Saved views beat deep folder trees. Named, persistent, shareable filter+sort+group configurations are a far better navigation primitive than folders for complex data tools. They map to how power users actually think: "show me X in state Y."
4. Surface relationships as navigable UI. When entities in your data model relate to each other (contact → company → deal → ticket), those relationships should be contextual and clickable inside each record — not just linked IDs in a field.
5. Invest in first-run experience. Onboarding checklists and purposeful empty states are what separate products that get adopted from products that get abandoned after a trial. Every empty state should explain the value, preview the populated state, and give one clear first action.
Study These CRMs on Gummble
The patterns above are easier to internalize when you can see them in real screenshots, across the actual flows. Gummble curates screens from Pipedrive, Attio, and HubSpot — including pipeline views, record pages, table views, onboarding flows, and dashboard screens — so you can compare them side by side without having to set up trial accounts in three different products.
If you're looking for a Mobbin alternative that focuses on web and B2B SaaS screens (not just mobile), Gummble's library is specifically curated for product designers working on data-heavy tools.
Browse Pipedrive's UI screens, Attio's UI screens, and HubSpot's UI screens to see these patterns in context.
See also: Fintech dashboard UI design examples · How to design a SaaS dashboard · Mobile dashboard design examples
Want more design inspiration? Browse 1,500+ apps on Gummble — across shipped iOS, Android, and web products.
Founder of Gummble. I build and maintain the Gummble catalog — UI screenshots and UX flows from 1,500+ real iOS, Android, and web apps — and write about the design patterns I see across them.
See these patterns in action
Browse 1,500+ apps across shipped iOS, Android, and web products.
Browse the Library →
