HubSpot Record Form Editor
Company
HubSpot
Work Done
UX Research, UI design
Timeframe
2 months
Stakeholders
Designers, product managers, and engineers on 2 product teams
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.