This blog is the second in a series on prototyping. In this series, Autumn Battani and I will walk you through why prototyping can help benefit your development process, options that you have for implementing it, and best practices to keep in mind. If you haven’t already, check out the first post covering why integrating prototyping into your routine can help your dashboard delivery. Now that we have talked a bit about the ‘why,’ I’d like to get into the ‘how.’ In this blog, I will be highlighting a few dashboard prototype tools that you can use to create a professional mockup for a dashboard in Tableau or any other dashboarding tool. I’ll also discuss some pros and cons of each.
How Do I Create Professional Mockups?
1. Creating Professional Mockups Using Figma
Figma is a web-based graphics tool that can be great for creating mockups that have functionality folded into them that would resemble a real dashboard. A few examples of this functionality would be navigating between tabs on a dashboard or having tooltips show up while hovering over the visuals. Figma also has a desktop app for Windows and Mac as well if you do not want to work in a web browser.
Pros:Â It is free, collaborative, can mockup interactivity, and easy to share
Cons: It has a learning curve and does cost money once more people share a ‘workspace.’
2. Creating Professional Mockups Using PowerPoint
PowerPoint is a presentation program that is easily accessible as most companies provide it to their employees. A good substitute would be Google Slides.
Pros:Â It is easily accessible, simple to use & learn, and easy to share
Cons:Â It has no interactivity, rudimentary design, and hard to mock up complex visuals
3. Creating Professional Mockups Using Fake Data/Superstore
Superstore is a data source that comes with Tableau Desktop and has the depth and flexibility to create just about any chart.
Pros:Â You can think through calculations, actually have all the functionality of a real dashboard, and is a great representation of the final deliverable with formatting/polish
Cons: It takes longer, may not align well with the data structure or type you’ll be working with, and creating/finding mock data can be difficult if you don’t use Superstore data
4. Creating Professional Mockups Using Paper
Paper is an Apple Store app that you can download to an iPad. It is a free sketching app that allows freehand/snap-to-grid shapes. It is organized by sheets that are the perfect size/shape for a dashboard prototype. The app is best used with an apple pencil to nail down the details of your prototyping.
Pros:Â It is organized, free to download, and has the flexibility of visual types to create
Cons: It requires an iPad & Apple Pencil to gain the most value from, and handwriting is required for text features (it’s a con if you have not so great handwriting)
5. Creating Professional Mockups Using a Whiteboard
Whiteboarding/ Pen & Paper: The original way to draft and draw things out. Using a dry erase board or pen & paper is simple yet effective.
Pros:Â You have total control of design & layout, no computer is necessary, it very easy to go back and make edits when iterating through prototypes, and it can be done real-time in front of the users of the dashboard (on a dry erase board)
Cons: It doesn’t look as nice as a computer-based prototype (unless you have immaculate artistic abilities), sharing pictures/scans can make handwriting look less nice, misplacing the physical copy can be a real issue (if using a shared whiteboard), making sure no one erases the prototype, and it cannot demonstrate interactivity
We hope this blog helps you think more about how prototyping might benefit you in your next dashboard build. Stay tuned for the next installment in the series, where we talk more about what to keep in mind when you’re creating a mockup and how to best communicate this stage with clients and key stakeholders.
Have any questions, comments, or curiosities? Feel free to reach out to us about dashboard design best practices and prototyping on Twitter at @Aabatani and @BlizzardJacob.
