Gantt's long road to TeamLab Office. First Person Story

Since we published this , we have no more questions about when the Gantt chart will be released. Everyone understood: just a little bit was left to wait. Of course, we did not score the unfortunate thousand hearts, but we still released a diagram.

Gantt chart really was waiting for everyone. They waited almost 2 years - and users, and the marketing department, and management. In the feedback and suggestions section for TeamLab developers, the Gantt Chart has long been in the first place with the number of votes exceeding 1000. So why did you have to wait so long? This time we decided to give the floor to the direct participants in the process.

A Brief History of Creating Gantt Charts in Faces

Alexey Kazakov , head of the design department
The first attempts to design a Gantt chart were made two years ago. The task was set to “simple”: to create a complete visualized tool for working with projects, alternative to the existing one (lists of projects, milestones and tasks).
After analyzing the analogues, we proceeded to prototype mockups, deliberately not limited to the functional plan. The first version visually consisted of 3 slices: for projects, milestones and tasks with the interconnections of objects for each slice, developed filters and sorting, zoom tools and quick timeline scrolling. The prototype for the most part covered the functionality “for the future”, since the current capabilities of the Projects module did not make it possible to fully implement everything. As a result, we decided to pause and postpone the chart until better times.



The “best times” came at the beginning of 2013, when the Gantt chart took first place among the wishes of users. It was decided to resume development, this time starting with minimal functionality in a single project. Most controversy caused the layout of the chart. The traditional approach won, which for us, as designers, was a little disappointing. But we will still fight for our ideas)

Julia Yakutova , programmer ( JuliaYa )
At the very beginning of development, we were asked to make a diagram at least for viewing, so that you could see the project in a graphical representation. So it all started with the visualization of the project in the form of ordinary rectangles (tasks) on canvas with reference to the timeline. As soon as something began to take shape, everyone wanted to somehow interact with these colored rectangles. And then off and on. We were inundated with mock-ups with how, what and where should move, what needs to be finished and painted. As soon as we managed to finish something on one model, the next one fell on our head, often canceling what we had just finished doing. This, of course, is understandable: when you can interact with the prototype, new ideas immediately appear on how to make it even better.

To the final version, our Gantt chart went in small steps through trial and error. For a long time they could not figure out how to display tasks without an end date, and how to work with such tasks in general through a diagram. As a result, we came to what you can see now - lines with an infinity sign on the right side.



There was a lot of controversy about the format of working with the chart: add hot keys or carry out all actions with the mouse only. As a result, we have so far settled on the second option, and using the keyboard we can only write the names of tasks and milestones.

Now the view of Gant, naturally, seems logical to us, but when I remember how we came to this, new ideas immediately arise that I really want to implement! We have to put them in the “box” until the next version - you need to finally be released!

We summarize: what our Gant can do

In order not to be too verbose, we just leave this video here:



And if someone wants more details, then welcome to our blog.

About implementation details and future plans

Mikhail Grunin , Senior Testing Specialist
The diagram was one of the most difficult testing projects, because includes the interaction of the entire module "Projects", graphic display, speed and ease of use. But we did it - thanks to the developers for the quality fix of bugs. Most of all, we are proud of the interactivity of our diagram: you can quickly change the scale with one motion of the wheel. And of course, we made a number of proposals for the design department: the ability to carry out group actions, move tasks in all planes at once, add more hotkeys. So in the next version, our Gant will be even better!

Pavel Bannov , Senior Programmer There
are many ideas for the following releases:
Firstly, we plan to add the ability to visualize several projects at once, because Now everyone has their own Gantt chart. In the future, we will make it so that tasks from different projects can be linked together and, thus, get a complete picture immediately for all projects of interest.
Secondly, we definitely optimize for tablets so that it is convenient to view the chart in full screen mode. Now the left panel “eats” a lot of space, and there is almost no room for Gant.
Thirdly, the next release will have the opportunity to set task statuses and priority. This will also be displayed on the Gantt chart.

PS How to find a Gantt chart in TeamLab Office

Go to the "Projects" section and open the project you are interested in. In the upper right corner you will find the Gantt Chart button.