Our experience with HubSpot's New Design Manager

HubSpot finally made their New Design Manager public. We've actually been using it for awhile now while it was still in closed beta. We've built a few sites now using it and have learned a lot of best practices and new ways of doing things.

The new design manager is one of the biggest changes HubSpot has implemented in a long long time. It's not just a new paint job, it changes how we build sites.

What are the core differences?

  • Folder and file structures are now fully customizable - organize things in the way that makes the most sense to you.
  • Custom Modules
    • They now have their own CSS and JS.
    • Repeatable fields, and groups.
    • New field types like color, number, page, blog, and more.
    • fields can be conditionally shown.
    • There is a new version of the design previewer which allows you to test the individual fields and the module out of the context of a template.
  • Templates
    • hubl modules are no longer a thing, custom modules have to be used instead.
    • individual custom module options can be edited at the template level.
    • All css and JS is combined and minimized together in 1 file for css and 1 file for JS.


What we've learned

Our best practice for Custom Modules

We've always been developing our custom modules in a way that made them easier to pull over to other sites and re-implement but the new custom modules make this a whole lot easier. 

The way we design custom modules. We build them first with a basic somewhat generic design. Focusing on the functionality. Keeping all of the core CSS and JS inside the module. Then we use a site wide css file to modify the generic design to fit the clients look and feel.

This allows us to focus our attention on the details of the styling rather than the functionality, every time we use the module. This approach also allows us to take the same base module and continue to update it, adding features over time, allowing it to continuously improve. We also get the peace of mind that browser compatibility tweaks were taken care of at the earlier functionality focused stage. So we can be faster toward the end of a project when checking browser compatibility and fixing any differences.

This methodology has enabled us to significantly cut our development time, and put more energy into making each module higher quality and more useful.

The new Design Manager beta is most definitely still in beta

While it adds a lot of time saving conveniences, especially on the developer end, it is still rough around the edges.

Having built a few websites now using the new design manager, I can say the new design manager is very much still in beta. While it adds a lot of time saving conveniences, especially on the developer end, it is still rough around the edges. Nearly every day when working on the sites we were building with it, I discovered a new issue. The bulk of the issues aren't developer facing, they're marketer facing. Which is worse. When us developers see issues, we find ways to work around them and are likely to report the issue pretty quickly. Marketers see issues - they assume it was the developers made a mistake, and often they wont report the issue, or wont know whether the issue should be reported to the developers or HubSpot.

Some of the issues we encountered:

  • Renaming modules that have already been added to templates or pages, often will cause the modules to display the wrong name creating client confusion.
  • Sometimes saving modules will completely break the editor making it so you can't take any actions without refreshing.
  • Copying custom modules to different portals sometimes carries extra baggage along that it shouldn't, like domain level css files.
  • Strange caching issues where editing css and js files and publishing your changes, you may not see your changes for several minutes sometimes longer.
  • Converting a page from a design manager 1 template to a design manager 2 template - had a pretty big issue where you'd actually cause the page to somehow not have a template associated with it.
  • Content staging - swapping a page template from a DM1 to DM2 template would do the above AND cause the page to not be staged but be a new copy of a page at a live URL, possibly overwriting a real page if you're not careful.
  • There have been some other smaller issues with the editor as well.

We felt the positive benefits of the new Design Manager outweighed these temporary issues in our case and continue to build new sites using the new Design Manager, as we want our clients to be using the best tools possible.

Our stance overall on the new design manager

Developers and Agencies - If you don't have an ongoing agreement to maintain the site for your client, don't use it for a production site yet. Most of the bugs I mentioned, I reported and HubSpot was quick to patch, but it hasn't been the most smooth experience. We knew going in that it was still in beta, we're used to doing betas, and the projects we used it on we planned to continuously support long term.

If you are a company and already have a HubSpot site, don't enable the new design manager until you're ready for a full redesign of your site or are ready to dedicate several hours making your site and modules compatible.

Overall, we love where the new design manager is headed, and think HubSpot will work out the kinks rather quickly. Having talked with their developers I know they are just as excited about it as we are.

In fact we have a good idea from a good source - when HS expects to release it to everyone:

[Design Manager 2 will rollout to everyone] Most likely in Q2 2018
— Shawn Bristow - Product Manager at HubSpot

Understand this quote while it is from a good source, it's not to be taken as an official HubSpot announcement. It is not law, and subject to change, it's just what their internal goal is.

Looking for developers that stay ahead of the curve? Contact us.