Product Design, Visual Design, Web Design, Strategy
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.
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:
Typically no access to a developer and little technical ability.
Has no time, is usually a person wearing many hats.
Needs a starting point that they can quickly customize and get on the web fast.
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.
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.
WCAG 2.0 AA standards are built in to default design for customers to take advantage of web best practices.
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.
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.
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.
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:
I usually don’t make time to document process and decisions, but since we did, this makes theme creation a more scalable process that can be performed by others in the future. This is helpful to remove blockers in the future.
This was a project that involved collaboration among many teams, and I saw the importance of over-communication very vividly. Although it felt like I was communicating updates a lot, I feel like I could have done more.