Interactive Project Timeline

Workframe

Overview / Problem

Tracking progress is key to keeping a project on time. The Workframe platform is a project management and collaboration tool for commercial real estate teams. Project managers and their teams track efficiency based on how many days they expect something to take vs how many days it actually takes. Schedules are created at project inception and work is tracked and measured against the original schedule. Tasks within a project are grouped into “phases” and these phases help to measure large, important pieces of the project.

Keeping tasks on track is crucial to saving time and money in the real estate world. If a task is critical (must be completed for the project to be complete) and it becomes overdue then it can have serious implications on completing the project on time. Our users wanted to be able to view their project in a schedule format so that they can track progress, evaluate their project timeline and make sure that their project stays on time.

Key Issues

1. How can a user track their project’s progress?

2. Accountability. How does a user know what’s overdue and who is responsible for it?

Solution and Key Takeaways

The key to the success of this feature was how the interactions of the timeline/schedule work. After extensive user testing with a live prototype, I was able to specify how people wanted to use the feature. It was essential to create an interactive prototype because a static mock would not be able to capture the core issues that the users would have when interacting with the feature. I worked with the engineering team to build this as a plugin for our existing interface so that users could see their existing task list transformed into an interactive timeline.

After testing with multiple clients and our internal team, we were able to figure out what would make this feature usable. Users wanted to zoom in/out with the time scaler, see what information was important for reporting, and be able to expand the current view you’re looking at to see more details of the task. Users also wanted to be able to see which task was dependent on another task so that if on item was blocked or overdue they knew why the rest of the schedule was no longer on time. I was also able to make adjustments to how we were displaying phases (groups of tasks) so that users could roll up their phases and get a zoomed out overview of the entire schedule (without looking at the detailed task information), which is critical for reporting.

The reason why we decided to build this feature was because the task list view that we originally had built was not sufficient for project managers. The list view did not allow them to see a holistic view of their project and, being used to gantt tools, they wanted to be able to view everything as a timeline and interact with that timeline as they are accustomed to doing.

Usability Highlights

1. Users can zoom in and out to see their entire project timeline or zoom in to see a quarter, a month, or a week. We did this based on percentage intervals so that they could zoom in and out and it would not matter if the user’s enter project spanned one month or 5 years.

2. Users can hide/show the overdue highlight

3. Users can scroll left/right/up/down to view various tasks within their timeline

4. User can click directly on a timeline item so that they can view the details of a task to understand why it’s overdue and what is causing the problem, or just to simply view the status.

5. Overall, users can have an understanding of their project’s progress based on today’s date and understand why things are overdue or not running on time (if that is the issue).