CMS Hub Growth Theme

Giving marketers the freedom and proper constraints to build a successful website using HubSpot CMS

My Role

Product Design, Visual Design, Web Design, Strategy

Theme settings in CMS Hub

What is a theme?

In HubSpot's CMS Hub, a theme is a set of templates, styles, and reusable modules that allow marketers to build a website without code. They control the overall look and feel of your website design.

An overview of the growth theme that I designed. The theme includes basic style definitions, page templates, sections and modules. An overview of the growth theme that I designed. The theme includes basic style definitions, page templates, sections and modules.

The problem

Themes existed in CMS Hub prior to this project’s inception, but there were several factors that caused my team and I to reevaluate their utility and effectiveness. This work happened prior to the launch of HubSpot’s newest CMS Hub Starter tier, which offered the product to people looking to build a website at a lower price point.

Our existing set of default assets were effective, but not designed for an audience who would fit this new persona. Several key characteristics of these users were:

I worked with a UX Researcher to author a survey that was sent out to users who identified as the new target audience. This helped us gather information on their expectations and challenges they faced with their current website experience. These were some of the key problems we identified:

It’s hard to tell which theme is best to start with. There are usually not enough choices to feel personalized, or too many to sort through.

It takes a long time for me to change the layout of a template to fit the content that I have written.

It is very difficult to customize styles and branding to my liking without the help of a developer.

I don’t feel confident in the finished product enough to publish my website.

Our goals

My goals for the project were not to just design an aesthetically pleasing theme, but I wanted to ensure we were making key improvements to the pain points that we faced with existing themes.

  1. Improve accessibility

    WCAG 2.0 AA standards are built in to default design for customers to take advantage of web best practices.

  2. Improve usability

    Controls would be grouped and categorized in a way that better supports natural mapping to user mental models, making it easier to find granular customizations.

  3. Reduce Marketer time to value

    Marketers who start building a website with this theme see a reduction in the time it takes to activate, or publish their website to a custom domain.

Enter the Growth Theme

Equipped with research and knowledge of the problem space, I worked on designing a theme that would satisfy the needs of this group of “Do-it-Yourself Marketers” by making layout customizations swift and making stylistic controls intuitive. Since improving the time to value for this group of people was a cross-product initiative, I worked closely with the product designer who was responsible for the onboarding experience to create a setup flow that would make setup less of a headache.

The result of this was a theme that could be easily adapted to a variety of needs via the onboarding experience. I created preset style guides that would instantly change the look and feel of the underlying template, a template system utilizing reusable modules to configure layout variations based on the user’s choice, and a number of header and footer options that anticipated the most common design patterns in web design. Although I did not design the onboarding UI itself, I worked closely with the designer responsible for the experience to ensure that the right settings were made available based on the way that I’d designed the theme. With these improvements, the time required to customize a theme to your needs was shaved down dramatically.

Screenshots from the CMS onboarding experience, using the theme design. Setting up fonts and colors, choosing a homepage layout, and changing the header layout

Implementation and development

With the theme’s front end designed, I worked with the web developers on my team to map out the controls for each customization we’d offer in the theme. In CMS Hub, developers are free to define the names, groupings, and field types that are offered to marketers who are ultimately using their theme to create a website, so this part of the process was extremely important in ensuring that marketers could identify and use the controls they were looking for.

I wrote a draft of the settings needed to customize global branding settings at the theme level and each module, including the field types, how they should be arranged and grouped together, and also how they should be named. I was careful to ensure that we used terms that marketers resonated with rather than jargon that was meaningful to web developers.

As the theme was implemented, I documented our best practices for designing intuitive field controls for marketers, so that others could utilize them. Many of these guidelines have been included in external CMS Hub documentation to help our developer community create great experiences for the Marketers they are working with.

Example of settings written out in the spreadsheet, and mapped to the UI Example of settings written out in the spreadsheet, and mapped to the UI

Results and final thoughts

I unfortunately was not at HubSpot when this feature launched, but initial testing and research showed that there was promising movement toward our goals. If anything, the work that we did to improve grouping and content design within the theme itself was a big step toward making the theme more usable.

Looking back on this project there are several key things that I took away from this experience:

There’s a lot more to share about this project, but I’ll save that for the portfolio review. 🙂

An animation showing the full usage of a theme, from creating a page, to customizing the content on that page, to changing the global colors of the theme.