Prototyping a Sales Dashboard for a Tablet

In this video we are going to show you how we used Indigo Studio to design our global sales dashboard for a tablet.  Particularly for the layout and navigation of the dashboard. You can even download the Indigo Studio files at the end.

You will see here that we used containers to design different time ranges, for month, for quarter, or for year. When a time range is selected we like to display the breakdown of that time range in terms of geographical locations or in terms of business divisions.

For the tablet, we used repeaters to quickly construct this table. Once a row has been designed, we can quickly repeat and customize into a nice table.

At the bottom we use the chart stencil to show the trend for target, forecast, actual, and then to highlight the date range that's being selected. Now I'm going to run the prototype to get you a better idea about the interaction.

Here you see the default selection is month to date. The data shows month to date with the regions as the default selection showing different regions. I can change to the divisions, showing for different divisions. At the bottom, it shows the sales history. Because it's month to date of September 2015, the September time segment is being highlighted.

I can also select a particular region to see its trend, so for example if I select Americas, the Americas row will be highlighted and the chart will now show the sales figures for Americas. I can even change the time frame here.

Now I'm going to reset. Let's say I want to go back to previous months to see the sales figures, I can do that from the region that displays the time.

Now I’ll select June 2015, the data reflects the change and the chart also highlights the time frame that's been selected.

If I change to quarter, you will see the selection will change the data to quarter to date and the chart will highlight those three months for that quarter, similarly, for the year to date selection.

Here we were able to show our client what the app would look like and how the interactions would work for the dashboard. And there you have it.

Download the source code for this video here - and enjoy!