What Does a Product Designer Do at HubSpot?

Product designers design how HubSpot works. We collaborate with our teams to produce an interactive experience that solves the needs of the customer and the business. Our role is more architect than interior decorator – meaning we spend more time thinking about how customers will use the product than making it visually attractive (although this is also important).

By spending time defining the problem and understanding our users, we're able to conceptualize solutions that get at the heart of the challenges our users face and the progress they are trying to make. And by leveraging expertise in human factors, behavioral psychology, and visual design, we're able to create an experience that is highly usable, effective, efficient, and delightful.

The Eye in “Team”

The team is everything in HubSpot’s product organization, and product designers are but one member of a triumvirate. We work tightly with product managers (PMs) and engineers, each with our own area of responsibility and core skill set. We aren’t lone wolves, disappearing into the night and returning with a fresh design in our maws. We often say “the PM owns the problem, and the PD + TL (tech lead) own the two sides of the solution” (i.e., the visual interface and the technical execution). That’s because it’s important to have someone act as a key decision maker for each side of the equation.

It doesn’t mean everyone works independently though – quite the opposite. It means the PM uses her unique expertise and understanding of business and customer goals to present a challenge to the team that is aligned with the team’s mission. The team then works together to further define the problem and brainstorm potential solutions. Working in this way, the entire team shares a sense of understanding and ownership throughout the lifecycle of the project.

Keep It Lean

Once we have an initial sense of the challenge and a few ideas about how to solve it, we work quickly to create an artifact to test out the team’s ideas. The UX research team helps us get it in front of actual customers and gather greater insight into 1) how they think about the problem, and 2) whether our ideas are on the right track to solve them. This artifact could be a survey, hand-drawn sketches, a wireframe, or a prototype (mockups linked together to simulate an experience, sometimes with animation/transitions). The key is that this process will quickly move our confidence level in any given solution forward, or invalidate our ideas.

This methodology is called “Lean UX” (which is based on Lean Startup, which is based on Toyota’s lean production), and it involves rapid cycles of trying to understand, create, evaluate as follows:

• Understand the problem
• Brainstorm and quickly create something we can test as a potential solution
• Evaluate our hypothesis by putting it in front of actual customers

I can’t stress enough the (literally financial) value of invalidating a big idea. At many companies, when a business stakeholder has an idea, they design it down to perfect pixels, spend months developing it, and launch it without a shred of proof that it will be a success. All too often, the idea flops as soon as real customers get a hold of it. If you can confidently invalidate an idea early, you’ll save many thousands of dollars and a lot of heartache.

The Design Process

As we move from problem to solution and increase in visual fidelity, we go through these high level phases:

Problem Definition

Einstein is quoted as having said something like, “If given an hour to solve a problem, I’d spend 55 minutes understanding the problem and 5 minutes on the solution.” As designers, it’s crucial that we spend time truly understanding (or identifying assumptions about) the customer’s goals, motivations, anxieties, context, and struggle. It’s also important that we understand the product’s lifecycle stage, and the business drivers behind the decision to tackle this challenge. Are we trying to improve retention? Activation? The knowledge shared in the Problem Definition phase directly informs the solution.

Discovery

We may need to dive in deeper before we’re ready to generate a solution. Surveys, analytics data, competitive analysis, and customer interviews can help fill the gaps in understanding.

Ideation

Now that we’ve dug into the problem, it’s time to generate ideas. There are several great methods for this, including Scenario Mapping, and lateral thinking techniques. Doing these exercises as a team increases diversity of ideas, and a great feeling of ownership in the process. At this step, you want folks inspired to imagine solutions that are elegant and powerful, taking advantage of everything the system may know about a user and their context, available datasets, the latest technology, machine learning, etc. Now is the time to dream big and save the feasibility discussions for later. After you have a pile of great ideas, then a team can work to prioritize them. We often use a matrix of effort (or risk) vs. impact, and test the riskiest assumptions first.

Information Architecture

A key first step in designing a solution is nailing the organization and flow necessary to facilitate the desired outcome. So many experiences fail simply because the designer didn’t spend time considering a user’s mental model (their understanding and conceptualization of how something works and fits together as part of a larger organizational structure, and the words and concepts they’d use to describe it). The artifacts from this stage may take the form of a flow diagram, a copy inventory, or a complex site map.

Interaction Design

Now that we have a sense of the high level organization, we can think about individual screens and the elements that comprise them. What information does a user need to make progress towards their goal? Which components will best facilitate the manipulation of the information on the screen? What’s necessary, and what can we strip away to increase clarity and focus? What copy and visual signifiers will best increase comprehension? What are the various states and use cases we should accommodate? This all comes together in a wireframe, mockup, or prototype.

