inline editing Platform

Background

At the start of the project, HubSpot had two distinct product lines (Marketing Hub for and Sales Hub) and was developing a third product line (Service Hub). As the product lines grew, the company started hearing feedback (users interviews, NPS, support calls, reviews on sites like G2Crowd) that the experience across product felt inconsistent and unpredictable. One feature that all product lines shared was inline text editing: This allowed content marketers to directly manipulate the content on their website pages or salespeople to preview their email as they wrote them, for example. However, the feature was inconsistent in its IA, patterns, and components. My team was tasked with creating a text editing platform that would bring consistency to its many use cases.

Users

Text editing impacting 2 groups of people:

1. HubSpot customers: These were end users including marketers who create content, salespeople who write emails, and customer success reps who manage knowledge base articles. The solution I designed had to accomplish all of their diverse text editing needs.

2. HubSpot product teams: These were people leveraging the text editing platform. The solution I designed needed to be scalable and componentized so that these teams could quickly implement text editing in their apps.

Usage Audit

The first thing I did was do an audit of the product to understand all of the places users were currently editing text. This uncovered some key insights which determined the direction of this project:

• 20 different applications with their own instances of text editing: Text editing touched nearly all of HubSpot’s 40,000 customers, and a solution would require buy-in from at least 20 product teams. Across these 20 applications, we also uncovered inconsistencies in component design, information architecture, and hierarchy of functionality.

• 40 pieces of functionality in the text editing tools ranging from bolding text to complex functions like personalizing content: A solution would need to accommodate a wide range of functionality while maintaining a clear IA that made individual features discoverable.

• 2 external frameworks (TinyMCE and Draft.js) powering the text editors: Migrating off of these external frameworks was off the table so a solution would need to work within the technical constraints of these editors.

Information Architecture Design

Before redesign

Before the redesign, individual product teams were responsible for implementing text editing in their tools. This resulted in inconsistent access points for many common text editing functionality. In the example below, you can see two ways to access text size in a website editor and an email editor. Usage data showed that it was common for our marketing users to hop between these two editors. Therefore, this inconsistency required users to constantly recall where to access functionality based on the tool they were in.

After redesign

Looking at the 40 pieces of functionality in the toolbar, I grouped them into categories that might make sense to users. To start, I took a persona-agnostic approach to grouping functionality. Although a I knew wide range of personas used the toolbar, I also knew that many of these personas often hopped around in the tools. At that time, HubSpot’s target customer were small to medium sized business where it was common for employees to wear many hats. Therefore, this toolbar need to be flexible enough to accommodate for all users.

In the IA design, I leaned heavily on 2 resources

• Content editing conventions established by existing editors our users were already familiar with: Although HubSpot’s personas were unique, content editing tasks were not. Therefore, I looked at common editors like Google docs, Microsoft Word, and competitor tools to identify common IA patterns.

• Product managers and product designers: As I was taking a systems approach for the IA of the toolbar, I relied on feedback from PMs and PDs on persona-focused product teams to make sure that the IA was flexible enough to accommodate their specific use cases.

In the end, I landed on 4 main functionality groupings:

1. Preformatted text: These are blocks of text that have a predetermined style and formatting that may be set in a website’s stylesheet, template, or theme. Examples include heading styles and quotations.

2. Text formatting: These text and paragraph styling tools that are most common to content editing. This grouping leaned the most of content editing conventions already established by editors like Microsoft Word and Google docs. Examples including bolding text or creating a bullet list.

3. Inserts: These are media and other rich content to enhance text. They included common things like adding images as well as some persona-specific functionality like call-to-action buttons for marketers and signatures for salespeople.

4. Advanced tools: These are tools for troubleshooting content. Examples included viewing the source code of a website for developers.

Below is a tree map of where all of the text editing tools fit into this updated IA.

Component Design

Before redesign

Before the redesign, there were inconsistency in the iconography, color themes, and interactions with the same tools across the various toolbars. In the example below, you can see three different color themes that existed across the toolbars:

After redesign

I designed these 5 components that were used as the basis for the 40+ tools in the toolbar.

These easy part was the UI design for these components. Getting product teams to adopt these new components was the bigger challenge. In the end, two things helped me accomplish this feat:

• I worked with multiple designers across the organization to get the components approved and added to HubSpot’s Canvas Design System.

• I created Sketch file that included the components and guidelines on on how to use the toolbar. This made it easy for designers to use these components, build their own toolbar, and challenge it.

Customer feedback

Here are some tweets we received from customers as we migrated the toolbars over to this new system: