Record Vision

 
 
 
 

The Challenge: The record page (shown above, a ‘profile’ page for CRM objects such as contacts, companies, and deals) is the heart of HubSpot’s CRM, which is the heart of its platform. With over 100 million page views per month, it is the most visited page in HubSpot, serving as a nexus for an object’s properties, activity, related objects, tools, and apps.

Its structure, however, no longer serves the influx of data and functionality that has been added to the record since it’s last major redesign. Our UX researcher boiled the record’s challenges down into the following three themes:

  • Scalability - Record pages aren’t scaling with the rest of our system, especially the objects they represent.

  • Object Blurring - Reps are getting confused about where their information lives in the CRM.

  • Orbital Usage - Reps are forced to navigate the CRM and work in ways that don’t match their preferred workflows.

Solving for: Primarily sales reps, but also support and service reps

Role: One of two designers tackling this project. When this work began in Q3 of 2021, I was already set to switch to the HubSpot Commerce team in Q1 of 2022. Colin, my design collaborator on this project, had just been hired as my backfill. I was the primary designer on this project and was concurrently helping to onboard Colin, while he was more in charge of stakeholder management in order to start building relationships across our product. We worked closely with a UX researcher and content strategist.

 

We started our project by hosting a workshop with individuals from 8 teams across HubSpot in order to generate quick hypotheses based on our established challenges. It was a great way to build up excitement, awareness, and feelings of ownership across these teams for this work.

The following recommendations from team members in our workshop served as a jumping off point for our initial design sketches:

  1. Move away from the 3-column record

  2. Clearly mark what’s new or changed

  3. Make it easier for reps to take action on records

  4. Explore new adaptations and wayfinding patterns

  5. Explore new views that relate objects to each other

  6. Enhance customizations

  7. Experiment with an intelligent assistant that follows reps as they use the CRM and guides them on the next, best actions they can take

  8. Test different formats of record pages based on object type, deal stage, and other factors, some of which could be customizable

  9. Explore means of bringing record info to reps wherever they are in the CRM rather than forcing them to go to a record

 

As an additional input before our sketching round, Colin and I organized top tasks for Sales and Service reps based on previously published research studies at HubSpot.

 

Colin conducted a brief competitive analysis.

 

Given my 2+ years being a primary designer for the record page, I was also able to incorporate my deep knowledge of our users’ needs and daily struggles into the below sketches that I completed for our initial design round.

 

After discussing as a working team, we decided to move forward with testing 3 layouts from my sketches. Our UX researcher took the lead on writing the research plan for our two-part, scenario-based cognitive walkthrough of these record design concepts.

Concept 1 - timeline

Concept 1 - data

Concept 1 - associations

Concept 2 - timeline

Concept 3 - timeline

Concept 2 - data

Concept 3 - data

Concept 2 - associations

 

Interestingly, the users in our research sessions validated many of the recommendations our team had surfaced in our earlier design workshop.

The most prominent finding from our research were that users needed flexibility based on different object types, and that they needed to be able to quickly find the most relevant/actionable pieces of information, which might not necessarily be the most recent.

We made one more round of designs based on our findings, choosing hold off on an additional round of concept validation in lieu of planning to test and hone individual features and functionalities as they’re added to roadmaps over the next year(s). Our final designs can be seen in the below presentation I made with my co-designer, Colin. I walk through our proposed design changes from 3:50 to 9:10.

 

Full, HubSpot public project writeup completed by Colin and myself with leadership comments at the bottom: