Calculated Properties

Problem: A Sales Manager wants to calculate her commission for the quarter. She exports her HubSpot data, pastes it into an excel sheet with a commission function (deal revenue - deal cost * % commission), and then imports the function’s output back into HubSpot and creates a new property. She has to do this repeatedly because she needs to calculate commision every month. She’s exporting and importing data and writing functions in excel instead of coaching her sales reps and closing deals.

Illustration by Loe Lee

Illustration by Loe Lee

Solution: Calculated properties. Customers can create a HubSpot property that is the output of an equation. They can add, subtract, divide, multiply, and also do sums, averages, minimums and maximums. Because our Sales Managers are very busy and don’t have time to learn syntax, we kept this experience simple and highly opinionated. We also wanted to get a version 1 solution out sooner so we can validate our solution more quickly and learn more quickly (for example, at the time of this project, our back end did not remember the order of variables and operators so we made it impossible for customers to have multiple division and subtraction operators in one expression). Behold! Calculated properties!


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 Canvas

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

After Canvas

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.