Background

Calixa was an early stage product-led growth (PLG) platform helping modern sales teams integrate customer data and find high-value sales opportunities.

In Calixa, sales teams navigate tables of customer data much like they would in a CRM. Clicking on a row opens a “details panel” (a sidebar designed for quick context without needing to leave the primary view).

Originally lightweight, this panel had become bloated. Over time, other features were stitched onto it without a cohesive layout strategy. The result was multiple scrollable sections, poor usability, and customer feedback said it “looked broken.” Worse, our highest-value users relied heavily on this panel. They would customize layouts, compare people/companies, and trigger actions that correlated with strong long-term engagement.

It was time to fix it.

Discover

I kicked off with a full UI audit to understand what we were asking customers to navigate. Then I traced a typical workflow navigating the panels comparing people/companies. I quickly saw how often the panel failed to meet its quick-view promise.

Key insights:

• I researched how other B2B SaaS tools handled similar information architectures.

• Analyzed behavioral data that showed a clear trend: customers who took actions from within the details panel became power users.

• Interviewed four customers who had experience with Calixa and other PLG sales tools.

Customer interviews surfaced key themes:

• Users often clicked into a panel, then got “lost” trying to find their way back after inspecting another item.

• Full details pages were largely ignored — users preferred to load everything they needed directly in the sidebar.

• Quick links to external tools (like their CRM or email platform) were highly valued.

• Panels were used for comparison — often opened and closed in rapid succession.

• The timeline component (showing product usage) was crucial, but often displayed messy, unformatted data.

Together, this shaped our belief: the panel needed to act less like a sidebar and more like a narrative — telling a clear, visual story of a customer or company.

Define

With the insights in hand, I facilitated a working session with our PM and frontend engineer to align on goals and constraints.

We defined our objectives:

• Tell a story: Use the panel to quickly answer who the customer is, where they are in their journey, and what’s happened recently.

• Prioritize Action buttons: Customers’ who click these become power users.

• Make scanning effortless: Utilize visual anchors so customers can make fast comparisons from panel to panel.

• Allow backtracking: Users should easily return to a previously opened panel.

• Introduce a collapse/expand: Customers often need more screen space for user tables with multiple columns of customer data.

Design

I explored layout alternatives with wireframes. These new directions prioritized clarity and flexibility:

• Eliminated unnecessary container boxes.

• Aligned key fields for consistent eye-tracking as users flipped through panels.

• Adjusted the layout to accommodate data values’ longer line lengths.

• Made the Action buttons (e.g. Create Task, Add to Cadence) visually prominent and easy to use.

I shifted the panel to slide in from the right instead of the left. I removed the dark overlay on the page beneath the panel. This allowed users to click through tables row by row while keeping the panel in their periphery — ideal for quick comparison workflows.

I designed more adequate panel navigation that focused on a few things:

• After opening a second panel, a ‘back’ button would appear without shifting the layout in a jarring way.

• Panel layout can easily be switched to other variations of customer data fields (layouts can be personal or shared).

• Clearly depict the entity type (i.e. is this a person/account/company).

Thanks to our Figma component library, I was able to prototype quickly using pre-built components. The design stayed visually lightweight while improving hierarchy and clarity.

Deliver

I organized the final designs left-to-right in a linear flow to show how the experience unfolded. Instead of prototyping in Figma, we moved directly to code in staging.

To support handoff, I recorded a short video flyover of the design file, walking the team through each state and interaction. I also met directly with our frontend engineer to address questions and provide clarity.

Once development began, I QA’d the experience in staging — screenshotting inconsistencies, flagging any blockers, and submitting detailed tickets that called out both required fixes and polish opportunities.

Impact

Early customer feedback was overwhelmingly positive:

• “Much easier to use”

• “Looks way better”

• “This is what I needed”

The wider layout and structured content made the panels far more usable. Usage metrics confirmed the improvement: new customers who began interacting with the redesigned panels consistently ramped up their activity over time.

We learned that Action button usage on our details panels is a key indicator of downstream engagement, and the new designs made that easier and more prominent.

This project made the details panel not just more usable, but much more valuable. It became our customers’ primary tool for understanding their users/accounts.

Our thinking moving forward:

• Improve timeline formatting to surface product usage more clearly.

• Offer panel layout suggestions based on data types or usage patterns.

• Introduce keyboard shortcuts to step through table rows even faster.