Handbook

The Complete Guide to Designing a BI Dashboard Mockup

Last Updated:
March 9, 2022
The Complete Guide to Designing a BI Dashboard Mockup

Introduction

Power BI analysts and project managers are tasked with building analytics dashboards that help their stakeholders make key business decisions.  When deciding how these dashboards should look and feel, design is often overlooked and reports may not match stakeholder expectations—leading to rework and frustration between all parties. 

Dashboard mockups can help ensure all parties are in alignment before analysts begin any work on a BI dashboard.

What is a BI Dashboard Mockup?

Mockups are a model or replica of a final output that can be used to illustrate the look and feel of a dashboard before any actual development work begins.  In traditional UX/UI design, mockups are a near replica of the final output of a product, including colors, layouts, and high-fidelity details that guide engineers in their development of a feature. 

For our purposes, a mockup is any depiction of how a Power BI dashboard will look and feel that can be presented to stakeholders for discussion, revision, and ultimately serve as an agreed upon basis for a scope of work. 

There are many different formats in which a mockup can be constructed—including pen and paper. This guide will cover BI dashboard mockup best practices and various tools that can be leveraged to build sample dashboards.

What We Will Cover

This guide will focus on the importance of Power BI dashboard mockups, defining requirements with stakeholders, managing the amount of time spent on mockups, mockup tools, and getting customers to agree to a scope of work.

1 - Why You Need a BI Dashboard Mockup

2 - How to Scope Requirements with Stakeholders

3 - How to Manage Time and Expectations

4 -
How to Pick a BI Dashboard Mockup Tool

5 -
How to Finalize the Scope of Work

Why You Need a BI Dashboard Mockup

Imagine the following scenario: A customer sends an outline of the types of reports they want built into a BI dashboard.  A data analyst builds said dashboard based on the customer’s specifications.  The customer comes back saying that the reports do not match their expectation or that the dashboard got their wheels spinning and they would like a whole new series of reports spun up.

We’ve all been there; building a BI dashboard that meets a customer’s exact needs can feel impossible. 

Mockups can eliminate some of these pain points because they encourage a dialogue around both the data requirements and the design of a BI dashboard. Stakeholder expectations can get lost in translation without a tangible point of reference that helps demonstrate how a BI dashboard will look and feel.  

BI dashboard mockups:

  • Force Stakeholders to Make Decisions - Within an organization, different stakeholders may have different opinions on the types of reports that should be included in a dashboard.  Setting clear boundaries around limitations and presenting a dashboard mockup can help your stakeholders decide what is most important and align internally on business requirements.
  • Encourage Collaboration and Iteration - A mockup is rarely going to represent the final output of a BI Dashboard in its first iteration, but it can serve as a talking point to encourage ideas, communication, and revisions when the dashboard is still in its inception phase rather than when development work has already begun. 
  • Provide a Framework for Analysts - As an analyst, it’s nearly impossible to build a dashboard off of rough ideas or a high-level vision.  Dashboard mockups help analysts interpret the data that will be represented in the report and guide them through the customer’s desired output. 

How to Scope Requirements with Stakeholders

Before you can build a BI dashboard mockup, it’s important to understand what your customers or stakeholders are looking for in an analytics dashboard.  Scoping requirements will typically look very different if you are working with a data-savvy vs non-technical stakeholder. 

Data-Savvy Stakeholders

If you are working with an organization that is familiar with BI or has already built BI dashboards internally, requirements gathering should focus on the following:

  • What pain points are you experiencing with your current reporting? 
  • What types of reports are you looking for and how do they differ from your existing dashboards?
  • What data transfer processes do you currently have in place and what source data is needed to build these reports? 
  • Which of your existing dashboards do you find easy to use and which do you leverage less often?

The answers to these questions serve as a great starting point for configuring some dashboard mockups to present to the customer.  The mockup can showcase that you listened to their current pain points, understand their needs, and have distilled their feedback into a cohesive dashboard concept for further discussion. 

Non-Technical Stakeholders

