A Closer Look at the Project Management Dashboard Prototype

In this video we’re going to take a look at how we used Indigo Studio to create a prototype that demonstrates key interactions in the project planning dashboard application.

Examining the Pieces of Your Prototype

The primary project information is displayed along the top, so the user can easily check the status of the total budget, tasks, and hours. The sliding menu on the left side allows the user to navigate between current and upcoming projects. The collapsed menu shows only the client name and a gauge displaying project status.

The large table in the middle shows a week by week breakdown of all the resources working on the current project. For each resource, we can see the hours that have been worked in past weeks, as well as hours that have been allocated in future weeks. The scrolling lists at the bottom show project tasks, and the resources assigned to them.

Preview Interactions and Finalize Your Prototype

Now we can run the prototype to preview the interactions. Selecting the second project shows that there is a resource at risk of going over budget next week. We can reallocate hours by selecting a week, which also selects the corresponding task and assigned resources. Clicking the “add resource” icon opens a list of available resources from the right. After selecting a new resource, we can use the arrows to adjust the distribution of hours.

When we’re finished updating the project plan, clicking the “done” icon saves the changes and reflects the changes in the table above.

Get the Code!

Now that you know how it works, check out the link below to download the Sample application and make this dashboard your own! You can also view more videos about the making of this dashboard on our YouTube playlist.