Early concepts need validation — and nothing communicates quite as effectively as a wireframe. So it makes sense to use wireframes to create realistic designs that inspire key stakeholders and keep your review cycles tight. In just minutes, you can build a wireframe that models your application, start gathering feedback, and iterate toward a final version.
In this article, we will brainstorm and design a wireframe for an analytics dashboard in just a few steps. Follow along and give it a try, or click any of the following links to skip ahead:
This article discusses functionality that is included in the Aha! Whiteboards Advanced plan. Please contact us if you would like a live demo or want to try using it in your account.
Confirm user permissions
Action |
User permissions needed |
Create and edit whiteboards |
Contributor, or reviewers or guests who have Edit permissions for a whiteboard |
Insert templates into a whiteboard |
|
Save a whiteboard as a custom template |
|
Share whiteboards |
|
Comment on whiteboards |
Identify the need
Before we start fiddling with whiteboard components, we need to define our goal for the wireframe. For this article, we will pretend to be a product manager for Fredwin Cycling, a fictitious tech company with an activity-tracking app for cyclists. Our users are curious about changes in key metrics — such as wattage, time to complete route segments, and VO2 max — and we have noticed that when users engage with these metrics, they are more likely to upgrade to our premium plan.
Our application already tracks hundreds of data points. We want to land on a solid dashboard design that will clearly communicate the right metrics before we commit development resources. Wireframes make it easy for us to iterate on our designs so we can build a dashboard users will love.
Let's use a brainstorming session to focus our wireframe definition. From a workspace in your Aha! account, navigate to Knowledge -> Documents.
Click Add -> Use a template. This will open up the Aha! template library.
Select Brainstorming session to insert that template into a new whiteboard.
Working with a team or by yourself, add sticky notes to call out important design and functionality requirements. Be sure to consider these questions:
What are the most important metrics to display on our dashboard?
Should sections of the dashboard include metrics that are part of the Fredwin Cycling premium plan?
What are the best ways to display these key metrics?
What are the most useful filters to add to the dashboard?
Are there company branding requirements that we should consider at this early stage? Branding will be a formal part of the process once the team chooses a design, but we should use official product colors or logos if possible (so the wireframe feels like a part of our product).
Then, drag the individual sticky notes into different requirement themes. In our case, we can group ideas into Metrics, Charts, Filters, and Brand themes.
The brainstorming session generated some great ideas. We can design the wireframe with those in mind.
Design the basic layout
Our whiteboard is an infinite canvas for our creativity. We can insert the wireframe template right next to our brainstorming session — so we never have to break context as we shift between ideation and design.
From the whiteboard toolbar, click the Template button.
Scroll or search for the Analytics dashboard wireframe template. Click Use template to insert it.
The template's default Device is a laptop computer. But we can click on the computer and then click the Device button in the object's toolbar to change that. Let's design for a browser first, then think about device-specific designs in future iterations.
In this article, we will design a wireframe for a single device. But you could add the wireframing template multiple times — one for each device — to present a more comprehensive design series.
Next, let's define the wireframe's basic layout. Because we will probably create several versions of this whiteboard (and will certainly design more pages in our application in the future), a blank, but tailored template will let us skip the first few steps next time.
Adjust the product name:
Change Product name to Fredwin Cycling.
Click on Fredwin Cycling and change the text color using the object's toolbar. We gathered our official brand colors during our brainstorming session, so we can click the + icon and type in the color's hex code.
Delete the icon next to our product name. Then, type i to insert an image of our actual product logo.
And adjust the tabs:
Our application has five tabs on the left side. Rename them to Home, Routes, Clubs, Activities, and Analytics. Analytics already exists — and is already Selected — by default.
Click on Tab 6, then click on the trash can icon in the object's toolbar to delete it.
Change the icon for Activities. Click on it, then click on the star icon in the object's toolbar. Search for "bike" and select a representative icon.
Now, click on the tabs object as a whole. From the object's toolbar, change the Size to Large, then click Options and hide Separators. Resize the object so it fits in the whiteboard.
Because we are Aha! Whiteboards Advanced plan customers, we can save this wireframe as a custom template. To do this:
Click the More options button in the upper-right corner of the whiteboard.
Click Save as template.
Name the template. We will add some identifying characteristics to the name so the right teams can find this later. Let's call our whiteboard "[2024] Fredwin Cycling blank product page template."
The custom template will include both our blank product page and the brainstorming session we inserted alongside it (which we could have also scrubbed clean before saving). Everyone with access to our workspace will be able to add this template, so the rest of the product team can build consistent wireframes.
Add content
Now that we have the basic layout, we can begin adding metrics and visualizations using the priorities we identified during the brainstorming session. Our changes here do not affect the custom template we just created.
The wireframe shows the top half of the full page — everything above the fold. This is useful for our first effort, and we should design with a few best practices in mind:
Place high-value summary metrics near the top of the page, with more detail further down. We can insert additional templates or expand the current template to give us more room.
Start simple, with just four to five dashboard panels. We can always add more later.
With that in mind, let's get to work. The first row should include the all-important metrics for cyclists: distance traveled and elevation climbed.
The top-left should be Distance. Click on the title to rename it.
The top-right should be Elevation. Click on the title to rename it. Next, click on the bar chart, then on the Style button on the object's toolbar. Change it to a Line chart.
The second row should follow from the first. Here, we can break down cyclists' activities so they can see what type of ride they take most frequently and how often they log rides.
The bottom-left can be Activity type. A donut chart will look good there.
The bottom-right should be Activities. Click on the title to rename it. Next, click on the pie chart, then on the Style button on the object's toolbar. Change it to a Bar chart.
At the bottom of the dashboard there is a scatter plot, but it might be interesting to take a different direction at this point. Users upload images within their activities. Showing a reel of those here would likely trigger happy memories for our users and add some literal color to the data.
Click (or click while holding the Shift key for a multiselect) on the scatter plot's Title, rectangle shape, throughline, and all data points. Then, Delete them.
Now, we need to create the image reel. Click on the Shape menu from the whiteboard's toolbar and scroll down to the Wireframes section.
Click on an Image and click to insert it. Move and resize it, aiming for four images across the row. The blue lines will help us align the image component with the charts above it.
Time to duplicate it! Right-click, then Duplicate the image object (or select it and use the keyboard shortcut Cmd+d/Ctrl+d to duplicate it three more times). Move the copies, again using the blue lines to ensure a consistent distance between the objects.
Fredwin Cycling users can upload short videos as well as images. Click on one of the images, then click the Style button on the object's toolbar. Change the component to a Video.
This looks great! Now, let's add functional elements to help our users navigate and customize the dashboard.
Add controls
In our brainstorming session, we identified filters as important additions. We have ample room at the top of the dashboard to add these.
In wireframes, these elements are called controls.
Open the whiteboard's Shapes menu and scroll down to the Wireframes section.
Collapse the Basic and Advanced shapes sections to make this easier. The whiteboard toolbar will remember your configuration.
Insert an expanded Dropdown filter.
Click on the object's toolbar to change the Size to Small. Move and resize the filter. Finally, rename the filter. This should be Activity type, and the options should be Road, Mountain, or Gravel.
Next, insert a Checkbox. Change the Size to Small, and click the State button to change the Checked state to Empty and the Disabled state to Disabled. Then, move and resize it. Finally, rename the filter. This should be called Race, so users can see all of their race metrics in a single dashboard.
Repeat the previous step, but name that checkbox Commute, so users can track how often they use their bike as transport.
We have room for one more filter. Let's insert three Radio buttons and stack them vertically. After resizing and moving them, change the State of two to Off and Disabled, and the State of one to On and Enabled. Rename the labels to Past month, Past year, and All time.
Color and annotate
We are almost ready for stakeholder feedback. But we will first take two passes through our dashboard to add aesthetic and explanatory refinements.
Click on any element to adjust its Color. We will put the graphs into our product's secondary brand color.
Open the Shapes menu on the whiteboard's toolbar, expand Advanced shapes, and select the Annotation shape. This shape is useful for leaving comments that are visible on the whiteboard itself. (We will use the Comments sidebar in a minute to gather feedback.)
Add an annotation to the image reel noting that the dashboard will display the four most recent media that the user uploaded, and that the user will be able to click on them to see an expanded version in a modal.
One feature of our product's premium plan is advanced analytics for race teams. Let's add another annotation to the Race control explaining that we want to add an upgrade banner to the dashboard whenever someone checks that filter. We can also include some suggested copy, such as: "Fredwin Cycling's premium plan includes metrics just for high-performing race teams. Try it for free!"
Solicit feedback
Our first wireframe is complete! The annotation shapes will help answer the common questions we can anticipate, and the brand colors and product logo will make this wireframe feel credible to stakeholders.
There are several ways to gather feedback. We are going to use several means to centralize feedback right here on the whiteboard — where it is most actionable.
Our product and design teams will have valuable opinions. Click the Share menu and make sure that reviewers can View and comment on the whiteboard. Then, click the To-do tab at the bottom of the page and create a to-do for soliciting feedback.
Some stakeholders might not be members of our Aha! account. Click the Share menu. From the Guests tab, make sure guests can View and comment on the whiteboard. Click Generate link to create an invite link that we can share with important cross-functional reviewers.
For either set of stakeholders, frame your feedback request with an overview of how this dashboard will be strategically impactful. This will help everyone align around the same goals and give feedback relevant to your product's success.
Encourage inline comments for qualitative feedback. Stakeholders can comment on any aspect of the whiteboard, add emoji reactions, or reply to others' comments to emphasize feedback that already exists. We can respond to their feedback in threaded discussions to ask further questions or note how we plan to react to their insights.
Adjust your wireframe
Wireframes are the perfect vehicle for quick review cycles. Where stakeholders' comments are practical, we can make adjustments to the wireframe directly. The image reel we added was our most ambitious design feature. It could be that the reviewers do not think it fits with an analytics dashboard, or they could want to move it to the top row so users start with memories and move into data.
In this article, we walked through a single wireframe and a single review cycle. But you could add many more templates to your whiteboard for a more sophisticated approach. Post annotated images of competitors' features beside your own designs, add a user journey map to situate your design in the user lifecycle, or add a simple roadmap to align everyone on the development time frame. The possibilities (like the whiteboard itself!) are infinite.
After we resolve all the feedback, we can move through further stakeholder reviews if necessary. And once we have high-level alignment, it is time to move this into a feature that engineering teams can begin implementation.
The Fredwin Cycling product team uses Aha! Roadmaps. When we create a feature, we can link to this whiteboard from the feature's Research tab. We can then retrieve all of this context with a few clicks.
The Fredwin Cycling engineering team uses Jira. The Jira integration will pull our product feature into its backlog, but we can also create a secure view-only web version of this whiteboard for anyone who needs to reference it outside the Aha! account. To do this, click the Share button. And from the Web tab, click Manage webpage. Click the toggle to Enable share as webpage, then click Preview whiteboard to confirm that everything looks correct. Finally, click Copy link to copy the secure URL for the engineering team.
Thanks to this process, the first Fredwin Cycling analytics dashboard will be beautiful, encourage our users' curiosity, and effectively drive deeper user engagement with our product — all without using development resources for high-level iteration.
If you get stuck, please reach out to our Customer Success team. Our team is made up entirely of product experts and responds fast.