In this blog I will share the process of redesign the dashboard for one of our more complex applications. How we create insight through combining data, enhance insight by good visualization, create possibilities for interaction and guide the user to the right data.

Moxio loves data

At Moxio we love data. We enjoy making data more valuable by validating information, and enriching data by combining data from different sets. In this spirit we develop applications and tools that offer users a new, enhanced view on their data. Creating enriched data is one thing, but communicating the results in a functional way is another story.

Redesigning the dashboard

First let me introduce you to our application: Objectenregister. Objectenregister is an application that allows users to request, deliver, review and accept data and documents in large scale rail-infrastructure projects. These projects create a lot of data that is processed in the application. Because of this, the application has several different pages, which allows users to perform multiple tasks. The size and complexity of the process can make it difficult for users to see where their attention is needed. To offer insight in project progress we created a dashboard a while ago.

First, the old dashboard

The old version of the dashboard:

We gathered information that could help the users track the progress. The amount of objects and documents, specifying the percentage of those that were valid, and thus ready to be accepted. We showed the amount of comments and the most recently added comments. Also project planning was added.
The problems here

• We offered numbers, but no triggers for the user to act on: ‘What is the next step’, ‘How can I complete the process’, ‘what causes the process not to be completed’?
• It was not possible to jump to other pages of the application from the dashboard.
• Not all data displayed was useful for users in their work process.
• Because the dashboard was not part of the users work process it didn’t update with changes in the application. Because of this progress numbers were not up to date.

These problems need to be solved in a new dashboard so the user can gain insight in their own data.

The new dashboard

To create a solution that would work we needed to look at the needs of our users and the key activities, user roles and actions in the process. On the data side, we dug into different combinations of available data, and what combinations give our users the best insight for their key activities.

What we wanted for the new dashboard could be caught in these four words:

Insight, visualization, interaction, guidance

Multiple user roles, multiple dashboards?

We have several user roles in our application, and want to offer each user the insights for their tasks. A logical solution would be to create a different dashboard for each role.

But we had arguments against it:

• Users can switch roles during the project, or even have different roles in different phases of the project. Which means they would have to get used to different dashboard depending on their role or phase in the project.
• Given the history we have with our old dashboard, we didn’t want to take on the trouble of maintaining different dashboards.

So we decided to build a one-size-fits-all solution, challenging ourselves to still offer every user (role) what they need most. Now we could start thinking on which information to show on the dashboard.

Combining data for insight

As we saw in the old dashboard, displaying single values does not offer enough insight or triggers to get the process to the next level. With the users key activities in mind we determined useful connections between different kinds of data and information that would trigger users to do their next action.

For example, let’s look at one of the main part of the application, objects. Objects have progress states: new, review and accepted. Objects start in the state new and will be changed by the users during the project. It’s a good idea to show this progress in the dashboard. However beside the progress state, objects are also validated by our application and when not valid they get a ‘not valid’ mark. To validate the application checks the characteristics, if there are any comments made or not valid documents linked to the object. Combining the progress state with the validation state explains why an object is still ‘new’ and not ready to go in to the review state and a user can act on that.

Next step: showing our data connections in an accessible view.

Visualizing with donuts and bar-charts

We used colors, icons and other elements on the dashboard corresponding with the rest of the application. This gives the dashboard role as a legend to explain the meaning of icons and colors used throughout the entire application.

Donuts - it’s a good excuse to eat them while designing them!

To make the (combined) data clear and appealing to look at we visualized the data in charts. For now we used a double donut-chart and a bar-chart.

In the old dashboard we already had the donut chart. What I liked about it is that you can easily determine how ‘big’ a part is. It’s just about a quarter or just about half of it etc.. We experimented with other charts but they didn’t made it easy to see how big a part of the whole was. Also the double donut chart and its interactions gave the developer an extra challenge!

In the application users can add comments or remarks to contracts, objects, document requests and documents. The comments are a formal process and have to be handled and closed by users.

For displaying comments we had the idea of showing every single comment and remark. Performance wise this idea was quite a challenge and since I had already spent my developer credits on the double donut we simplified it to a bar-chart with all the comments grouped together.

The bar-chart is showing the comments and remarks on every level. By splitting for each level users have an overview of where to look for comments and can act if comments aren’t closing.

Interaction and guidance

Now that our users have insight in the process, let’s lead them to where they the can actually work with the data and information to get the process going. As this is a complex application there are many other pages in the application. This is no static place: a lot is happening. Users add, change and delete information, comment and reply on documents and questions, etc., all distributed over several pages.

Because we chose the one-size-fits-all solution, users should be able to quickly find the information they are looking for. That’s why we should guide them to the place they need to be.

We use the visualization as a route into other pages in the application. In the donut charts users can click on a specific part to see the numbers and click on them to follow through to the actual page. When your role is to complete the objects to get them into review it’s important to know what objects are not in review yet. One click on the blue part of the donut will lead them to the data they need.

But one-size-fits-all does not mean every user sees exactly the same numbers for the whole project. If a user is assigned to a certain part of the project only, they will have a filter put on the application to only show the part they need. Filters set to the dashboard will automatically be copied when a user navigates to another page through the dashboard. This makes sure the user will see the exact same selection of data on the next page.

Beside the overall view there was also a need for more detailed information and insight in what is going on in the application. So we created an activity log with more detail. The log shows recent activity, uploaded documents, comments made on objects and documents and replies to comments. Clicking on the activity leads you directly to the page where you need to be.

 The result

Even though we still see room for improvement we are really happy with our new dashboard. More importantly: our users are too. Feedback tells us where they hardly used the dashboard before, they have now incorporated it in their daily workflow. And they are acting on it: since the bar-chart with comments is in place we saw a drop of the ‘open comments’, meaning people are picking up open tasks quicker.

Our dashboard does not only offer insight to our users. Taking our time to think about how to tackle challenges offered us loads more insight in the content of our application, and what we can do with this data. Redesigning the dashboard led to many plans for improvement all around the application.

What we have learned

• Combinations of data that will give the user a more meaningful and enhanced view on the data. It is important to create combinations based on knowledge of the users workflow.
• To make use of the data shown users need possibilities to interactions and guidance to the location in the application where their attention is needed. Just looking at numbers won’t result in users being involved.
• Keeping the dashboard flexible allows us to easily add new data and insights, and to be used by users in different roles.
• By improving insight for our users we offered insight to ourselves as it was a new way to look at the data in our applications.

Any comments on this blog (or the dashboard)? Send me a message or a tweet @smiekk or @moxio, I would love to hear from you!