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.
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.
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
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:
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:
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:
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.
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.
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.
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:
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 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 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.
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.
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.
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.
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.
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.
.png)
.svg){kind=small}
