Designing for Efficient B2B Data Visualization

Qianwen Dong
Nov 24, 2020 · 6 min read

Five business use cases for your next analytical dashboard designs

Image for post
Image for post

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

Image for post
Image for post

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.)

Image for post
Image for post
Persona worksheet
Image for post
Image for post

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:

Benchmarking

“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.

Image for post
Image for post
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.

Image for post
Image for post
Performance trending widgets

Segmenting

“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.

Image for post
Image for post
Segmenting widgets

Focus

“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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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).

Image for post
Image for post
Multiple use case composition pattern
Image for post
Image for post
In-product drill-in pattern
Image for post
Image for post

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.

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

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
Want to work with us? Contact us at
uxcareers@salesforce.com
Check out the
Salesforce Lightning Design System

Salesforce Design

A collection of stories, case studies, and ideas from…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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