Lists

Problem: HubSpot created a design system called Canvas. The goal was to make HubSpot’s technology and design language more consistent, componentized, and scaleable so our customers can learn more quickly, think less, and grow with us (more on this here on Medium). Over time, the company has transformed HubSpot from the old, disparate design system to the new Canvas design system. HubSpot Lists were one of the last pieces to move to the Canvas system.

Before the Lists redesign.

Screen Shot 2018-03-30 at 3.53.35 PM.png

Designing HubSpot Lists.

What changed and why?
1. Heuristic update: Things like list performance, export, and move to a folder were moved under a central list actions button so all list actions are in one place and prioritized based on usage. Previously, actions were on different parts of the page with different types of affordances. The intention behind this is to remove noise and make list actions more consistent and relevant to what our customers are trying to accomplish.
2. Customer feedback: We constantly hear that customers want to see more data. As a result, we made our new table more dense so customers can see more information in one view. We also heard that customers weren’t clear on the type of list they had (folks can have a live, active list or a static, unchanging list) so we prioritized that information.

Learning:
So the heuristics are terrible. So it’s ugly. If your customers have been using something for a very long time (i.e. Lists) and it’s really important to them, it’s extremely important to be careful and gradual with any changes. Especially with UI updates-if it isn’t broken (and it has a ton of usage and impact for your users), don’t change it.