Visual Design

Sometimes we’re able to combine this step with the last, especially when we have a comprehensive, up-to-date visual language and component library, which allows us to create high fidelity mockups much faster. We bring our wireframe to life with color, fonts, truer spacing and alignment, illustrations, and other visual elements. Key considerations in this phase include brand alignment, visual hierarchy, and refining the tone of the copy.

QA

As we move through the process, we’re ideally working hand in hand with our developers and copywriters, who are building out and refining the parts of the experience in which we have a high degree of confidence. As the design is translated to code, it’s important to get a quick gut check that everything looks as intended. At HubSpot, we’re comfortable releasing design to customers that may need a few tweaks here and there. Our process encourages us to refine after release. The real goal is getting things in front of customers for validation as quickly as possible.

How is Product Design Different at HubSpot?

We're Decentralized

At many companies, designers are centralized, meaning they sit together as a team and are "contracted" out to work for other teams and stakeholders. At HubSpot, designers are embedded on small product teams, alongside a PM and several engineers. This makes collaboration quick and easy, and reduces the need for documentation. It also increases the feeling that we’re all part of a team, rather than the “us vs them” mentality of yore.

We're Cross-functional

At many companies, designers are specialized. They are often divided into UX designers and visual designers. Here, our PDs are cross-functional. They manage the design process on their team all the way from problem definition to polished pixel. Often they have deep knowledge or skills in a particular area, but are still able to go wide (the famous T-shaped employee). This requires a diverse set of design skills and experience, and the ability to work with a high degree of autonomy. It’s facilitated by our “living” UI Library and results in a faster, more efficient process with fewer handoffs.

Traits and Skills of a Successful HubSpot Product Designer

Empathy

We need to be able to put ourselves in our customer's shoes and consider their anxieties, motivations, and context.

Humility

Hubris limits learning, and in an environment where we need to rapidly make and test assumptions, we need to be comfortable with being wrong. Like, often. We need to be open to input from diverse stakeholders, team members, and other designers, in the spirit of getting to the best possible solution.

Curiosity and Analytical Ability

Designers need to be inherently curious about how humans think, behave and interact with technology. And synthesizing this understanding of human cognition and behavior, our software and personas, research data, the domains of SMB marketing and sales into a smart solution requires clear thinking and the ability to reduce complexity down to essential components. It also requires a healthy dose of skepticism, without a trace of cynicism.

Creativity, Vision, and Divergent Thinking

Design is imagining a better future. So it’s important for designers to think boldly and escape the confines of what’s been done before. Practicing divergent thinking (generating many possible solutions and avoiding getting attached to the idea of one “perfect” solution) is one way we stay open to diverse possibilities.

Drive and Grit

There are always constraints and tradeoffs. That’s why an essential skill for designers at HubSpot is working with engineers to find ways to bring ideas to life. It’s one thing to lounge around on a beanbag chair dreaming, but another thing entirely to collaborate with others to Get Shit Done.

Communication and Collaboration

PDs are in constant communication with their teams: working with PMs and TLs to understand the problem, sharing early ideas and sketches, working with researchers to analyze the results of a test, discussing functionality with engineers, collaborating on copy with our copywriter, and reviewing UI that has been coded. It’s essential for designers to actively listen, and articulate ideas crisply.

Results Oriented

PDs strive to have true impact on the success of our customers. That’s why it’s important to define success and establish appropriate measurements of the effectiveness of the solutions we design.

Committed to Craftsmanship

Designers at HubSpot care deeply about the quality of the interactive experience. This means sweating the details, sanding the edges, and making time to polish. This isn’t vanity or OCD – every detail adds up to a cumulative perception of quality by customers.

Strong Visual Design Skills

The ability to use classic design elements such as composition, visual hierarchy, balance, typography to direct the eye, establish importance, tone and meaning.

Human Factors and Behavioral Psychology

An understanding of how humans think, behave, and interact with systems. These fields of study have yielded many useful heuristics for designing experiences that help people find the information they’re looking for, make better decisions, and persuade them to take action.

Staying Sharp

In a field that changes rapidly, we have a number of practices that help us continue to grow and improve. (Interestingly, we've found that this culture of learning is one of the top reasons design candidates cite as the reason they'd like to join us.) Here's our secret:

• Design Review every Tuesday
• #design-feedback on Slack
• Study Hall (every day in the lounge there's time blocked off to work together)
• Wake.io: a stream of our latest mockups
• Individual mentorship
• Events & Conferences
• Free book program and a UX library
• Subscriptions to online training

How does product design work at your company? Let us know in the comments.