Salesforce Design
Published in

Salesforce Design

Abstracted, colorful image of a dashboard.

Designing for Efficient B2B Data Visualization

Five business use cases for your next analytical dashboard designs

Imagine a sales manager about to walk into the weekly team meeting, with only 20 seconds to spare. What’s the best way to get a read on the team’s sales performance?

For the Salesforce Analytics UX team, which builds out-of-the-box analytical dashboards for industries including financial services, healthcare, and B2B marketing, such scenarios are more than thought experiments. Designing data visualization is all about representing data in ways that help users avoid risk and make good business decisions, whether they have 20 seconds or two hours to review the numbers.

Our mission is to transform even highly complex data into insights that help solve business problems for a wide range of industries and users. And to do that, we need scalable, flexible patterns that are both actionable (driving insight) and efficient (enabling immediate action).

We’ve summarized three best practices that support these goals:

1. Understand the user’s information needs
2. Design with fundamental use cases
3. Scale design best practices

Team leaderboard dashboards in current analytics apps. Similar use cases require a unified pattern to bridge the gap between style guide and use case gallery for dashboard designers.

Team leaderboard dashboards in current analytics apps. Similar use cases require a unified pattern to bridge the gap between style guide and use case gallery for dashboard designers.

1. Understand the user’s information needs

Empathy is the bedrock of good design. To understand user needs, we start by developing personas and gathering information needs through brainstorming questions to be answered, then proceed to ideation exercises and user testing. (For a detailed look at our process, see Transforming Data to Insights.)

Persona worksheet

2. Design with fundamental use cases

To align analytical needs with designs, we categorized five functional patterns that are applied with best practices and commonly used in our analytics apps. With the chart designs, we followed SLDS Charts design guidelines to develop five main functional dashboard patterns — benchmarking, performance trending, segmenting, focus, and status distribution. Think of these as quick structures for creating visual communications:


“How is my team doing with closing deals?”
“Which clients need my attention right now? Who do I need to follow up with?”
“Show me my top and bottom accounts by revenue.”

Benchmarking compares performance across entities using consistent measures. For example, a leaderboard could help sales managers identify top and bottom performers, and account managers to identify most successful accounts and opportunities.

Screenshot of a benchmarking widget
Benchmarking widget

Performance trending

“Show me my progress towards quota for this sales cycle.”
“Which time slot has the most appointments?”
“How has my campaign performed over the last 24 hours?”

Many use cases require monitoring performance over time, measuring performance against goals, and identifying weakness and growth opportunities. A financial advisor, for example, might track clients’ progress toward investment goals, while a marketing specialist could track ad campaign performance.

Performance trending widgets
Performance trending widgets


“Show me a list of customers to target with this marketing campaign, based on these six criteria.”
“Which industries contributed most to revenue in the last 90 days?”
“Which accounts do I need to follow up with?”

Segmenting lets users explore correlations or group data based on selected characteristics. A branch manager might use segmenting to flag at-risk clients, while a sales manager could assess team performance and identify individual salespeople who need coaching.

Segmenting widgets
Segmenting widgets


“Which loan applications need my attention?”
“What products can I upsell to this account?”
“Which leads should I prioritize?”

Focus pattern can help users identify targets for further action. A sales operations manager or regional manager might use these features to prioritize leads prioritization, identify top referrers, or analyze product and region whitespace.

Focus widgets

Status distribution

“Show me the status of my open pipeline.”
“How many deals were moved out of the current sales cycle?”

Status distribution can help users visualize opportunity stages, pipeline changes, status distribution, or backlog movement. A sales team leader might look at status distribution to understand pipeline health, or a service agent manager to allocate agents based on case volumes.

Status distribution charts
Status distribution

Building dashboards with interactive patterns

Starting with these five use case cards, the team created interactive layout patterns for better data storytelling. Each could be used as a dashboard home page, or a hero visualization section in a larger dashboard.

KPI drill-in pattern
This pattern foregrounds clickable graphics such as bar and donut charts. It uses one chart to drive a KPI panel; clicking on it reveals detailed metrics.

Gif with KPI drill-in pattern
KPI drill-in pattern

Explanation pattern
This pattern uses KPI panels to drive the dashboard, with data visualizations to provide context for the metrics. Performance Trending and Segmenting are common supporting visualizations.

GIF with explanation Pattern
Explanation Pattern

Multiple use case composition
Here one use case pattern drives another. A user might click on a region (Focus) to see top branches (Benchmarking), select a top account (Benchmarking) to see product whitespace (Focus), or highlight a client segment (Segmenting) to see trending wallet share (Performance Trending).

GIF with Multiple use case composition pattern
Multiple use case composition pattern
GIF with In-product drill-in pattern
In-product drill-in pattern

3. Scale design best practices

Once we’d established the design patterns, it was time to align. Through interactions with customers and internal design teams, the team discovered needs around alignment of style guides and dashboard layouts, and making components reusable.

In this stage, we built a live ready-to-use library with Analytics Dashboard Builder, which is interactive and populated by sample data. The library serves as a common set of reusable styles and layouts that help design teams work more efficiently. It also serves as inspiration for customers to build dashboards with consistent visual and interaction design, and provides a familiar user experience that promotes faster insights and decision making.

Graphic with Analytics App Design Toolkit details, with design best practices for reusable and ready-to-use dashboard elements
Analytics App Design Toolkit, with design best practices for reusable and ready-to-use dashboard elements

Recommendations and next steps

Keep purpose in mind
Think of these use cases and patterns as a starting place for compelling dashboard experiences. For every project, you also need to understand users and develop personas. Don’t move on to metrics until you’ve identified a clear purpose and critical business questions for each dashboard.

Communicate with stakeholders
These use cases can help you communicate design concepts to product and engineering partners. Focusing on what users can do after consuming the data supports the conversation around building meaningful data visualization products.

Build your library
Starting with the use cases and patterns here, build your own data visualization gallery. To support scalability and consistency, make it available to not only design teams, but also engineering partners, and even customers looking to design their own dashboards.

We hope this piece will inspire you to design more meaningful data-driven experiences. We’ll continue to collect feedback, iterate on existing patterns, and create new patterns for new use cases.

Special thanks to Edouard Picot for guidance on this article, my colleagues Elena Migunova and Michelle Veneracion for contributing to this article and sharing their perspectives, Analytics UX team and Lisa Gluskin Stonestreet for the feedback, and Jason Winters for creating space for projects like this.

Follow us at @SalesforceUX
Learn more about Salesforce Design at
Check out the
Salesforce Lightning Design System




The Salesforce Design blog covers the tools, practices, and mindsets that help build strong employee, customer, and community relationships in the Salesforce ecosystem and beyond.

Recommended from Medium

Home sweet home


Brainstorming and Ideation Project 1

Redesigning Appfolio’s Move In Flow

DesignUp ‘19 Masterclass

How we wear clothes with sequins during the day

Recycling Pin: Redesigning Pinterest’s New Features

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Qianwen Dong

Qianwen Dong

Senior Product Designer at DoorDash

More from Medium

The Art of Surveys: Analyzing Data to Improve the Docs Experience

Increase your conversions with journey architecture

On a webpage that caters to research stage content, add a call to action that links to evaluation stage content, such as “See how this service can help.”

6 Tips for a new Product Designer

Transforming Satellite Data