HubSpot Quote Rules

‍

HubSpot's quote tools — part of a deeply interconnected CRM and sales platform — were missing critical feature support for high-value enterprise customers’ businesses to create accurate and compelling sales quotes. ‍

‍

I led design on a cross-functional team with PM and engineering, taking quote rules from 0 → 1 through private beta to general availability across specific product SKUs.

company
HubSpot
timeline
90 day sprint
Role
Senior Product Designer, design lead
Tools
Figma, Figjam, Claude Code, Storybook

Outcomes

  • 11% reduction in sellers recalling and editing quotes
  • Feature platformized for adoption by other HubSpot verticals
  • 84% of quote rules created using HubSpot Breeze AI

Context

‍

Quote governance and seller workflow:

‍

‍

Design research

‍

In-depth competitor audits and interviews with customers provided key insights into their workflows and Jobs-To-Be-Done. Competitors’ offerings being used by customers were a gnarly mess of antiquated UI that was difficult to set up and manage.

‍

Customer interview artifact:

‍

‍

‍

Align and go

‍‍

I led a design sprint with other teams’ designers to map the overlap and dependencies across our features. Common jobs, pain points, and existing features were mapped at each stage of the user's experience. This exercise provided the team and executive stakeholders with a solid understanding of the problem space and allowed the team to easily identify opportunities to innovate and influence other teams’ roadmaps.

‍

Cross-team experience mapping artifact:

‍

‍

‍

‍

Customer problem

‍

By investigating customers end-to-end quote creation workflows, it was clear that customers needed a quote governance tool that would work across multiple user personas and easily scale across HubSpot's connected CRM platform and object architecture:

‍

HubSpot Portal Admins 

Tools to implement their business strategies that governed their sellers’ quotes with a high level of extensibility, rigor for accuracy within the tool itself, and frictionless setup, all using familiar HubSpot platform standards.

‍

HubSpot Portal Sellers 

Real-time guardrails to make accurate decisions when building their quotes — without being encumbered by cognitive overhead that slows down the quote building process. Minimizing the seller's time-to-close with their buyer is imperative.

‍

‍

The customer's quote governance workflow:

‍

‍

‍

Prototyping and iterating with customers

‍

Pivoting early

Initial designs had admins build quote rules in HubSpot Workflows, the same conditional logic builder used for other quote governance.

Testing with customers and reviews with our engineering partners showed it wasn’t the right fit. Setting up quote rules was too challenging, even for advanced users.

‍

Setting up and maintaining rule details would be painful using this

‍

This is missing key API access for HubSpot partners like us

‍

‍

‍

‍

‍

‍

What shipped

‍

AI collaboration with frictionless platform object scalability for admins

Admins can collaborate with HubSpot Breeze AI to build rules that define their business' guardrails and drive greater success in their reps closing deals with their quotes.

Combined with the commonly used HubSpot platform DSL (domain-specific language) editor, admins are able to effortlessly build and refine their quote rules, manage them, and analyze them.

‍

Admin quote rule setup:

‍

‍

‍

‍

Realtime quote editor rules for sellers to easily build accurate quotes

The seller's UX in the quote editor gives them smart, contextually aware guardrails to confidently build their quote through real-time guided rules interactions throughout the quote editor's complex surfaces.

‍

Rules in the quote editor:

‍

‍

‍

Keys to success & Learnings

  • Design for the user, not to the system. Being able to quickly prototype in Claude Code and in this case invalidate a design with customers or stakeholders early is priceless.
  • The API UX is increasingly important. Agents and developers need a defined and opinionated system.
  • Align early. Bringing along other teams in the design sprint allowed for our scopes and timelines to align.