Hi hacknplanners!

This update is a special one. Instead of delivering new features, we focused on rebuilding one of the most important parts of HacknPlan: the drag and drop system. Many of you have complained during this last two years about the performance and usability of the current drag and drop system, which is one of the oldest pieces of code of the application and a complex one because many things are built on top of it. The issues were many: poor performance with crowded boards and long lists, some delay when dragging elements, drop section limitations, scroll issues, bad functioning on mobile…

These last few weeks we focused on building and testing a new drag and drop system that will solve most of these issues and will improve the overall user experience. Besides the improvements you can notice today, there are also plenty of new possibilities this new system offers which we will take advantage of in the near future for improving the usability of the application (drop to a trash bin, drop users into task cards, drop cards into another category or design element…).

NOTE: Although we spent a lot of time testing this new drag and drop system, the complexity and the depth of the changes and the huge number of possible scenarios, browsers, and operating systems, make this one a sensible change. If you experience any weird behavior, please report it as soon as possible and we will fix it immediately.

Let’s take a look at the details about this important release.

Features and improvements

Boards

If there is a part of HacknPlan where drag and drop is critical is the kanban board. Manually sorting or moving tasks among stages is a common task everyone in a team is normally involved in, so it needs to be efficient and performant, especially as lists grow. The most relevant improvements on the board are:

• Faster reaction to drag: Unlike the previous system, the drag is immediate, and the movement of the task among columns is faster.
• Improved drop: The old system required you to drop a task right below the last one of a column if you wanted it to be the last one. Now you can drop the task at any point of the column, and the task will be dropped automatically at the end of the list.
• Scroll while dragging: Can you see the colored header and footer every column has? Besides their visual function, they are also helpers you can use to scroll up and down while dragging a task card. Just move the card over the header or footer and the list will scroll up or down respectively.
• Mobile support: We have replaced the normal drag and drop functionality on mobile; you can now drag the task cards from a handler (with the icon of an arrow cross). This allows you to easily drag and drop the cards without interfering with touch gestures for scrolling.
• General performance improvement: We have improved rendering times by optimizing our web interface, which will make boards load faster.

Game Design Model

The GDM section hasn’t been improved that much, but we still managed to improve the mobile support by adding the same handler system to avoid scroll issues.

Other lists

The lists of master data of projects, such as categories, stages, design element types… have been improved too, as well as milestones and user lists. They are faster, with better scroll and mobile support.

Bug fixes

We saved some time to fix a few bugs you reported:

• Some special characters on file names caused attachments to fail. The file names are now sanitized to avoid this issue.
• After canceling a Studio trial, the project list was not refreshed, so projects didn’t appear on your personal project list.
• Reducing Studio seat caused some users to be wrongly removed from the organization.
• Modifying the master data of a project (categories, stages, importance levels…) was not refreshing some cached lists, which caused the edited elements not to appear correctly until page reload.
• Completed milestones were not appearing on the Gantt Chart. We added them including a dropdown to enable or disable the feature.
• When a non-registered user was invited to a project and that project was added to an organization before the user registered into HacknPlan, the user was added to the project but not to the organization, getting to an inconsistent state where the user wasn’t able to access the project.
• There was a problem making advanced filters (premium) not editable on some scenarios.
• The work log UI and email notifications were not showing the formatted value (using 10h 5m format for time).

What’s next?

The improvements on the drag and drop system took a bit more time than expected, so there are plenty of other improvements we wanted to add we will address in the next iteration. Things like more sorting and filtering fields, creation of design elements directly from the selection dialog, creation of tasks from subtasks, integration improvements, etc. We will also take some time to work on our server infrastructure: we are improving our setup for better performance and scalability, something that will be very beneficial for everyone as the number of users and server load grows.

Tell us what you think about the new drag and drop!

Happy planning!