If you are working with an individual or an organization that is venturing into analytics for the first time, it is likely that non-technical stakeholders will rely on your expertise and guidance to define the scope of a BI dashboard build.  In this scenario, it can be tempting to build a dashboard without a mockup or to assume the stakeholder will not have much feedback on the way in which a dashboard should be designed.  Requirements scoping and mockups are just as important for a non-technical audience to ensure they understand what is being built and that their business needs are being met.  

The following can be a helpful guide to scoping requirements with non-technical stakeholders:

  • What business questions are you looking to answer through this dashboard?
  • Would you like to see our best practices for dashboard design?
  • Would you like to see a mockup of a dashboard built for a customer that works in a similar industry to demonstrate what similar companies look for in a BI dashboard? 

In both scenarios, requirements scoping should be iterative and begin with a lightweight mockup to ensure everyone is aligned.  From here, conversations and detailed mockups can help both parties hone in on the final requirements for a dashboard.

How to Manage Time and Expectations

Mockups can be time consuming for anyone and may feel unimportant if design is not part of your day-to-day job description.  It’s important to manage time effectively and communicate openly with customers about the objective of a dashboard mockup and the design quality they can expect. 

How much time should I spend on a BI dashboard mockup? 

While it’s easy to think of a mockup as a beautifully rendered dashboard built by a designer in Adobe Illustrator, there are many simpler versions of a BI dashboard mockup that can be just as helpful in honing in on an agreed upon scope of work between two parties. 

  • Whiteboard first: Whiteboard or pen and paper sessions should be the first step when creating a BI dashboard mockup. A rough drawing or the way in which a dashboard will be organized is the simplest and fastest way to showcase a draft design to a stakeholder for immediate feedback.  Consider the hierarchy of information you’d like to present. What you drew on paper may not match the customer’s expectation at all and that’s okay! You are moving toward alignment on requirements and encouraging iteration without wasting any time in design applications. 
Dashboard mockup, low fidelity pen and paper.
Pen and Paper Dashboard Mockup


  • Wireframe second: If you have come close to an agreed upon scope for the look and feel of a dashboard, it can be helpful to build a simple wireframe of the dashboard.  A wireframe is a low-fidelity rendering of what the dashboard could look like with some actual charts and graphs represented.  Tools like Microsoft Excel, Google Sheets, and PowerPoint are great for wireframes because they are easy to plug data in and add a visualization layer that quickly showcases the ways in which the data could be represented in a final dashboard. 
Dashboard mockup, wireframe in excel or google sheets.
Google Sheets Dashboard Mockup


  • Reusable mockups third: If you have access to a design team, building industry-focused dashboard mockups that can be used repeatedly can help with time savings and overall investment in analytics mockups.  For example, if many of your customers in the supply chain industry tend to look at a specific subset of reports or dashboards, a generic supply chain dashboard that showcases these trends could be used to demonstrate how a dashboard will look and feel.
  • High-fidelity mockup fourth:  Making a high-fidelity mockup—one that has the exact formatting, color scheme, visualizations, and filter options of the dashboard that’s being built—is the most time consuming and design focused mockup option.  Actual product designers will have the most experience building out these prototypes and will be familiar with the tools needed to build this type of mockup.  This type of mockup is usually needed in a large-scale project with multiple stakeholders and may require legal signoff. 
Dashboard mockup, high fidelity.
High-fidelity Dashboard Mockup


Manage Stakeholder Expectations

Presenting a drawing on a whiteboard or a simple bar chart in an excel spreadsheet may not seem like the most tech-savvy way to impress your stakeholders. Communicate clearly that brainstorming sessions are a great way to define requirements upfront and encourage collaboration—ensuring everyone is on the same page before expensive and time-consuming technical work is completed.  

It is imperative to align on expectations before development. This saves time, rework, and builds trust—showcasing that you have everyone’s best interest in mind.

How to Pick a BI Dashboard Mockup Tool

For time savings and alignment on requirements, start your dashboard mockup process with a whiteboard, pen and paper, and wireframes in excel or powerpoint. Oftentimes these tools are all you need to produce an adequate mockup, especially if you lack experience or budget for the high-fidelity tools we will cover below. 

If you are creating a high-fidelity mockup that will closely replicate the exact look and feel of the dashboard, consider using the following tools:

