The Making of a Project Management Dashboard

In this video, we take a closer look at the creation of the new Project Management Dashboard built by Infragistics. Justin Fraser, one of the senior project managers at Infragistics, manages most of the company’s service projects. One of the challenges he faces is in resource management. Understanding how many hours someone has to work, what they've been working on, and what they're going to be working on in the future. When a project changes, and gets delayed or extended, Justin has to adjust quickly and understand how that change is going to influence the other projects that are coming up.

Justin was looking for a dashboard to see at a glance all his projects in real-time, and understand how they're progressing. He also wanted to be able to see how the resources are doing: Are they over-allocated, or under-allocated, so he can make adjustments in the future.

Right out of the gate, we wanted to fully understand what it is that Justin does. We sat down with him, watched him work, took some notes, felt like we got a good understanding of what he does. We realized he is dealing with a ton of information in a bunch of different places. Right then and there, we determined our goal was to simplify his job a little bit.

One thing we noticed was that he was jumping from different spreadsheets all the time, and doing a lot of calculations in his head, so, we were thinking that it would help if we could create a dashboard that allowed us to do some of those calculations for him and let him just make decision based on the information he saw, not do the math himself.

We realized that, because of the breadth of this project, and the size of it, we really wanted to have a lot of information available, which makes my job as a visual designer a little more difficult, because, how do take all that visual information and make it available?

After the discovery phase, we learned that project managers were always on the go, so they needed the flexibility of an app to go with them. HTML 5 and jQuery made it portable enough to build it so it would be on laptops, desktops, and mobile devices, and also an app for quick development. The Ignite UI platform has a plethora of data visualizations, and for this project we used the doughnut chart, the hierarchical grid, the grid, and the linear gauge. The linear gauge was used for the resource allocation chart, which, not only represented the data pretty nicely, but, it also had grid integration which allowed us to load up the data pretty quickly.

Having worked with Justin in the past, we were about able to observe some of the things he does on an everyday basis. With this project, we were given the opportunity to design a dashboard that provides someone in his position with all the information that he would need to answer any question.

The core of what Justin does is really, resource management. The resources are what make the project run. You'll notice in the dashboard, that there's a main focus on looking at the existing resources on a project, looking at your pool of available resources, and being able to assign different people and adjust schedules accordingly.

Indigo Studio definitely played a big role in the collaboration of our team. Our team was able to create an Indigo prototype, take that and create a visual design based off the idea our designers put together, and then we were able to take the visual design screen and the prototype and create a working animation or a working developed final product.

In the end, Justin loves that he can change project information on the fly, and see how that impacts the projects down the line. If he wants to add another resource to a project, he can see what the impact of that is. Now that he has this dashboard, Justin is happy to report: “I'm much more efficient at managing my projects. I can use it so that I make sure my projects end up being on time, on budget, and on scope. I was really impressed with the way that the UX flows into the visual design. The wire frames turn into screens, which now turn into a dashboard, that's become so useful for me. I really recommend using Infragistics, because, at the end of the day, I have a tool that meets my needs, and is going to make me more successful in my day to day life.”

To explore the dashboard on your own, get the code here! You can also view more videos about the making of this dashboard on our YouTube playlist. Happy coding!