HubSpot Record Form Editor

Overview

The HubSpot CRM is the database that powers HubSpot’s sales, marketing, and service tools. The database is powered by objects that allows customers to represent different parts of their business like their contacts, deals, and service tickets. In 2020, HubSpot launched a Custom Objects, which allowed customers to define their own objects. In this project, I used cognitive walkthroughs and usability testing to get buy-in for a redesign that would improve the setup of existing objects as well as scale to accommodate custom objects.

The Record Form Editor

The record form is a list of fields users have to fill in out in order to create a new object record in the HubSpot CRM. For example, if a salesperson wants to create a new deal, their account admin may require they enter the deal’s name, stage, and close date in the record form.

At the time of this project, the record form had co-ownership across two product teams: My team owned the experience of an end-user creating a new record, and another team owned the experience of an admin setting up the form. In preparation for the launch of Custom Objects, my team was tasked with adapted the existing editor to new objects. We initially anticipated this to be a largely engineer-led effort. However, as I evaluated the existing editor, I quickly uncovered usability issues.

Cognitive Walkthroughs to Get Team Alignment

I needed to convince the two teams that the current experience was painful enough that we needed to reprioritize our work to improve it under an impending deadline coming up with the launch of the Custom Objects. Grabbing from my UX tool belt, I ended up hosting a cognitive walkthrough with the two product teams who co-owned the record form. The goal was to walk through key tasks in the record form editor and identify any bugs, paper cuts, and opportunities. I also invited a product designer from an unrelated team to serve as a neutral participant.

11 issues uncovered from cognitive walkthough

The cognitive walkthough was a success in building empathy for the customer and identifying 11 issues in the current editor experience.

Improving the editor

Leaning on the issues uncovered from the cognitive walkthrough, I created an improved editor that I presented to the team, making sure to credit them for the issues we uncovered. I even got one of the engineers on my team to create a low-fidelity prototype to demonstrate the interactions in the new design, which we later used in usability testing. To seal the deal, I also presented the improvements as a broader product team demo-day to bring more visibility and excitement to the improvements.

Usability Testing

Method

45-minute moderated usability testing

Participants

Internal participants (customer-outreach was frozen due to Covid). This included 3 operation folks, a HubSpot Academy professional, and a customer onboarding specialist

Tasks

6 tasks that were also used in the cognitive walkthrough, which allowed us to compare results.

Issues from usability testing

Overall, usability improved from the new design compared to the cognitive walk though. However, some key issues uncovered from the usability testing included

• Discoverability of the editor, which was later tackled in a project I did to improve CRM settings.

• Participants didn’t feel confident publishing their changes because

  • They were unsure where the form would appear

  • They were unsure the impact of new required field on the existing records in their CRM.

Improvement made following usability testing

Rollout

The improved editor was initially rolled out to a small group of customers in the Custom Objects beta to get feedback and then to to greater release with the public launch of Custom Objects.