|  
10 Min Read

5 Tips to Create a Design System for HubSpot

Your website is the first place people go to learn about your products or services and find
information about your business. Today you will be gifted with these 5 tips to create a Design
System for HubSpot...according to HubSpot!

According to HubSpot’s CMS data, 88% of online customers will not return to your site after a
bad experience.


These tips go far beyond the HubSpot platform. 


In this article I will cover some design tips for people and not just aesthetic factors. These tips
that I will give are key factors that will leverage your website’s audience. It is necessary to have
determination and organization to start applying these tips in your business. After all, “taking the
first correct step is essential to start and sustain a future idea”.


1 - Analyze User Journey and User Experience


Customers need a product that’s consistent, highly functional and delightful. So HubSpot created a design system that would help us fulfill those needs on a continual basis. Your customers need to have an appropriate user experience. How does a person feels when interacting with a system? User experience (UX) is about making decisions based on the user’s needs.


A minimalist approach that brings the essentials to your client is fundamental in the
process of studying UX and UI.


The fundamentals of UX are:

  • Useful
  • Intuitive
  • Consistent
  • Accessible
  • Appealing


Creating a positive experience for your website visitors can turn them from strangers to
customers, and eventually evangelists for your brand!
hubspot UX

2 - Study the current User Interface: is that coupled with UX? 


It is not enough just to have a good UX. You also have to marry the UX with the UI. It is
fundamental that both go together. To create an intuitive website, make sure each page answers one
question at a time and asks visitors to take one action at a time.


To ensure consistency across your site, establish style guides for both your visual and written
content. In a HubSpot study, 76% of respondents said that the most important element in
website design is how easy it is to find information. Brand consistency, impact, identity,
functionality and aesthetics are mandatory.


That is, you need to make sure that your entire website is working correctly (not just visually), I
recommend using basic design fundamentals as a reference, whether it be spacing,
alignment, color theory, proportions, typography and even simplicity.


On the HubSpot platform there is a native editor already to create and edit pages, no knowledge
is required in HTML and CSS, a very powerful editor, with which you can adjust almost any
element of the theme, create call-to-actions, rich texts , blogs and more! It is worth doing a
thorough check.

design tools hubspot

3 - Usability Testing & Optimizing 


Aim to have no more than seven menu items in your main navigation, and in most cases, have
no more than three levels of sub-navigation. Use whitespace to visually frame important
information and shape the focus of the reader.


It’s very important to keep your website design simple and free of clutter. Your website page
content should support a single goal. This is something that is connected with the persona, but
your users are always changing, so your website shouldn’t be stagnant.

Testing Your Site’s Usability 

One cannot abandon the fact of doing usability tests with real customers, there are several ways
the tests can happen, it can be using HotJar, which brings a heatmap of where users focus most
on their content, either with surveys or with A / B test. What matters is that tests on your site are
essential, the world is constantly changing.

Optimizing Your Site 

Optimizing the site is more of an SEO factor than of Design itself, but the fact that the site is well
optimized influences user behavior based on page loading and resource usage, that is, it
influences UI and UX. HubSpot by default has an incredible arsenal of SEO and Optimization
tools that can improve your site’s overall usability in light years!

The open-source project Google AMP is a great example of optimization for mobile devices, it is
worth checking out and exploring this feature.



4 - Know the Persona of your business to create the right changes


One of the most important things is to deliver what you need to solve the customer’s life. It is a
complex issue, but the core of this issue must be taken into account. Get clear on what your
user’s goals are. Conduct research and talk to your customers.

HubSpot design

5 - Make use of Call-to-actions! 


Don’t be afraid to make use of flashy buttons, images and headlines on your website, by using
CTAs you have a much better chance of converting customers into your business!

Check the current Brand, which are the most striking colors and which will keep the consistency
and harmony in the website and in the content in general. Make moderate use of CTAs, maintain
a friendly but eye-catching proportion. To study which images or illustrations to use throughout
your website can totally change the user’s perspective, check the composition and harmony of
the colors, using clear basic concepts of Design as previously mentioned.


Keep Going with Your Design System 

Design is a process of testing, generating alternatives and solutions, create several alternatives
and test them with some customers, check which performed the best solution, which delivers the
solution the user needs to complete the desired process without delay? Ask yourself questions
based on context to start looking for the answer.

As mentioned before, it is always necessary to test and improve, the world is always changing
and its customers too, it is always good to keep originality but be in trends.

Need help with your UX, or have some HubSpot web projects you could use help with? Get in touch with one of our consultants today! 

 

Book A Chat

Comment