Redesigning your web site requires cautious planning and consideration, it is essential to have a transparent understanding of the method earlier than beginning the undertaking. We have outlined a complete 12-step course of that guides you thru each stage of redesigning a web site utilizing HubSpot CMS (a part of HubSpot Content material Hub), guaranteeing a clean undertaking and optimum finish consequence.
Your step-by-step HubSpot web site redesign course of
1. Choosing your HubSpot CMS subscription degree
When planning your HubSpot CMS web site, the very first thing to resolve is the subscription degree you require. HubSpot has 4 tiers of HubSpot CMS that provide totally different ranges of performance, the tier you want will in the end come all the way down to your technical necessities. Let’s break down what you may count on from every tier.
HubSpot CMS Free
HubSpot CMS Free is because it says on the tin, fully free. This entry-level tier is geared toward start-ups and people dipping their toes in digital advertising and marketing and eager to create their very own web sites to develop their companies. Though it is free, it nonetheless presents some fascinating options, resembling:
- Premium internet hosting
- Web site drag-and-drop editor
- Safety monitoring and risk detection
- SSL certificates
- Web site analytics
- Reside chat
HubSpot CMS Starter
HubSpot CMS Starter is an effective choice for smaller companies and startups on a finances that want somewhat extra flexibility from their web site.
It presents extra freedom to tailor the look of your web site to fit your model, that includes pre-made templates to get you began. In addition to the entire CMS Free options, you get entry to:
- Superior analytics
- Funds
- Calls-to-action
- Superior kind performance
- Personalisation
- URL mappings
- Technical help
HubSpot CMS Skilled
HubSpot CMS Professional is commonly the go-to alternative for companies, and for good purpose. It presents all of the performance most companies want from a web site.
Most small-medium enterprises (SMEs) discover the value level excellent for the extent of performance on supply. Key options embrace:
- HubDB (HubSpot’s highly effective relational database)
- Customized reporting
- Chatbots
- Superior multi-lingual choices
- Content material staging (sandbox atmosphere)
- Merchandise
- Video internet hosting and administration
- A/B Testing
- Sensible content material
HubSpot CMS Enterprise
HubSpot’s premium-level CMS, Enterprise, presents you all the pieces you would ever need from a CMS. It boasts all of the performance of CMS Professional, plus some extra options that will often require costly, bespoke options to create. This consists of:
- Multisites
- Customized objects
- Adaptive web page testing
- Content material approvals
- Customized internet apps
- Membership areas
- Reverse proxy configuration
- Content material partitioning
- Single sign-on
- Web site efficiency monitoring
2. Planning your route into HubSpot CMS
When redesigning a web site, there are three principal approaches you may take to construct your web site on HubSpot. Every method is totally different and the most effective one for you’ll rely in your necessities.
Choice 1: HubSpot migration
HubSpot’s web site migration service supplies a fast, low-cost path to the HubSpot CMS. Relying in your web site’s complexity, the migration can take as little as 2-6 weeks.
Migration is good for retaining your present web site’s navigation and person expertise whereas benefiting from HubSpot CMS. For the reason that infrastructure is prepared, you will not have extra upkeep or administration issues.
Needless to say HubSpot’s migration service makes use of a standardised method for all web sites. This implies the migration will not be optimised to your particular necessities, so it’s possible you’ll find yourself with a sub-optimal web site from an enhancing and efficiency standpoint. If you wish to migrate your present web site however are on the lookout for a extra tailor-made construct, think about using a accomplice to your HubSpot web site migration.
Choice 2: HubSpot themes
For cost-effective entry to HubSpot CMS, think about beginning with a market theme. HubSpot presents quite a lot of themes created by totally different companions and builders, offering choices to fit your preferences.
Take warning when utilizing market themes. Customising these themes may be advanced and time-consuming. You may also discover it difficult to adapt them to your actual design preferences and restrict your capacity to tailor the person expertise to your excellent B2B patrons – an important side of B2B demand technology.
Choice 3: Bespoke construct
Customized web site builds supply full management over your web site, permitting you to tailor the person expertise and optimise efficiency. Nevertheless, for those who lack an in-house group, you will must accomplice with a HubSpot web site developer. Their experience in web site technique, copy, design, person expertise, and improvement will assist to reinforce your person expertise and convert extra guests into leads.
Needless to say customized builds are the priciest and most time-consuming choice for HubSpot CMS. Prices fluctuate and initiatives usually take 2-12 months to finish.
3. HubSpot CMS setup and preparation
There are some issues you are able to do immediately as quickly as you might have entry to HubSpot CMS to make your life simpler additional down the method.
CRM Setup
Understanding how leads out of your web site seamlessly stream into your CRM system is essential for streamlining your follow-up course of. By proactively mapping out your CRM construction and processes prematurely, you may guarantee a clean transition and environment friendly dealing with of leads generated by way of your HubSpot CMS web site.
HubSpot workflow displaying handoff from internet leads
Join your area
By connecting your area to HubSpot up-front and setting it as ‘prepared for publishing’, you may construct your pages as in the event that they had been in your present area even when the DNS document just isn’t directed to HubSpot at that second. This proactive method minimises downtime and ensures that your web site is accessible to guests as quickly as you’re able to go dwell.
Pre-provision your SSL certificates
HubSpot routinely provisions a regular SAN SSL certificates by way of Google Belief Companies if you join a site to your account. You’ll be able to add this to your DNS information with no affect, it often takes a couple of minutes however can take as much as 4 hours. Doing this up entrance implies that when your web site goes dwell it is going to be safe with an SSL certificates.
The place to seek out your SSL certificates information
4. Web site technique
The suitable web site technique supplies the muse for an efficient web site that serves your patrons’ wants and generates demand.
By creating a web site technique, you make sure that every step you’re taking aligns along with your general web site objectives. It helps you create a web site that allows patrons to find you, discover the content material that is related to them, and convert once they’re prepared.
Your web site technique ought to cowl:
- The objectives of your web site
- Your excellent purchaser journey and persona necessities
- Your core worth proposition
- An in-depth audit of your current web site
- A redirection and migration plan
- Your web site key phrase technique
- Your web site sitemap
5. Branding
A powerful and constant model presence in your web site is important for making a connection along with your viewers.
In terms of branding for a web site redesign, it is essential to ask your self these questions:
Does your model nonetheless mirror your organization’s id, values, and distinctive promoting level?
When serious about a model, first suppose past your web site. Your model embodies the essence of your whole firm. So it is essential that your model mirrors what you are promoting’ id and resonates with clients, telling a compelling story. A powerful model ought to combine your core values and distinctive promoting factors, creating an impactful impression.
Wavenet determined to do a full rebrand, together with a brand new brand to raised mirror the qualities that outline their options.
Do you might have complete model pointers?
If you wish to have a constant software of your model throughout all channels in all environments, complete model pointers are important. On the primary degree, this could embrace:
- Emblem utilization
- Color palette
- Typography
- Tone of voice and grammar guidelines
- Visible expressions and tips on how to use visible parts
Wavenet‘s complete model pointers doc.
Is your model digitally accessible?
Having a unified model is one factor, however guaranteeing it is digitally accessible is one other. It is essential to examine in case your colors, when utilized in distinction, have a minimum of an AA ranking in opposition to Internet Content material Accessibility Tips (WCAG). Think about creating a web site color accessibility matrix so you understand which colors comply.
Wavenet‘s internet accessibility matrix.
Do the model property translate properly in your web site?
Having quite a lot of parts at your disposal is essential for redesigning a visually partaking web site that captures the essence of your model. So, take the time to curate a set of property which might be versatile, visually interesting, and reflective of your model’s values – it will aid you craft a web site that not solely appears to be like nice but in addition authentically represents your model picture.
Wavenet‘s web site with a number of model property used all through.
6. Web site content material
Content material is on the coronary heart of your web site. It is the way you convey your message, ship worth, and share details about the options you supply. Writing efficient internet content material for on-line audiences is essential. You’ll be able to’t merely copy and paste textual content out of your gross sales brochure onto your web site. Your web site’s copy ought to:
- Be straightforward to scan
- Be easy to learn, avoiding buzzwords
- Be concise
- Speak to your viewers
- Use a constant tone of voice
Content material for considered one of our web site pages
7. Wireframing
Making a wireframe is like designing the architectural structure of your web site. It is a necessary a part of a redesign as a result of it defines the construction, organisation of content material, and person expertise.
A well-thought-out wireframe is the muse of a logical, intuitive, and user-friendly web site. It helps guests navigate your web site simply, discover info effortlessly, and perceive the stream of content material. With no clear wireframe, your web site’s design will lack cohesion.
Cellular wireframe instance from Looka.com
8. Web site design
Web site design is all about visually showcasing the data you need your guests to devour in the best and interesting manner potential.
It ought to mirror your model, weaving parts of it all through and enhancing the person expertise. A charming and user-friendly design is vital to retaining guests engaged and in your web site.
Some concerns to make when redesigning your web site on HubSpot embrace:
- Navigation – have to be intuitive to make use of.
- Hero sections – should convey the core message successfully.
- Picture measurement and format – should strike the stability between visible and efficiency affect.
- Video and animation – have to be used strategically to reinforce the general message and never distract from it.
- Heading construction – have to be visually logical and optimised for search.
- Responsivity – should design for cellular too and be sure that a seamless expertise is offered on all display screen sizes.
Acre Safety‘s web site design specified by Figma
9. Wesbite improvement
Improvement brings your web site’s design to life. HubSpot CMS builders translate your design and performance ideas into a totally purposeful web site, guaranteeing it operates seamlessly and effectively.
When constructing a web site in HubSpot, this part usually consists of growing the web site theme, templates and modules, interactive parts, and HubDB-driven content material.
Some concerns to make when growing your web site on HubSpot embrace:
- Editability – your web site ought to be straightforward to edit, evolve, and keep. Your builders ought to be sure that templates and modules are reusable so you might have complete management over your web site. However they need to additionally strike the stability between complete flexibility and applicable restrictions in order that your web site pages stay constant.
- Efficient use of performance – utilizing the vary of CMS performance resembling blogs, HubDB, internet apps, and membership areas in the best conditions is vital to maximising the potential of your HubSpot web site.
- Streamlined code – the extra code you add to your web site the slower it would load. So, your web site code ought to be light-weight and optimised for efficiency.
Screenshot inside HubSpot design instruments
10. Web page inhabitants
After you have the templates and modules constructed inside HubSpot, you may start to create and populate your whole pages.
Think about using HubSpot’s staging device, content material staging, for constructing out your web site. The power to fine-tune and ideal your content material inside a managed staging atmosphere ensures a clean and environment friendly transition to the dwell web site, minimising any potential disruptions or delays. In case your web site is already on HubSpot, this might be an extremely great tool.
Screenshot of HubSpot’s content material staging device
11. Testing
Testing is an important step within the web site redesign course of, guaranteeing that each one parts operate as meant and supply a seamless person expertise. Earlier than launching your new HubSpot web site, thorough testing have to be carried out to establish any potential points or bugs.
Key areas to give attention to throughout testing embrace:
- Performance testing – ensure that each one hyperlinks, buttons, kinds, and interactive parts work accurately throughout totally different units and browsers.
- Browser and gadget testing – check your web site on totally different internet browsers and units to make sure that it capabilities accurately and appears constant throughout all platforms.
- Efficiency testing – examine the loading velocity of your web site and optimise any parts which may be slowing it down to supply a clean looking expertise for guests.
- Copy checking – examine web site copy for typos and grammar errors.
- Consumer expertise testing – have actual customers navigate by way of your web site to establish any usability points and collect suggestions on the general design and structure.
Lambdatest‘s dwell testing device
12. Launch
Now all of your exhausting work comes collectively. It is the second when your new web site goes dwell and turns into accessible to the world. Listed below are the important thing steps concerned within the launch course of:
- Publish your staged pages – now that you have fine-tuned your content material throughout the staging atmosphere, it is time to publish them to your manufacturing space (the ‘Web site Pages’ space, the place pages may be seen by an exterior customer).
- Redirect implementation – for those who’ve constructed your redirection plan as a part of your technique, now’s the time to import these in HubSpot, bear in mind to add redirect domains if you wish to handle the redirection of different domains too.
- DNS modifications – DNS (Area Title System) modifications are essential to level your area title to the brand new internet hosting server the place your redesigned web site is hosted. Replace your DNS settings in order that your HubSpot web site may be discovered to your area.
- Submit-launch testing – As soon as your new web site is dwell, it is important to conduct thorough post-launch testing to make sure that all the pieces is functioning as meant. This consists of checking for any damaged hyperlinks, lacking photos, or different points that will have arisen through the launch course of. It is also a good suggestion to check the web site’s efficiency on totally different units and browsers to make sure a constant person expertise throughout all platforms.
Bear in mind, the launch is only the start – ongoing evolution is important to maintain your web site operating easily and assembly what you are promoting objectives.
Updating DNS information
Choosing a HubSpot web site design accomplice
The most typical route into HubSpot CMS is to create a bespoke web site, and this implies getting assist from a HubSpot web site design company. When choosing a accomplice to work with, right here are some things to have a look at that can aid you validate their credentials:
- Overview the HubSpot Encourage Gallery. Examine the company’s work within the HubSpot Encourage Gallery – a set of HubSpot CMS web sites. It is a dependable reference for assessing the standard of their work.
- Search for related HubSpot accreditations. These are exhausting to earn and point out a excessive degree of experience. Pay particular consideration to the HubSpot CMS Superior Accreditation for web sites.
- Try their critiques. Go to the HubSpot Associate Listing to seek out buyer critiques. Do not simply rely them; give attention to critiques associated to web site initiatives to gauge their efficiency.
- Assess portfolio and outcomes. Go to the company’s web site to evaluate their HubSpot CMS initiatives. Companies that may showcase measurable outcomes from these web sites earn bonus factors.
- Examine related HubSpot Impression Award wins. Has the company received any HubSpot Impression Awards, particularly these associated to web site outcomes? In the event that they’ve received awards previously, you may be pretty assured they know tips on how to create impactful web sites.