Fresh Thinking

UI/UX Principles

Web Development

Guidelines for Successful Dashboard Design

December 10, 2019

The dashboard is the hub of your user interface.

The most effective dashboards provide a snapshot of the data, metrics, and other details that are the most vital to your users.

If you can design an accessible, user-friendly dashboard, you’ll provide users with relevant information, from the big picture to granular details.

Being mindful of key principles during the planning, design and development stages of creating your dashboard will help you deliver a successful end product.

 Strategic planning involves preparing for the design and development, focusing on:

  1. Understanding & Research
  2. Key Information
  3. Data Collection
  4. Analysis & Monitoring
  5. Technology
  6. Design
  7. Interaction
  8. Security
  9. Accessibility
  10. Functionality

Design covers principles related to creating dashboards, including:

  1. Process
  2. Workflow
  3. User-Prioritization
  4. Information Architecture
  5. Data Design
  6. Layout
  7. Design Elements
  8. Functionality
  9. Interaction

Strategic Planning: Prepare for Design & Development

The Importance of Strategy

Before you begin to develop a dashboard, it’s important to understand the most pertinent problems teams are facing when it comes to understanding how to create features that display data in the most efficient and usable way possible. By strategizing on the front end, it’s easier to create a well-defined product that allows your users to accomplish their goals.

Start with Less

Consider focusing on having your dashboard do a few things well—rather than trying to solve every use case—in the initial designs. Focus on the key use cases and create the features that address the most critical problem area(s) first.

Starting with less (a Minimum Viable Product) allows you to collect more information about your users and their needs, without stuffing the initial iterations of your product with too much data or functionality. You can then assess the core functionality of the dashboard and add additional features or eliminate unnecessary ones.

Key Areas of Inquiry

As you complete your strategic planning phase, consider the series of questions discussed in the next section to find more clarity:

Understanding & Research

  • Who are the key stakeholders?
  • Who are the key users?
  • Why do we need a dashboard at all?
  • What will go on the dashboard? What data and functionality are needed in V1?
  • What are the budget & time constraints?
  • What are the technology constraints?

Key Information

  • What KPIs and metrics need to be displayed?
  • Why is this information included?
  • If you had to rank your metrics, in what order would you rank them?
  • What contextual information or benchmarking features make the data usable?
  • How is the information on the dashboard grouped and connected?

Data Collection

  • Where does the data live?
  • Who owns the data integrity and data cleansing?
  • How can I access the data?

Analysis & Monitoring

  • What reporting periods do we need on the data? (daily, weekly, quarterly, annually)
  • What alerts are required and what are the thresholds?
  • How should we alert users if thresholds are exceeded?
  • How often is the data refreshed? And where do we communicate data timing?

Technology

  • What devices do users access the dashboard with? (e.g. mobile, desktop, tablet)
  • What tech stack is currently being used?
  • How does the tech stack – frameworks, libraries, languages, and other tools – affect technology planning and design constraints?
  • What technology do you want to use to develop the dashboard to understand design constraints? e.g. D3, Highcharts, SAP, etc.

Design

  • What existing product will the dashboard replace? What is currently working for users?
  • Is there a preference for how data or information visualizations should look? (e.g. as a gauge, a chart, a trend line, a list, a table)
  • How will the dashboard adhere to or differ from existing brand guidelines?
  • How should color play a role as a signal of information? Does color choice (reds, yellows, greens, etc.) conflict with your brand?
  • What other existing dashboards do you like? What do you like about them?

Interaction

  • What elements of this dashboard should be interactive? (hover states, dropdowns, micro interactions, etc.)
  • How can we use interactivity to guide users to what matters most in the UI?
  • Where can – or should – motion play a role in aiding usability?
  • How can we confirm actions taken with 2-way communication, i.e. alerts, dialogues, etc.?
  • Which KPIs require drilling down, beyond the top level data visualization? How many different levels of visualization and exploration should be included?

Security

  • How sensitive is the data?
  • Who has access to what data? What permissions are granted?
  • What are the security requirements, if any?
  • Are there any compliance considerations for data access or viewing?

Accessibility

  • Are there specific accessibility requirements for users?
  • What is the primary device the dashboard will be viewed on?

Functionality

  • What needs to be included in the MVP (Minimum Viable Product) for testing?
  • What needs to be included in the MLP (Minimum Lovable Product) for release to core customers?
  • What features should be phased for later development?

Embrace Design-Led Development

Our signature development approach—design-led development—starts with a concrete design phase and then moves into a stepwise agile process. The initial planning process involves discovery through quick design iterations to get the concept right on paper before moving into code.

Design-led development requires extensive feedback from users and stakeholders. Depending on the project, this may include collaboration on user research, personas, user stories, story maps, and user testing.

One byproduct of design-led development is a minimum viable product, which allows for testing of key features and workflows. Then feature additions are broken into smaller design and development sprints that help the project stay on budget and find a better market fit.

Once the project is complete, we recommend exploring analytics and conducting user testing to fix any unforeseen problems. Listening to users beyond the UX design phase and acknowledging their concerns provides a healthy, ongoing feedback loop.

Development starts with a robust waterfall-like approach but becomes more agile and responsive as the team continues through development. This approach blends the best of the waterfall and agile techniques and results in close collaboration, lean resource investment, and a product that meets a shared vision.

The end result—through a process of asking questions, planning, and following a design/development process—is a strong, foundational MVP dashboard.

Download our white paper: Successful Dashboard Design, to learn how to make your dashboard considerably stand out. 

Fresh Consulting's white paper, Successful Dashboard Design

Johnny Rodriguez

Director of Strategic Innovation

Johnny is a multi-lingual Mexican-American, with interactive design & development skills. When not creating interactive experiences or overseeing internal product development, Johnny spends his time producing music, rendering service to the community, leading his church congregation as the pastor, or beatboxing. His beautiful wife and 3 kids give him the fuel he needs to wake up in the morning and think of FRESH ideas.

Whitepaper

Resources

Successful Dashboard Design

An effective dashboard – the hub of an application’s UI – provides a snapshot of the data and metrics most vital to users. Learn more about the design principles that go into creating an accessible dashboard, from a big picture overview of data to the granular details.

Download

You might also like...

16

Jan.

What We Can Expect From Edge Computing

The growth of edge computing is about to surge. Currently, companies are producing around 90% of their data within centralized data centers or clouds. But according to a report by Gartner, within the next six years, that number will drop to 25%, with the majority being sent to the edge. Predictions of The Future State … Continued

9

Jan.

Estimation is Crucial to a Software Development Project

How much does a new car cost? That depends on the car. How much does a new software application cost? That depends on the application. In either case, estimation isn’t an exact science. Until you have a somewhat detailed understanding of the application system and its specific features, you will have uncertainty in estimates. However, … Continued

3

Jan.

The Current State of Edge Computing

Throughout the history of computers, data processing workloads have migrated from company premises to outside data centers to cloud repositories and now to “edge” locations. Why the shift, you might ask? To strengthen the reliability of apps and digital services, reduce costs of running data centers, and lessen the distance information has to travel. That … Continued