Branding & Icon Design
In late 2018, a team of colleagues from HubSpot’s Product and Marketing began work to redesign the Pricing pages that appear on our website and in-app. The team quickly noticed that customers were experiencing friction at several notable points:
A number of customers indicated that they’d mistakenly purchased the Marketing Starter product when they intended to purchase the Sales Starter product - and vice versa. Although customers could conveniently purchase Starter products touchlessly through our website and in-app, it was problematic that they were quickly discovering that they’d bought the wrong product and churning.
During early stage research that team led for the Pricing page redesign, several of the participants expressed confusion about why different prices appeared as they navigated around the Pricing page. We discovered that users were not noticing that the price changed because they were toggling between different Hubs - meaning that they weren’t understanding that we offer different products for different business needs.
My goal was to develop a design framework that designers across our team could use to create promo units that fit within the app ecosystem and maintain uniqueness between units. To understand exactly what was going on here, the team took a step back and did an audit of places where “Hubs” - HubSpot’s core product offerings - were referenced to see if there were any recurring patterns.
We discovered there was very little visual consistency in the way we refer to our products across the company. Without a consistent pattern to help customers identify the offerings that HubSpot has, customers are getting lost in the product ecosystem and are not sure how products could add value to their business.
I was brought into this project to develop a branding system that would allow us to resolve this point of friction. Instead of approaching each logo as a unique one-off, I wanted to take a systems approach to create a scalable visual framework that we could continue to apply in case we had additional product offerings that arose in the future.
There were four key principles that I wanted this system to embody:
The new icons needed to be cohesive as a family, and with the overall HubSpot brand. The icons would often be viewed in context of each other, but also should be able to stand strong on its own.
The system needed the potential to quickly expand if new products are released, so branding for additional product lines can be established to support Product and Marketing efforts.
The system needed to leverage iconography that was meaningful across a number of cultures, and didn’t only cater to a US-centric mindset. HubSpot sells its products globally, so it was important to ensure that icons promote inclusion of all cultures.
The system at its core needed to distinguish offerings and establish each as their own distinct entity. Customers were having difficulty telling our products apart, so the new branding should introduce a distinct element for each line.
As with any logo system, the system took a lot of testing, exploration, and iteration to develop. I began with hand-drawn sketches of ideas, which turned into vector explorations of the options.
After several rounds of review, I found a system that seemed like it would be a winner! Connecting back to the four principles, we landed on a system that drove the design we ended up with.
I decided to use a circle as the base of each icon to represent the connection that each product had to each other. Circles are a prevalent design element in the overall HubSpot visual brand - from the logo, otherwise known as the Sprocket, to other visual patterns we have across the site. This element not only would bring unity to the system, but also tie the wordmarks to our overall HubSpot brand.
I designed the system in a way that would enable us to quickly scale it up for future products and offerings - each icon consists of a shape that represents the methodology that’s applied, placed on the core circle element. To eliminate confusion about the placement of the shapes on the circle and tie it back to our company’s methodology for growth, I placed the shapes for each product based on its placement in the Flywheel.
I decided it would be best to abstract the meaning of these icons from the functionality of the products to prevent us from selecting visuals that only served the understanding of a single, dominant culture. However, I didn’t want the icons to be completely insignificant. To create a very light thread between the functionality of each product and their icon, I explored using shapes to represent their related concepts on the Flywheel, a model that HubSpot uses to describe growth. The Flywheel is composed of three key elements: Attracting, Engaging, and Delighting customers. I used these concepts to derive the shapes that I’d use to represent each product line - a lightning bolt to represent attracting customers like a magnetic force, a star to represent engaging with quality content and relevance, and a heart to represent delighting customers with kindness and sincerity. These shapes were meaningful, but also abstract enough that they don’t correspond directly with the functionality of our products.
Selecting distinct shapes for each Hub also helped distinguish our products from each other, which was the core reason we’d initiated this project in the first place. When locked up as a wordmark, it was clearer that each product was its own, distinct entity, each with its own features and pricing.
After finding a system that seemed to work, I needed to take some time to define guidelines around how it should be used. As with any systems project, we needed to establish rules around how the logos should be used, what types of products qualify for logo creation, and more. Here are a few examples of the guidelines that were defined:
Logos would only be created for core product offerings, or Hubs, not individual features or standalone products. This would help provide a clear weight to our most important products.
The logos were not to be used without the name of the product they represented - they were designed to help with distinguishing offerings from each other, and not to be recognized as a standalone logo.
These guidelines were documented to help us sell the system and its boundaries to key stakeholders and the company.
At HubSpot, we take a waterfall approach to high-visibility projects to ensure that stakeholders are made fully aware of our progress and that the appropriate people have the time they need to approve the work we do. I took the presentation through three rounds of feedback, presenting to a number of VPs, the CMO, and eventually our co-founder.
And at the end of the day, we did it! We were able to launch our new product branding system across several touch points, including our Pricing page where we originally saw friction. To roll out the logos to the company, I wrote an internal doc that outlined guidelines, the reasoning behind the system, and more. More teams are beginning to incorporate these logos into their communications, so I’m excited to see the creative ways people use them.