Article

Guidelines for Successful Dashboard Design

carlos-muza-hpjSkU2UYSU-unsplash-1-e1571439179578

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.

Successful-Dashboard-Design
JohnnyBW.jpg

Johnny Rodriguez

Director of Strategic Innovation

Johnny is Fresh’s Director of Strategic Innovation who brings over 13 years of experience in user experience, interaction design, and front-end web development.

He thrives on the challenge of leading interaction design and development as well as usability and best practices, but his primary focus is leading Fresh’s internal product development as well as other strategic initiatives to help Fresh stay fresh.

Johnny has made valuable contributions in the past throughout the end-to-end delivery lifecycle of complex and large-scale technology solutions. Some of his innovative work can be seen on projects involving advanced JavaScript, augmented and virtual reality, WordPress development, AI systems, chatbots, and design language systems.