Redesigning Gantt: the Challenge, the Process, the Result
Five years ago, when SoftwarePlant was a small start-up, the company decided to create a Gantt chart as an extension for Jira. It would help to visualize issues on the timeline and, over time, turned into a complete solution for Project Portfolio Management. Two months ago, we launched a completely new version of Gantt.
Redesign reasons
When SoftwarePlant started, the most popular 3rd party Gantt chart library (and probably now) was DHTMLX, which offers a lot of possibilities and features. Still, it has some limitations, which didn’t allow us to implement the critical changes expected by customers. Over a year ago, during one of our internal hackathons, a group of developers wrote a component for Gantt using Angular technology, and the new development era started. Our Product Management almost immediately made corrections to the product roadmap and recommended continuing work on the Angular Gantt. Angular opened a way for us to implement new features that we were not able to add before.
My role
After that, my team leader approached me to ask if I could support the development team and be responsible for UX research and design of the new Gantt chart. I was both scared and excited because I’d never been responsible for such a big project before. But it was an excellent opportunity for me to grow as a UX designer, so finally, I said yes. Invaluable help during this journey came from the people on my team, Ola and Marcin — big thank you for your support and ideas! I also work alongside a Product Owner and developers, taking part in their daily stand-ups. So let’s have a look at the redesign process!
Redesign goals
We defined three main redesign objectives:
- Replacing and improving old features;
- Improving management processes on the Gantt chart by enabling new features;
- Refreshing the look to match the rest of the app.
Users’ pain points
The first two objectives were related to users’ pain points, so they were our priority. Our primary source of knowledge about users’ problems is the Support Team. They are the first front line when it comes to complaints and customers’ needs. Second of all, we went to a team of consultants who help customers to implement BigPicture and BigGantt. The definitive source of information about the users is hotjar. We viewed hours of recordings where users tried clicking on different spots, which are not clickable at all and expected some specific results. Direct observation provides qualitative data, which we wouldn’t get if we only looked through Google Analytics. Based on that, we created a list of the most urgent changes that we needed to make to the Gantt module.
Competitive analysis
We are not the only application on the market that offers a Gantt chart. There are more and more similar products, such as Teamgantt, Proggio, Proofhub or GanttPRO, so we have someone to compare with, and get inspired by (By the way, you’re doing a great job, guys!). During this competition analysis, we review the features, write down their pros and cons, check the layout, system feedback, or information architecture, to name a few. Why all this?
Good UX replicates known patterns, so the user doesn’t have to learn it all over again.
Look at Google Docs and Microsoft Word, these are two very similar programs, even though the competing companies create them. The last but not least, it’s all about inspiration.
First mockups
The next step was to create the initial sketches, keeping in mind our previous research. I started with the simple layouts in Figma using colors from our new palette (it was just after Atlassian introduced its new branding). Each Gantt chart has the same items: timeline, rectangular tasks, grouping elements in the form of a clamp, rhombus-shaped milestones, and arrows as dependencies between the tasks. My job was to redesign them.
When the essential elements of the jigsaw puzzle were ready, I designed the next features from the priority list, which we defined together with the Product Owner. Let’s dig deeper into the redesign process for some of them.
Designing tasks (again and again…)
In the beginning, it seemed so easy. What may the task look like? Like a rectangle, obviously, but then things got a lot more complicated… We decided to add new attributes on tasks like summary, assignee, date, work progress, etc. We had to figure out how to combine all this information on one task. Some of the attributes did not go hand in hand with others, some of them were covering each other, some appeared only sometimes, and others were to be displayed permanently.
Problems arose when the task was very long or very short. Formerly, the name displayed in the middle of the rectangular task was sometimes not visible on the screen; in the second case, it merely did not fit into the task rectangle container. Often, something that was functional did not always turn out to be pretty or vice versa. It wasn’t still possible to predict some of the corner cases, and during the development, we had to make quick decisions on which way to go. Luckily, our developers are very patient and willing to help us to come up with solutions.
It is worth asking programmers about limitations and technical possibilities because you can discover something new that you haven’t thought about before.
Zoom in on the scale
The scale is just a never-ending story. The first idea was to reproduce the timeline as in the previous Gantt version, but with the zoom in and zoom out mechanisms as buttons. Ola (my teammate) described all the steps of the scale from the smallest to the largest. The specification had a detailed description of each level, together with the labels to be displayed, the appropriate widths and the mechanism developed for the different screen sizes.
Developers found it too complicated, so they needed a more straightforward idea to implement. For them, the easiest way to go about it was to code the different levels of the scale, like days, weeks, months, quarters, and years, and then, depending on the view, select the appropriate three levels and combine them. It sounded logical and was a good compromise for us, but we had already lost a few months of work. At that point, I thought the topic of scale design was done. However, developers started to come up with questions “what if…” and we had to solve a lot of tricks on an ongoing basis; for example, (as in the case of tasks) some scale levels were long and there were no visible labels on them.
Finally, developers added a CSS class “position sticky,” and we were rescued! Another thing, some users work on a weekly view instead of a monthly view, and at the highest scale level (more than 1-year views), the labels didn’t fit week numbers. We solved it by hiding this level at the most top scales. Finally, we had to prepare several versions for the scale levels, e.g., days of the week as “Mon, 1” or just the number “1” so labels can fit the scale cell.
Users’ feedback
In the meantime, the idea of setting up a BigPicture LAB has come up, and we started with UX Research. We divided users into groups and made contact with those who use the Gantt module. First, I sent out a few questionnaires to design more features based on the answers. Next, together with the launch of the new Gantt, we inserted a poll in the application to collect feedback for particular elements, e.g., scale changes or creating and editing dependencies between tasks. To our surprise, over 300 people took part in the survey! Finally, two weeks after the release, I had dozens of interviews with users who had had the opportunity to test the new module, and that was a fantastic gain. In my opinion, these discovery meetings are the time when you can find out the most about your users, and so it was in our case.
Final design
During the process, we didn’t work much on the architecture information. We had a lot of feature enablers in the header, which made it a little bit messy. Finally, I removed all the labels from the buttons and added dropdowns in the header with new categories. It brought more order at a glance, but under dropdowns, there is still much more work to do. Since the decision to redesign, we have had at least two more hackathons, during which the developers made some additional features like the Infobar with an overview of Dependencies and Milestones. All these steps led me to the final version of Gantt, which you can see below.
For comparison, see the old chart:
We are now somewhere in the middle of this journey. We’ve just released the beta version of the Gantt, which means that we finished almost all of the set objectives. We’re also analyzing the feedback from IDIs and planning further product roadmap. 1 to 1 interview gave us a lot of insights. Conversations with real people who use our application were magical, and nothing can replace ideas coming from them. I’m glad that I can be a part of the Gantt redesign team!