Power BI

Dashboard mockups can also be built in Power BI.  You can import sample data, run the report with visualization layers, and take screenshots of the prototype dashboard to provide stakeholders with the general look and feel of a dashboard.  While this approach does provide a way to visualize the look and feel of a dashboard, it is time consuming to import data and requires backend work that other mockup tools can help avoid.  

PowerMockup

PowerMockup is a PowerPoint add-on that integrates into the PowerPoint window and provides wireframe and mockup shapes.  If you typically build mockups in PowerPoint, the tool feels native to PowerPoint and is designed for wireframing.  

Adobe Illustrator

Adobe Illustrator is a vector graphics editor used primarily by graphic designers.  The product’s capabilities are robust, including 3-dimensional design and the software has a steep learning curve for beginners.  Still, the product can create extremely robust BI dashboard mockups if a stakeholder needs a top-tier high-fidelity rendering of an analytics dashboard. 

Figma and Sketch

Numerro leverages Figma to create all of the BI Dashboard Mockup images on our website.  Figma is a web-based tool that has the core functionality of design software and is free for individual users. 

Figma allows for files and components (such as a company logo) to be saved and easily dragged & dropped onto the canvas.  Additionally, users can save color schemes to ensure the dashboard mockups follow brand standards. 

With the proper setup,  components like single value metrics can be easily pulled onto the page and rearranged.  Additionally, Figma allows for text elements to be added to the canvas.  Using descriptive text and arrows as shown below can help explain why certain design decisions were made. 


Dashboard mockup, high fidelity in Figma.
Figma Dashboard Mockup with Comments


Sketch is a macOS application that is built for high-fidelity design and leveraged by many product designers.  The tool is similar to Figma with a suite of robust functionality including pixel-level precision.  

Both Figma and Sketch can feel foreign to users that have less experience with product design tools.  If you are uncomfortable leveraging the tools for high-fidelity mockup creation or they are too time-consuming for your purposes, the Numerro Figma Design Kit is simple to use and allows you to quickly produce high-quality dashboard wireframes. 

Numerro Figma Design Kit

Our Figma Design Kit can help create wireframes that have the look and feel of a high-fidelity mockup in the matter of a few minutes. The Numerro Toolkit includes a Dashboard Design Kit in Figma with hundreds of  reusable PNGs that are user-friendly and provide stakeholders with a realistic view of actual Power BI components. To use the Figma Kit, you simply start with a canvas and begin dragging professionally-designed Power BI components into a proposed layout, which can be used to gain stakeholder approval before building the final version in Power BI.


Dashboard mockup tools. Numerro Figma Design Kit.
Draggable Power BI Components

Dashboard mockup tools. Numerro Figma Design Kit.
Editable Canvas for Reformatting Components


Dashboard mockup tools. Numerro Figma Design Kit.
Example Numerro Wireframe with Comments


All Numerro customers can download the Figma Design Kit by logging into the Hub and downloading the Kit from the bottom of the Hub homepage.

How to Finalize the Scope of Work

Once a dashboard mockup has gone through several iterations and a final output agreed upon by all stakeholders, it’s essential to finalize the scope of work.  

While mockup signoff can happen over email or in a meeting, it is just as important to move all written technical requirements and dashboard mockups into a Statement of Work (SOW) and to have key decision makers sign off on the agreed upon scope.  This contract ensures alignment on what is being developed and allows any changes outside the agreement to be handled in a separate iteration.

At this point, the process will have included many conversations, mockups, revisions, and the SOW should be a finalized summation of everyone’s collaborative effort to move forward with a BI dashboard that meets the agreed upon business requirements.


We hope you enjoyed our Complete Guide to Designing BI Dashboard Mockups and that this will serve as a useful framework for engaging stakeholders, reducing miscommunication, and aligning on the look and feel of a BI dashboard before development begins. If you’re a Power BI user, checkout the Numerro Toolkit for inspiration and templates. It includes our Figma Design kit with some basic Figma assets for Numerro wireframing.

Ready to improve your reports?
Get free access today.

Ready to improve your reports?
Get free access today.

arrow up