Victoria Whang | Product Designer
Victoria Whang | Product Designer

Blog

Things I read about, watch, hear, do...just all of the things.

Designing an interactive project planner interface - Task Pill

One of the newest developments we are working on at PowerHub is the Project Planner. The new interface addition will enable our users to build plans for renewable energy projects visually and have a dynamic resulting overview that's (hopefully) easy to use, efficient to track, and encouraging of collaboration.

At the heart of the design is the creation of task pills. Currently on the platform, users can create tasks from within a portfolio or a project and "Add New" task by using form input.

add new task form

With the update, users will continue to have the option of creating tasks using form input but a brand new visual planner view will become available. The finished product will look like a vertical, scrollable, mind map of sorts with a timeline and branches connecting tasks and key dates together. If any dependancies change, connected tasks will dynamically adjust to update the entirety of the project to show users an up-to-date idea of the project's progress.

 A single task pill in a project planner and all of the embedded interactivity.

A single task pill in a project planner and all of the embedded interactivity.

The tasks module is quite a robust feature on the PowerHub platform, both in content and how it interacts with other modules in the system. Understandably, it requires a lot of information in the visual planner as well. 

Every task has a name and a unique ID. It also has a status (open, overdue, complete, closed) and can belong to a group of tasks, for which the user assigns it an identifiable colour. If it conflicts in any way with the project plan settings or other tasks in the planner, warnings will show. Finally, each task needs the ability to display its immediate dependancies and a critical path in order to visually show relative information to the project manager, or other users with correct permissions.

Keep in mind, we hope to show around five tasks per date along the timeline and we are working with a limited amount of canvas space. Additionally, clickable icons/areas must be given at least 44x44px of ripple room in order to be useable on touchscreens. 

 Warning icon and ellipses icon overlap in their 44x44px ripple room. This will be problematic on touchscreens and smaller devices.

Warning icon and ellipses icon overlap in their 44x44px ripple room. This will be problematic on touchscreens and smaller devices.

How ever will I find the solution for this layout problem? Or have I found one already? Dum dum dum...