At Studio Frankly, we have done multiple digital dashboard projects. Our most recent one, for a large cyber security company in automotive (view case here), brought along a number of challenges that are worth describing here, for people to learn from and understand how we work. So here are a few key take-aways from this project, if you’re interested in knowing more, reach out to us and we’ll be happy to advise!

NOTE: This is Part 1 of 2 of this blog article. You can find Part 2 here.

1 – Collect the right use cases

First, it’s important to gather the right starting information.

During this stage, we define: who is the user? What are their top tasks? What are the jobs to be done? Which functionalities and features should be highlighted or designed? What is the preferred viewing device (laptop/iPad/mobile/etc.)?

This step can be done in an excel or whatever format or your liking, as long as it holds the key info needed to start sketching. Typically, you might have anywhere between 1 and 8 use cases (which should be viewed as distinct ‘journeys’ a user might take to find certain information).

Example of use case overview for new dashboard solution

2 – Sketching & tech feasibility

After it is clear which use cases you will actually design and prototype, it’s time to start sketching. For this, you can take any preferred tool to get going. We use an iPad Pro to quickly digitally sketch out master screens, but of course you can also revert to good old pen and paper or – when you prefer to do so – in Sketch, InVision, Illustrator or Axure. Whatever works best for you.

During sketching, we define: overall UX flow, sequence of screens, general component type and size, design patterns and Information Architecture (IA).

Please keep in mind that you need to be quick in this phase. There will be feedback and maybe you will have to redo entire screens, therefore you have to do the bare minimum, just to get the idea across. Remember: this is the first time the client will see a visualization of their brain child, and will definitely spark internal discussions, revisiting of planned features, and other feedback as direct result from seeing something visual (‘the power of visualization’).

On top of that, this is also the most difficult step of the process as you will need to critically assess how you’re going to visualize your dashboard in a logical, yet appealing way. Use references, dashboard images libraries, best practices and smart people around you get to best results.

Also, this the step where technology comes into play. What is the underlying technology that will be used? Salesforce? Tableau? Qlikview? You have to pay close attention to their respective libraries and limitations. There is nothing so painful as designing a beautiful dashboard that is not (financially) feasible. What components will be out of the box? Which can be customized? Which can be configured? Make sure you have sound knowledge about this beforehand.

Remember KISS (Keep It Simple Stupid) at all times: don’t make users think and try to reduce cognitive load as much as possible.

Examples of low-fidelity dashboard concepts

3 – Wire-framing

Then, when the client has approved the sketches and thus the overall UX flow, design components and Information Architecture, it’s time for the fun to start: wire-framing! Things are becoming more real from this point on! 🙂

During this phase we define: Text size and positioning, icon placement, exact size of UI components, final grid (e.g. 24 columns, 12 columns, etc.), and the exact content copy that will be used in the prototype.

You can design in any software you want: we often use Sketch but Axure, InVision, Illustrator, Photoshop or any other design tool are useful as well – it’s really up to the designer. Make it easy for yourself and pick a font that you think will match the final font somewhat, so that you have a reasonable idea of how big (or small) and how condensed text will appear.

Examples of high-fidelity dashboard wireframes.

Continue reading here: Part 2/2 on how to create a kick-ass dashboard prototype.

View entire client case here