Prototyping the Cashflow Dashboard

Today we’re going to take a look at how we used Indigo Studio to create a prototype that helped explain some of the interaction designs found in our newest cashflow dashboard.

First, we proposed putting the most important corporate cash flow measures in summary on the left panel. Then, at the top of the main area, we showed two charts for displaying monthly inflow and outflow as well as ending cash value.

We suggested that the designers use a data chart of module series to not only display monthly cash flows, but also allow users to select a particular month right from the chart. There are a few interaction features that the prototype communicates here, so let’s run the prototype and see them now.

Clicking the left or right arrow on the main chart will scroll the chart to a different time range. Notice that the cash flow of data does not change while scrolling, but as expected, the data will be changed if a different month is clicked. I just clicked on the inflow and outflow columns of April 2013 and it is now the selected month for the data being presented.

The dashboard presents more detailed cash flow information in the inflow area and the outflow area. The Indigo prototype shows design intent for chart type selection. Currently, it is showing a stacked bar chart to provide a quick view of inflow from different categories; the current selected month, last month, and the same month from the prior year.

When we click the overall button, the chart changes to an area chart that displays the overall inflow along the time range. The prototype attempts to show that that chart type selection for the inflow and outflow is independent. It helps you visually determine if the design makes sense and can clearly communicate your information to viewers.

Overall, Indigo Studio helped us save time in the design and development process, by giving us the tools to mock up a dashboard design efficiently. By creating this prototype, we also ensured clear communication between the client and the designers in terms of what interactions were needed and what the dashboard was created for.

So now that you’ve seen how we built the prototype, be sure to check out the sample for yourself – and don’t forget to grab your free trial of Infragistics Ultimate to get everything you can from the code. We hope you enjoy!