• How building a design system empowers your team to focus on people — not Pixels.
  • Mariah Muscato
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: pmwangyang
  • Proofread by: Rydensun

This article is about our new design languageHubSpot CanvasThis is the first of a series of articles.

There’s an old comedy sketch about a mailman who loses interest in delivering letters — he’d rather deliver tacos.

In this skit, a man waits by his mailbox for the postman to appear, asking him why there is no letter in his mailbox. Although he also likes tacos, he said, “If I had to choose between tacos and mail, I would have to choose mail.”

Tacos are more exciting than a bill in the mail, but this man doesn’t need tacos, he needs his mail.

HubSpot’s customers want a product that is consistent, powerful, and enjoyable. So the HubSpot design team needed to create a design system that would help us meet these needs on an ongoing basis.

Over the past few years, we have:

  • Created a new design language (we call it “HubSpot Canvas” and we’ve been doing a lot of work on it)
  • We redesigned the HubSpot platform and updated the visual identity of our brand
  • Established a living design system that can be expanded as our business progresses

To make this happen, we need to invest in people. We’ve expanded our UX team from 14 product designers, 2 researchers, and 1 writer to over 34 product designers, 8 researchers, 3 writers, and 1 product illustrator (and are still hiring).

That’s the story of how we dedicated ourselves to delivering the mail (and taking a few tacos in between).

Why did we redesign

We needed to redesign the HubSpot platform for two main reasons. First, better deliver on the promise of our brand. Our clients love the HubSpot brand. It’s fun, it’s dynamic, it’s personal. But the current product is not, and it is not worthy of the effort that the customer has put into the business.

Second, eliminate the inconsistencies that creep into our UI. Our user interface is inconsistent across the platform, making it hard to use and difficult to navigate. Take two modal pages in Marketing Hub for example:

Notice any inconsistencies in button position, TAB design, and interaction modes? These inconsistencies add a cognitive burden to the customer, making it difficult for them to perform something as simple as saving or closing a conversation, which slows down their productivity every day.

So we decided to start by collecting user feedback on the current design, which wasn’t “beautiful” but was valuable:

“It looks more complicated than it needs to be.”

“There are so many options, I’m overwhelmed.”

“A bit of trypophobia, no white space.”

“The color match is out of date and it looks bad.”

“So much gray, everything seems to be surrounded by little boxes.”

“Boring.”

We recognized the need to radically reorient and dedicate our customers to their personalities, quirks, motivations, desires, and even (or especially) their anxieties. In the end, we decided to give our product a completely new design, like the ordinary apps our customers use every day, that not only looks good, but is also easy to use.

But then came the harsh reality:

Redesigning our platform meant we had to split 40-plus product teams across two continents. It also means that we need to divert some of our design and engineering resources from creating new experiences so that we can fix existing resources. And during launch, our support and service teams and customers need to constantly adapt to product changes.

We started this process knowing that we weren’t just going to start redesigning our products — we needed to completely rethink the way we design and build products.

We first need to understand what is causing fragmentation and inefficiency in our organizational architecture and workflow, and replace it with effective instances and systems.

So the first part of the story is how we define those challenges, how we go about redesigning our products, and creating tools that empower our design teams to be as consistent, efficient, and autonomous as possible.

Root of the problem

Last year, my parents decided to sell my childhood home, and I was enlisted to help clear out the attic — a space filled with 20 years of accumulated clutter. As you might imagine, I threw up a million gripes during the cleanup. Like, “WTF, we’re keeping this thing? Awesome!” But more like, “WTF, why do we still have ’87 Beanie babies?”

Well, in the same way, our design team first had to review every component we imagined, developed, and delivered at HubSpot over the past decade. We need to get down to the level of detail to better understand how the current product experiences. Each designer was asked to go through their respective apps, finding each component, capturing it, naming it, and archiving it for review.

Here’s a quiz: How many date pickers do you think are “too many”?

Three or four?

Well, we have eight now.

