Project managers: build a nice and simple timeline for project diary and deliverables

A timeline home base page for your projects is for me one of the best way to track, communicate and quickly understand the health of your project.

What was this morning scrum content?
Where are we with the designs? Can I see them?
Did the client sign off the requirements? Are they cleansed and summarized?

Hours later, I finaly manage to get every meeting latecomers (or should I say ‘scrum haters’…) up to speed. But what if you were able to centralize all you need to communicate on a project (status, new risks, achievements, UX, designs, etc.) with a clear and easy timeline? This was my approach on my last project: huge team, many resources not needed in the scrum meetings when kicked off (or should I say not available?), clients on different time zones, thanksgiving/christmas breaks, lalalalala-lala-la-laaa (christmas theme).

What to include:

  • In the next scrum (to dos)
  • Deliverables
  • Milestone strikethrough
  • Scrum content
  • (and many other if needed)

The order is volontary as my timeline is arranged by date DESC (um, I probably need to tell you I was/am a web dev on my free time) — i.e. today’s day on top of the page, this way ‘scrum content’ is next to the previous ‘in the next scrum’.

First entry on your timeline should introduce the project with the client reference: initial contact on the project, PIF, requirements sheet, deadlines, possible project phases…

What does it look like? Flat, responsive, lazy (load) and easy to custom

Opened view
Closed view
Responsive view

The core of this build is coming from a codrops blueprint (thanks)

Where to find it: any suggestion on how to improve is welcome (please comment)

Click here to download the zip file (tested on Chrome 31.0 FF 26.0 IE10)

Some basic HTML knowledge is required but come on, we are PMs right☺:

  • Change or remove <nav> entries depending on your project
  • Copy/Paste <!— BEGIN POST → to <!— END POST → to create a new entry in the timeline
  • Change the value of <input type=”text” value=”86” class=”dial” /> to get the right status in each circle graphs

Hopefully you have a sharable and secure hosting solution somewhere (even a company drive should suffice for non-client content). Don’t forget to send your daily status email though.

Of course this is one way to go and we all have our tools (offline and/or online) and processes. This is ‘just’ another clean and simple way to communicate on your baby project! And maybe at some point I’ll build a CMS around it [crazy-face].

Muffins and unicorns, stay tuned!

Jules de HAAS

Email me when Jules de HAAS publishes or recommends stories