A dashboard’s purpose is simple: a landing page to present high level information and help the user evaluate and perform the most important tasks.

Easy to say, yet hard to practice because whittling down a product or application’s capabilities to the “core” tasks and information takes user research, workflow analysis, informed decision making, and lots of editing.

How to Make An Optimized Dashboard

With dashboard design, there are some best practices to follow. KRUTSCH believes there are four questions to answer to create a well-designed dashboard.

What are the main tasks a user needs to complete?
What information do they need to complete this task?
How does the dashboard support navigation and supplemental workflows?
How does the dashboard support role-based views?

Design iterations and testing sharpen our answers to these questions as we determine the best way to manifest these decisions through our dashboard screens. As we iterate, we reach for interaction patterns, color, and visual design principles, proven tools to influence comprehension, efficiency, and effectiveness. But during all of this, we must use these questions to guide our decisions.

1. What Are The Main Tasks a User Needs To Complete? What Information Do They Need To Complete This Task? 2. What Information Do They Need To Complete This Task?

Whether starting from scratch or improving an existing product, begin your dashboard evaluation with a proper UX design process. Talk with your users, whether they're internal or external. Determine the main success scenario for your application and what information is needed to complete this main task. If you're working with an existing product, observe how users interact with the current design, what shortcuts they've created or which parts of the app they constantly navigate to.

This question framed our work with ParsecLabs' web app for their LightSpeed™ storage migration product. Their user's main task: track and complete data migration projects. The information needed to complete this task encompassed system alerts, hardware updates, project progress milestones and total volume of data migrated. Effective data visualization added a layer of context to the dashboard, better informing user decisions.

ParsecLabs LightSpeed™ dashboard uses alerts and visual graphs to display necessary info needed to track and manage data migrations. It centers around providing relevant information to help users identify, prioritize, and complete tasks.

A tile dashboard pattern built a modular foundation that scaled across screens and devices, and lent itself to future product additions. Key status readouts claimed the top of the screen, prime real estate designated for the integral alerts for anticipating errors and project progress. Bar graphs in the middle tracked a timeline of current migration projects in comparison to one another, constructing a high-level view of project progress in relation to today. The third row listed key milestones in a timeline, helping users anticipate upcoming tasks that would require their attention. A simple pie chart gave a pulse to their total volume of data migrated.

The tiles paired sufficient high-level information for decision making with relevant action buttons that dive deeper into data and related tasks. Our final dashboard displayed the data migration, alerts, and milestone information needed to complete the main success scenario: track and complete data migrations.

3. How Does The Dashboard Support Navigation and Supplemental Workflows?

For ParsecLabs - add hyperlink, the cards and action buttons served as a launching pad into corresponding modules and workflows. We employed a similar practice in our work with the State of Nebraska's Early Childhood Record System (NECPRS). The record system serves childcare professionals who need to track their training hours toward program totals for the year. They also track employee certificates and apply for additional accreditation within their Step Up to Quality program, based on their approved trainings.

Similar to Parsec, we began by interviewing users and observing their behaviors and interactions with the existing record system. A pattern emerged while watching users, they relied on their dashboard to be their home base. Navigating down a level into other workflow modules and always returning to the dashboard before proceeding.

We wanted to design a dashboard that supported this natural down and back navigation pattern while reinforcing the new application’s organization and supplemental workflows. The dashboard could then serve as an education tool, using task-based navigation to expose the user to the other app sections and their relation to the side navigation pattern.

From our user observations, we identified the main tasks:

Submit a training certificate for approval, then track that approval process.
Register for trainings.
Track Step Up to Quality progress and apply for next step.

Then, we started designing. Mobile viewing was important, so we implemented a card pattern for easy scaling and adapting. Each card coincided with a main task, housing relevant data and an action button to launch the appropriate workflow. For example, an Add Training button displayed next to a table tracking the user’s recently submitted trainings and their approval statuses.

In addition to the dashboard’s task-based navigation, our design also included a side navigation bar to drill down into other app sections. These dual manners of navigating presented options to the user, presenting two ways to traverse the same information: by task or by section. Together, they reinforce the organization of the app, allowing the dashboard to serve as the main, action-based navigation and the side menu to serve as the app index for supplemental workflows.

4. How Does the Dashboard Support Role-Based Views?

Dashboards can become complex when multiple roles are involved. However, they’re also your greatest UX asset for creating relevant, role-based displays. If we consider a dashboard as a high-level landing page to help users prioritize and complete core tasks, it’s easy to see how when different roles are in play, they may have different preferences to accommodate.

While working with the nation’s number one healthcare system, we helped them redesign 30 years of legacy software into one application for clinical cancer trials and patient registration. This new application intercepted nurses, clinical technicians, pharmacists, statisticians, and more. Each needed to access the information encased in this application, but each role cared about different metrics and completed different tasks. So, we used role-based dashboards that populated different tiles with role specific metrics. This way, each role could have a relevant, prioritized view into the information that mattered to them, instructing their decision making, and reducing their time to complete a task.

User landing page for the CRC role focused on searching for studies, re-entering recent studies, evaluating recent patients, and managing IRB Approvals.

User landing page for the study builder role shares the study search bar, but includes a quick link to create a study, manage a variable library, review and manage notifications, review studies under construction, and review recent patient registrations.

Design Patterns: A Framework

As demonstrated in our examples, answering these questions is only one step one. Step two is equally important: assemble the right visual language to reinforce your design decisions and aid the user in task completion. You may have also noticed that we often lean on the tile pattern for dashboard visual design. We find it easily scalable, customizable, and adaptable to device and screen size. But there are a few other dashboard design patterns that are also effective when used properly.

Tile

Tiles create visual hierarchy and boundaries for its individual contents, distinguishing clear separation between related and unrelated workflows. They're easy to scale, add, subtract, and adjust to mobile or tablet. Individual tiles can use color, weight, size to create internal hierarchy on a tile-by-tile basis, or they contribute to a dashboard wide sense of visual hierarchy and attention directing.

Canvas

A canvas style dashboard is often used when depicting highly visual data representation. It’s also effective at displaying data that must be analyzed together as a whole. The pattern’s name nods to its strength—a place for greater visual control in regard to creating hierarchy and controlling visual attention.

Table

We would argue this is often a secondary dashboard, usually reviewed after evaluating information in a more edited design, like a tile dashboard. However, because it’s an efficient pattern that displays a lot of information at once, tables are often used and referenced with the same mindset as a dashboard. It leans on color and text hierarchy to display a wholistic view, draw attention, and prioritize actions.

Key Takeaways For Successful Dashboard Designs

When designing a dashboard, remember that what you don't include is just as important as what you do include. Stick to prioritizing the user's key needs. Too often, designers insert beautiful graphs that show information that isn't actually critical to the user. We've seen many dashboards that are so stuffed with information that it's hard to form a takeaway or make an evaluation. The best way to avoid these pitfalls is to design with the directives discussed above, incorporate tested visual design patterns, and then test and integrate with users until your design becomes an effective, reliable resource.

How to Design a Dashboard: 4 Key Principles