Here are some other things found in our “attic” :

  • More than 100 shades of grey
  • Three different fonts correspond to more than 40 text styles
  • 16 different styles of modal pages
  • 6 different main level buttons (meaning no main level buttons at all)
  • Five table filtering modes are available
  • Confirm the action on the left side of the modal page
  • Confirm action is on the right modal page
  • Thousands of lines of custom CSS

Here are all the button styles that exist on HubSpot at the same time:

Do you have your button styles here?

What caused this? Why do we have so many buttons? Why do we have so many date pickers?

Here’s a real Slack conversation from those old, dark days:

Let SaaS stop these pointless discussions.

The truth is, none of HubSpot’s designers or developers really wanted to spend time reworking the date picker.

We realized that the reason our team had created so many seemingly diverse but essentially identical styles and components was that there was something obviously wrong with our organizational structure. In short, it seems easier to build something new, and harder to detect what is working.

HubSpot’s product team is built around small, autonomous teams that address customers’ specific needs. This allows us to grow quickly as a product development organization and respond quickly to customers’ changing needs, but this approach presents challenges in keeping different product teams aligned.

When you have over 40 product teams that can build, release, and iterate quickly, it’s really easy to lose sight of the overall customer experience, and focusing so tightly on one particular issue often means putting blinders on everything else. Because of these blindfolds, our designers and developers unwittingly re-create existing elements, components, and patterns in the user interface, leading to fragmented user experience and mixed design, as well as technical debt.

Our small, autonomous team structure is not ready to change — it’s part of our DNA. So clearly, we need to put more effort into creating tools and systems that better align our product teams. By connecting everyone to a centralized design system, a unified user experience is ensured while continuing to evolve.

This frees the minds of our designers and developers from “pixels” and gives them more time to think about “people”.

principle

Reviews can help us identify problems in the design process and identify aspects of our development culture that contribute to inefficiencies. But before we create a mood board, before we study typography, before we get into a heated debate about the perfect shade of orange, we need to talk about principles.

We need to reach consensus on our core beliefs, which are the only standards we can rely on when faced with hard choices, and we need to discover the ideals our team feels it is responsible to uphold.

So the design team did some conceptual exercises to build the foundation of our new design language. We argued, we sorted, and we identified five core design principles that guided us through a million micro and macro design decisions.

These principles are:

Clarity Our design principles are clarity and focus, and our work helps users make the right next step choices in terms of functionality priorities, visualization levels, and context recognition.

Humanizing We cultivate a sense of humanizing the experience that resonates across cultures, and our work provides interesting and elegant interactions with users every time.

Inbound We have strengthened the message and meaning of the Inbound method, and our work has made the Inbound path clear to the user to help them understand why it is correct.

Integration We simplify the user experience by creating unified systems that address their needs, and our work helps users achieve great goals by providing improved, efficient methods.

Collaboration We design powerful systems to encourage people to work seamlessly together, and our work helps people create and collaborate with each other in a natural, intuitive way.

These principles help us stay consistent and focused as we redesign many of the details of our product. You can change button color, line width, and header size, but you can’t change your basic beliefs. In these aspects of design, you must remain firm.

A new visual Angle

Our design team held several meetings to redesign the core pages in our product, then selected a group of four product designers to spend a week fully engaged in concepting, designing, and ultimately testing several different visual directions with the client. These sessions led to some very different design directions that we felt were new and exciting.

Drew Condon and Jackie Barcamonte, two members of the design language team, came up with the original design concept.

HubSpot’s old design

Is it refreshing? Different, exciting, and distinctly different from the dull, dreary “business software”.

Through several rounds of surveys and interviews, the design language team and the client finally tried three different design directions. When we read the following statement, we know we have found the way to success:

“It makes me feel more productive.”

“I feel great, and I think I know exactly what TO do.”

“That’s fun. That’s the HubSpot I want.”

“The next generation of web pages.” (Some people actually say that)

“It doesn’t look like commercial software.”

“It makes me feel in control.”

Here are the evolution of the client’s favorite design directions we interviewed:

HubSpot’s old design

The most popular design for the first round of interviews

Improved design of the second round of interviews

Once we had users validate our design direction, it was time to apply these visual styles to all of our core UI components. I’m talking about hundreds of components: buttons, links, query boxes, tables, locations, modal pages, input boxes, pop-ups (the list goes on). This is the less fun part of the redesign, but it is more meticulous and energy consuming.

But this meticulous, energy-consuming work is a long-term investment for our company and our clients. I recall a Friday afternoon when the design language team and I spent a full two hours in a meeting that left us devastated.

Our job that day was to determine margins and margins for most of our individual components (buttons, controls, input fields, and so on, which are fundamental elements of our user interface).

The meeting was attended by five people, and we spent about 15 minutes fine-tuning the margins of all our new buttons. That means HubSpot pays five designers to sit in a room and debate boring questions like “the distance between text and a text box.”

But.

Since that discussion two years ago, none of our front-end engineers, product designers, researchers, writers, or illustrators have had to worry about button margins.

That’s the beauty of creating a design system. By hammering out one detail at a time, you can free up your entire product development team to focus on solving your customers’ real problems.

We put all of our beautiful new components, including the guidance to use them, into Sketch (our design tool). This led to an immediate burst of productivity on our team, and at the same time (suddenly) brought our design efforts closer together.

Team collaboration

Before this process began, there was no central place for designers to know which elements or components already existed, and no way for them to use those elements or components in their designs. Designers and developers do their best to decide which components or patterns to use, but their main reference points are those that already exist — those that are clearly inconsistent.

To resolve conflicts (as we speed up our workflow), we built a robust library of styles and components for our new design language. This 30-page Sketch file is organized as a “family of components,” which stores each individual element or component that makes up the user interface of our product. The component library is updated weekly and is managed by a small rotating team of designers and dedicated front-end developers.

Need an icon? Come and get it.

The ICONS were designed by Joshua Mulvey, Sue Yee and Chelsea Bathurst.

Need data visualization? Give it to you.

Data visualization was designed by Drew Condon.

Need a button? As you wish.

We now have a main level button, which is orange, and we like orange.

Do you need anything else? HubSpot Canvas has everything you could want.

For every component that exists in the Sketch package, there is also a component in React that allows you to translate any model into code, just like building a Lego.

This means that our designers don’t have to spend time tweaking pixels, writing specifications, or worrying about the responsiveness of their designs. It also means that our developers don’t have to spend time tinkering with custom CSS (in fact, they almost don’t have to write it at all).

That means more time for our developers to build, and it means more time for our designers to research, envision, and iterate, not just fast, but in high fidelity.

This is an overview of a typical HubSpot designer’s workflow, using the Sketch library and the Runner, Craft (developed by Invision) plug-in.

  • YouTube video link: Youtu.be /d4RuKwOwqnM

Our component library is constantly updated to accommodate HubSpot’s growth. It is primarily maintained by a core team of designers and developers, but everyone on the product team contributes and helps improve. Any time a new component is created or modified, it is stored in the Sketch library and made available to everyone, which greatly reduces the number of “wild components” and duplicate components.

Extended design system

Our Sketch package is just a small piece of a larger design architecture, and in order for it to really work over a long period of time, we need to create something that works for developers. We recognize that the best way to create consistent, powerful, and enjoyable product experiences is to make it easier and easier for the people who create them.

Read the next article to learn how the documentation fosters co-ownership between design and development, how we use our design architecture extensively, and what tools we create for developers.

Finally:

People are more important than pixels, like mail tacos. The tortillas are delicious, but the mail is the worst.

Thanks: Illustrated by Sue Yee

References: Atomic Design, Brad Frost; Designing The Perfect Date And Time Picker by Vitaly Friedman; Finding the Right Color Palettes for Data Visualizations, by Samantha Zhang;

Originally posted on HubSpot’s blog

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.