9 Guidelines for Exceptional Web Design, Usability, and User Experience

When it comes to designing or redesigning a website, it’s easy to get hung up on the aesthetics.

That shade of blue doesn’t look right…

Wouldn’t it be cool to have the logo on the right side of the screen?

How about we put a giant animated GIF in the middle of the page?

However, if you’re truly trying to accomplish something with your online business (e.g., brand awareness, lead generation, etc.), you’ll need to focus on more than just how your website looks.

In a world where folks have more than a billion websites they can potentially land on, you need to make sure yours is designed for usability, how easy your website is to use, and user experience (UX), how enjoyable it is to interact with your website.

Now, you could spend years studying the ins and outs of usability and UX. But for the sake of giving you a jumping-off point, we’ve assembled a list of the fundamental guidelines you can apply to your next website redesign or website launch. Then, we’ll review 10 features you’ll need on your site to put these recommendations into practice. Let’s dive in.

Free Workbook: How to Plan a Successful Website Redesign

1. Simplicity

While the appearance of your website is certainly important, most people aren’t coming to your site to evaluate how slick the design is. They want to complete some action, or to find some specific piece of information.

Therefore, unnecessary design elements (i.e., those which serve no functional purpose) will only overwhelm and make it more difficult for visitors to accomplish what they’re trying to accomplish.

From a usability and UX perspective, simplicity is your best friend. If you have all the necessary page elements, it’s hard to get too simple. You can employ this principle in a variety of different forms, such as:

  • Colors: Basically, don’t use a lot. The Handbook of Computer-Human Interaction recommends using a maximum of five (plus or minus two) different colors in your design.
  • Typefaces: The typefaces you choose should be highly legible, so nothing too artsy and very minimal script fonts, if any. For text color, again, keep it minimal and always make sure it contrasts with the background color. A common recommendation is to use a maximum of three different typefaces in a maximum of three different sizes.
  • Graphics: Only use graphics if they help a user complete a task or perform a specific function (don’t just add graphics willy-nilly).

Here’s a great example of a simple but effective homepage design from HERoines Inc:

examble of website design on the website for HERoines Inc

Image Source

2. Visual Hierarchy

Closely tied to the principle of simplicity, visual hierarchy means arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first.

Remember, when it comes to optimizing for usability and UX, the goal is to lead visitors to complete a desired action, but in a way that feels natural and enjoyable. By adjusting the position, color, or size of certain elements, you can structure your site in such a way that viewers will be drawn to those elements first.

In the example below from Spotify, you can see that the main header “Listening is everything” sits atop the visual hierarchy with its size and page position. It draws your eye to their mission before anything else. This is followed by the “Get Spotify Free” CTA, which prompts action. Users can click this CTA, or scan the menu items above for more actions.

a web design example on Spotify.com

Image Source

3. Navigability

Planning out intuitive navigation on your site is crucial to help visitors find what they’re looking for. Ideally, a visitor should land on your site and not have to think extensively about where to click next. Moving from point A to point B should be as frictionless as possible.

Here are a few tips for optimizing your site’s navigation:

  • Keep the structure of your primary navigation simple (and near the top of your page).
  • Include navigation in the footer of your site.
  • Consider using breadcrumbs on every page (except your homepage) so users remember their navigation trail.
  • Include a search bar near the top of your site so visitors can search by keywords.
  • Don’t offer too many navigation options per page. Again, simplicity!
  • Include links within your page copy, and make it clear where those links go.
  • Don’t make users dig too deep. Try making a basic wireframe map of all your site pages arranged like a pyramid: Your homepage is at the top, and each linked page from the previous forms the next layer. In most cases, it’s best to keep your map no more than three levels deep. Take HubSpot’s site map, for example.
site map for HubSpot.com

Image Source

One more pointer: Once you’ve settled on what your site’s main (top) navigation will be, keep it consistent. The labels and location of your navigation should remain the same on every page.

This leads us nicely into our next principle…

4. Consistency

In addition to keeping your navigation consistent, the overall look and feel of your site should be similar across all of your site’s pages. Backgrounds, color schemes, typefaces, and even the tone of your writing are all areas where consistency has a positive impact on usability and UX.

That’s not to say every page should follow the same layout. Instead, create different layouts for specific types of pages (e.g., landing pages, informational pages, etc.). By using those layouts consistently, you’ll make it easier for visitors to understand what type of information they’re likely to find on a given page.

In the example below, you can see that Airbnb uses the same layout for all of its “Help” pages, a common practice. Imagine what it would be like from a visitor’s perspective if every “Help” page had its own, unique layout. There would probably be a lot of shoulder shrugging.

a help page on Airbnb.com

Image Source

5. Responsivity

According to Statista, 48% of page global views were from mobile devices like smartphones and tablets. And according to our research, 93% of people have left a website because it didn’t display properly on their device.

The takeaway here: To provide a truly great user experience, your site has to be compatible with the many different devices that your visitors are using. In the tech world, this is known as responsive design.

Responsive design means investing in a highly flexible website structure. On a responsive site, content is automatically resized and reshuffled to fit the dimensions of whichever device a visitor happens to be using. This can be accomplished with mobile-friendly HTML templates, or by creating a special mobile site.

Ultimately, it’s more important to provide a great experience across different devices than look identical across those devices.

an illustration of a responsive web page on different devices

Image Source

Alongside mobile-friendliness, it’s worth your while to test your website’s cross-cross browser compatibility. In all likelihood, you’ve only viewed your site on one web browser, be it Google Chrome, Safari, Firefox, or something else.

Now is the time to open your pages on each of these browsers and evaluate how your elements appear. Ideally, there won’t be much difference in presentation, but you can’t know for sure until you see for yourself.

6. Accessibility

The goal of web accessibility is to make a website that anyone can use, including people with disabilities or limitations that affect their browsing experience. As a website designer, it’s your job to think of these users in your UX plan.

Like responsiveness, accessibility applies to your entire site: structure, page format, visuals, and both written and visual content. The Web Content Accessibility Guidelines (WCAG), developed by the Web Accessibility Initiative and the World Wide Web Consortium, set the guidelines for web accessibility. In a broad sense, these guidelines state that websites must be:

  • Perceivable: Visitors are aware of the content on your site.
  • Operable: The functionality of your website should be possible in different ways.
  • Understandable: All content and alerts can be easily understood.
  • Robust: Your website is usable across different assistive technologies, devices, and browsers.

For a deeper dive into this topic, see our Ultimate Guide to Web Accessibility.

7. Conventionality

A big challenge in web design is balancing originality with your expectations. Most of us are expert internet users, and there are specific conventions we’ve grown accustomed to over time. Such conventions include:

  • Placing the main navigation at the top (or left side) of a page.
  • Placing a logo at the top left (or center) of a page.
  • Making the logo clickable, so it always brings a visitor back to the homepage.
  • Having links and buttons that change color/appearance when you hover over them.
  • Using a shopping cart icon on an ecommerce site. The icon also has a number badge signifying the number of items in the cart.
  • Ensuring image sliders have buttons users can click to manually rotate slides.

While some might opt to throw these out the window for the sake of uniqueness, this is a mistake. There’s still plenty of room for creativity within the constraints of web conventionality.

Let’s briefly consider another field of design, architecture. Building codes are put in place so that folks can easily and safely use indoor spaces. An architect doesn’t complain about these codes or violate these designs because, aside from being against the law, they assure safety and comfort. It doesn’t matter how dazzling the building appears — if you trip on uneven stairs, or you can’t get out in a fire, you’re going to hate that building.

In the same way, you can craft a memorable experience while meeting user expectations. If you violate what users anticipate, they may feel uncomfortable or even frustrated with your site.

8. Credibility

Sticking to web conventions lends your site credibility. In other words, it increases the level of trust your site conveys. And if you’re striving to build a site that provides the best user experience possible, credibility goes a long way.

One of the best methods to improve your credibility is to be clear and honest about the product or service you’re selling. Don’t make visitors dig through dozens of pages to find what it is you do. Be up-front on your homepage, and dedicate some real estate to explaining the value behind what you do.

Another credibility tip: Have a pricing page, also linked on the homepage. Rather than force people to contact you to learn more about pricing, list your prices clearly on your site. This makes your business appear more trustworthy and legitimate.

Here’s an example of an effective pricing page from the Box website:

pricing page for Box.com

Image Source

9. User-Centricity

At the end of the day, usability and user experience hinge on the preferences of the end-users. After all, if you’re not designing for them, who are you designing for?

So, while the principles detailed in this list are a great starting point, the final key to improving the design of your site is to conduct user testing, gather feedback, and implement changes based on what you’ve learned.

And don’t bother testing usability by yourself. You’ve already invested a lot of time into your design, which brings your own biases into the equation. Get testers who have never seen your site before, the same as any first-time visitor.

Here are a few user testing tools to get you started:

  • Website Grader: Our free tool evaluates your website based on several factors: mobile, design, performance, SEO, and security. It then offers tailored suggestions for improvement. You can learn more about Website Grader in our dedicated blog post.
  • Crazy Egg: Track multiple domains under one account and uncover insights about your site’s performance using four different intelligence tools — heat map, scroll map, overlay, and confetti.
  • Loop11: Use this tool to easily create usability tests — even if you don’t have any HTML experience.
  • The User Is Drunk: Pay Richard Littauer to get drunk and review your site. Don’t believe me? We tried it.

For even more helpful options, see our list of the best user testing tools.

Hopefully, these guidelines are useful in informing the structure of your web pages and website as a whole. But, how does one put these guidelines into practice? In the next section, I’ll run down the essential page elements that you should strongly consider including in your design plan.

1. Header and Footer

The header and footer are a staple of just about every modern website. Try to include them on most of your pages, from your homepage, to your blog posts, and even your “No results found” page.

Your header should contain your branding in the form of a logo and organization name, menu navigation, and maybe a CTA, and/or a search bar if well-spaced and minimal. On the other end, your footer is where many users will instinctively scroll for essential information. In your footer, place contact information, a signup form, links to your common pages, legal and privacy policies, links to translated versions of your site, and social media links.

2. Menu Navigation

Whether it’s a list of links across the header or a tidy and compact hamburger button in the corner, every website needs a guide for navigation positioned at the top of at least your homepage and other important pages. A good menu limits the number of clicks to reach any part of your website to just a few.

To reduce clutter, you might consider making some or all menu options a dropdown menu with links within it, as can be seen on HubSpot’s homepage.

homepage for hubspot.com

3. Search Bar

In addition to menu navigation, strongly consider placing a search bar at the top of your pages, so users can browse your site for content by keyword. If incorporating this functionality, make sure your results are relevant, forgiving of typos, and capable of approximate keyword matching. Most of us use a high-quality search engine every day, be it Google, Amazon, YouTube, or elsewhere. These all set the standard for your own site search.

4. Branding

Remember the conventions we’ve discussed? One that you see practically everywhere is a logo in the top left corner. On first landing, many visitors’ eyes will instinctively shift to this region to check they’re in the right place. Don’t leave them hanging.

To reinforce this notion, incorporate your company branding into every element you add, piece of content you post, and color scheme you create. That’s why we recommend establishing brand guidelines if you haven’t already — check out our style guide for a reference.

5. Color Palette

Color choice plays a major role in your site’s usability and UX as well. This decision tends to be more subjective than other requirements in this list. But, like everything else we’ve discussed, try to simplify — limit your color selection to 3-4 prominent colors at most.

Starting a color palette from scratch can be surprisingly difficult the first time. We seem to intuitively pick up on which colors work well together and which don’t, but we stumble when trying to pick from the infinite combinations available.

The solution? Try a color palette that’s been shown to work on other websites. Take influence from your favorite sites, and see our list of our favorite website color schemes to get started.

6. Headers

Headers are key to establishing the visual hierarchy we discussed earlier, especially on text-heavy pages. As users skim your pages what you need, a clear and to-the-point header alerts readers to stop scrolling after finding what they want. Use only as many headers as there are distinct sections of your page, as too much blown-up and bolded text will dampen this effect.

7. Clear Labels

Whenever a user takes an action on your website, it must be obvious exactly what they’re doing and/or where they’re going. All buttons should have clear text or an icon to precisely and concisely signal their purpose. The same goes for in-text links and widgets (simple interactive elements, like dropdowns and text forms).

For example, a button linking to a pricing page should just read “Pricing” — anything beyond that (e.g., “See our prices”, “Check out the pricing page for a deal”) is superfluous. A search bar/button only needs a search glass icon (🔍), and perhaps also the word “Search”, to denote its purpose.

User testing can be a major help here. While you yourself know what all of your interactive page elements do, the same can’t be said for a new user. Testing will give valuable insight into what users think your labels mean beyond your own perspective.

8. Visuals and Media

When incorporating static images, gifs, videos, and other media into your pages, remember to be consistent and intentional in your choices. These elements will draw attention over most other text and will likely stay in users’ minds, so choose wisely.

Here’s just one example of effective media on a homepage. Notice how every image complements the page aesthetic and supports the offer of personalized fitness training with results.

an example of web design guidelines used on a web page for a personal training gym

Image Source

Also, all images and videos should be optimized for search engines and include descriptive alt text for accessibility.

9. Calls to Action (CTAs)

Having a pleasing website is great, but how do you know whether your visitors are actually doing what you want? Are they engaging with your content? This is where CTAs come into play.

A CTA is any page element that prompts user action. The action could be adding a product to a card, downloading a content offer, or signing up for an email list. Make your CTA elements prominent in the visual hierarchy (remember our Spotify example), but not intrusive or distracting like many click-through ads tend to be.

If you need ideas for sleek CTAs that drive more conversions, see our CTA examples list.

10. Whitespace

That’s right, sometimes it’s about the elements you don’t include. After reading these guidelines and requirements, you may feel tempted to stuff your pages with all the bits and bobs needed for a flawless UX. Don’t forget that your viewers need room to digest all this new info, so give your elements room to breathe.

But, how much whitespace should you have? That’s another personal call, and varies from site to site. So, user testing is handy here as well. What are people focusing on? Do they feel overwhelmed with the density of content? Once again, it all ties back to our first guideline, simplicity.

Design that Puts Users First

Indeed, web design is largely subjective — your website’s look and experience isn’t going to please everyone. However, there are also tried-and-true UX principles that, when carefully considered and incorporated, help visitors feel more at home.

According to Amazon Web Services, 88% of website visitors are less likely to return to a website after a poor experience. And how could you blame them? We’ve surely all been there.

So, as a final bit of usability/UX wisdom, start caring more! Imagine yourself into the shoes (or, more accurately, browser windows) of your visitors, and keep them in mind every step of the design process.

Blog - Website Redesign Workbook Guide [List-Based]

Originally published Sep 3, 2020 7:00:00 AM, updated September 04 2020

Topics:

Website Design

Does your Website Make the Grade in 2020?

A while ago (as in 12 years ago) we created the first Website Grader. The goal was simple: help anyone with a website evaluate its effectiveness at attracting an audience of interested and relevant buyers.

We founded HubSpot in 2006 and created Website Grader in 2008 because we believed that the inbound methodology — building meaningful, lasting relationships with prospects and customers — was not only a more effective way to grow a business, it was the right way to grow a business. And we knew how important it was for people to leverage their websites to attract visitors and connect with customers to grow.

How strong is your website? Grade it using HubSpot's free Website Grader.

Fast forward to 2020, and websites do a whole lot more than attract visitors.

Your website is a sales rep, providing prospects with the features and pricing of your offering. And helping them book a meeting to learn more.

Your website is part of your customer service team, answering questions about your products and services through a knowledge base or chatbot.

Your website is a member of your HR team, sharing information about your company culture and open positions.

The list goes on…

To put it bluntly: your website is really freaking important! Today, 86% of people will find your business online (Small Business Trends). Your website is your first impression, your primary spokesperson, your around-the-clock inbound sales team … you get my point. It’s one of the most important assets to your business.

It’s no wonder we see businesses invest so much in their websites. In a recent HubSpot Research study, 63% of marketers indicated that they were going to upgrade their website this year.

Website upgrades can include:

  • Performance: Page speed, load time, page requests, page size, and more.
  • Search Engine Optimization (SEO): Page index, meta descriptions, content plugins, and descriptive link text.
  • Design: Responsive design, legible font size, and tap targets.
  • Security: HTTPS and secure javascript libraries.

Since 2008, we’ve graded over 1 million unique websites on the above four factors. With all this investment, are they actually getting better? Are businesses focusing on the right website upgrades? For example, are websites providing better security for their visitors. Are they offering faster load speeds for quick access? What about mobile accessibility and SEO best practices?

Let’s take a look at average performance in 2015 compared to this year to see what’s changed.

Website Performance Data (2015 vs 2020)

HubSpot website performance data

Source HubSpot Research in 2015: data from over 1M unique websites graded. 2020: new data from over 250k unique websites graded.

What surprises me the most about this data is that the improvements in technology over the past five years haven’t led to the same improvement in website performance. The overall grade average has only improved 16% in five years, and performance has actually decreased by 17%. The average website grade in 2020 is a D+ (67 out of 100). My mother wouldn’t be happy if I came home with that kind of grade.

We also found that only 3.8% of websites have an overall score of 90 or more. If your website scores above a 90, pat yourself on the back. Here are the percentile ranges from our data:

  • 80 overall score: 82nd percentile
  • 85 overall score: 91st percentile
  • 90 overall score: 96th percentile

Here are some of my observations of the individual benchmark scores:

Website performance has decreased over the past five years.

Websites should load faster in 2020 than they did in 2015. But the exact opposite is true. Performance was the only benchmark metric that decreased in five years. It includes tests for page size, page requests, page speed, and five additional tests that offer a holistic performance grading. Websites are slower today than they were in 2015.

This is a risk for businesses: 40% of visitors will leave your page if it takes longer than three seconds to load (Think With Google).

For every second that your website takes to load, people are leaving your business. Good performance should be a priority when improving your website. How does your website’s performance compare?

Search engine optimization is the biggest winner.

In a 2020 survey, we found that 64% of marketers are actively investing in search engine optimization (SEO) and growing their organic presence (HubSpot Research).

Marketers care about SEO, and this has led to significant progress in the SEO benchmark since 2015 — a 52% improvement. Search engine optimization is essential to getting found online. It’s good that so many websites are following SEO best practices to improve the discovery of their business. How does your SEO compare?

Security had the second-biggest gain, but the total average falls short.

Our security benchmark shows that websites have improved their security by 46.2% over five years. This is a nice gain but there’s still a lot of room for improvement — the 2020 average score is only 3.8 out of 10.

Security is essential to have on your site to protect customer data. If your website isn’t secure, your visitors can lose trust in your business, especially when shopping on your site. We found that 85% of people won’t visit a site if it’s not secure (HubSpot Research).

Additionally, security improves discoverability. Starting in 2019, Google prioritized displaying websites with HTTPS in search results (The Next Web, 2015). Website Grader checks that your website uses HTTPS and has secure JavaScript libraries.

These two security factors are critical for delivering a secure experience for your visitors. How does your website security compare?

Mobile optimized websites improved marginally.

In the mid-2010s, it felt like every website was going responsive — that is, investing in mobile-first website design. It made sense.

Everywhere I looked, people were heads down on their phones, reading the latest Facebook post or watching the latest viral YouTube video. And, things haven’t changed much. Well, they have, but now people are scrolling through Instagram or browsing the latest TikTok dance challenge.

Responsive wasn’t just a trend — today, mobile devices, excluding tablets, generated about half of all website traffic globally (StatCounter, 2020). So how do websites stack up on small screens?

We found that our mobile design benchmark average improved by 8% over five years. Today, average websites score 21.6 out of 30 on mobile design. A great improvement, though I’d love to see that number go up even more.

One study by Google found that 59% of shoppers surveyed said that shopping on mobile is important when deciding which brand or retailer to buy from (Think with Google, 2019).

That’s a huge portion of people looking at your website on mobile to make a decision of whether or not to buy from you. Mobile design will not only impact the experience that people have with your site but it also influences social media posts and your rankings in search engines.

Check your mobile design score on Website Grader.

Where do we go from here?

Our goal with the original Website Grader was to help anyone with a website —developer, marketer, or entrepreneur — to quickly grade their website’s performance. We’ve received good feedback from our users, but we are always growing and evolving.

So we asked ourselves, how could we make Website Grader better?

Our users’ comments had a common thread. They graded their site. They saw where their websites fell short. But we stopped short of teaching them how to improve:

  • More information about how to solve website problems
  • Instructions on how to get better performance and SEO to get our score higher
  • How about putting explanations and guidelines for beginners?

Introducing the New Website Grader

You talked. We listened. Not only have we updated Website Grader’s grading system and foundational technology to get you a more accurate score, we’ve also created a five-lesson video course that helps you improve your grade. All for free.

You can find the Website Optimization course inside Website Grader starting today.

One last question: How did HubSpot.com score?

HubSpot’s score has not historically been the best. We averaged 70-80 on Website Grader. Years of marketing updates had slowed things down over time. We’ve worked hard to improve HubSpot.com’s design and performance over the last five years for our visitors and customers.

Powered by HubSpot CMS Hub, our website now scores a 100 out of 100 on Website Grader — no kidding. It’s something I’m extremely proud of.

Run your site through Website Grader. And let me know you did!

Improve your website with effective technical SEO. Start by conducting this audit.  

Originally published Jun 22, 2020 7:00:00 AM, updated June 22 2020

Topics:

Website Design

How HubSpot Manages a Giant Website With a Tiny Team

I can’t write a single line of code.

So, it was a big surprise to me when I was asked to lead our new global web strategy team three years ago.

If you’ve followed HubSpot’s history, it’s also probably a big surprise to you that we had 20,000 customers and went public years before we had a team to manage our web strategy.

And, as you might expect, things were pretty complicated before my team was implemented. Prior to 2016, we referred to our giant website as “the wild, wild west.”

Learn More About HubSpot's CMS Software

The brand team owned the homepage, but anyone who asked for access could make or edit any of our web pages. The web developers and designers had an endless list of requests, but no way to prioritize them. And while some individual marketers measured the success of pages that contributed to their lead goals, nobody was measuring the overall success of the website.

You may be wondering how the HubSpot marketing team could fail to recognize the need for someone to manage its websites. The truth is, it wasn’t a matter of ignorance. — It was actually a matter of fear.

HubSpot has always had an autonomous culture. Before the team was implemented, stakeholders were afraid introducing a centralized team could hinder that autonomy. Because most of our marketers and cross-functional teams used the website for their initiatives, marketing leaders worried that one management team would slow people down or stifle innovation.

We needed a strategy for managing our websites that could accomplish our team needs: it needed to empower the many people at the company who contribute to the website and ensure a consistent user experience that delivered on measurable business goals.

As the days of the “wild, wild west” ended, my team, limited to a small group of people as we proved our worth, began creating a web management process.

The website management strategy we have today isn’t perfect, but it’s helped us grow and restored some sanity to the creators working on the site. Our team of just 17 people is able to manage our core website in six languages while providing an optimal user experience and consistent branding across our web properties.

Since developing the centralized website management team, we’ve grown the conversion rate on our core site by 76% while redesigning multiple related sites and site sections. And, thanks to the tools we’ve used, we’ve only needed to grow the team by a few people.

If you don’t have a huge budget to keep an agency on retainer or hire a full army of developers, here are five tips on how to scale your web strategy with a small team. For each tip, I’ll walk you through how we did it in our own strategy.

How to Develop a Scalable Website Strategy Like HubSpot

1. Identify your website’s purpose and goals.

Customers often touch a brand’s website at every single stage of the customer journey: From their first interaction of reading a blog post to looking for customer support documentation after they’ve become a customer.

This puts a lot of demand on a website and the team that manages it.

Since our strategy could go in multiple different directions, our team first needed to articulate a clear purpose. We did this by crafting mission and vision statements.

  • Our Mission: Help professionals grow their businesses better by connecting them to HubSpot’s content and software on our global websites.
  • Our Vision: Oversee HubSpot’s websites to ensure that they are on brand, user-friendly, global, and optimized for conversion.

We also wanted to go one step deeper in our responsibility to the business by creating some quantifiable goals.

When determining our KPIs, we debated between using click-through-rates, conversion rates, or estimated revenue. We ultimately decided to track the overall website’s performance by conversion rate.

The conversion rate was relatively easy to measure and the most isolated KPI that would relate most to the work that we’d do.

We also considered using revenue as our main measure, but we lacked direct attribution reporting. Revenue can also be impacted by many external factors such as changes in average sales prices and sales close rates. However, we still used revenue to evaluate the winner for any conversion rate optimization tests that we’d run, as they would be taken over a short period of time and less subject to changes in those external factors.

To make sure we still put the customer experience first, over quantified business metrics, we created a hierarchy of website goals.

Hierarchy of website goals

We felt this hierarchy was important to document because being too focused on increasing numbers like conversion rates can lead to bad behavior. Examples at their most extreme include the extensive use of misleading clickbait copy or interruptive pop-up CTAs. I wasn’t worried about my team getting that misguided, but we had seen pages that were off-brand or could be confusing to some users that still yielded high conversion rates.

We wanted to hold ourselves accountable for having the best of both worlds — iterating and testing a subpar design until we could find a variant that converted well, was consistent with our brand, and could generate positive user feedback.

2. Choose a content management technology that meets your team’s needs.

To help manage a website without a full team of developers, both big and small brands often use content management systems.

CMS platforms allow those with less web experience to create or design webpages or content using a simple interface. Meanwhile, those with development or coding knowledge can still customize or make more advanced changes to a website. In short, a CMS enables most employees to contribute productively to a website without any help.

Our website has always been powered by HubSpot’s CMS— as you probably might have guessed.

As HubSpot employees, we like to use our own products to do our jobs. Aside from staying loyal to our own brand, the CMS aligns with our web management needs,

The CMS software was designed for quickly-growing companies just like our own. It’s powerful enough to handle the governance and other website management needs our development team demands, and straightforward enough that marketers who can’t code can still easily use it. It empowers web managers or editors of all levels to create or manage successful website content.

Aside from the CMS, we also use our CRM, Marketing Hub, Sales Hub, and Service Hub.HubSpot products that power different aspects of our website. For example: while the Marketing Hub helps us with SEO, analytics; and automation, the Sales Hub allows us to enable chatbots and live chat on our site.

With HubSpot, we can also integrate third-party software to help us execute our strategy. Here are a few examples of helpful tools that work with HubSpot:

  • Cloudwords: For localization of our non-English websites
  • Google Analytics: For measuring web traffic, click-through rates, conversion rates.
  • Google Optimize: For running conversion rate optimization experiments. We use this to complement HubSpot’s own testing tools.

3. Plan your operating model.

When you count every single blog post or landing page in every language across all of our domains, we have nearly one million website pages. That’s a lot of content to maintain and optimize. Our team simply can’t touch every page.

To help us manage even the pages we don’t regularly touch, we needed to develop a system of ownership and prioritization that would find the right balance of empowering other marketers to manage aspects of the site, while still maintaining control over consistent user experience and business goals.

So we developed a framework to define ownership across our various websites:

Framework for website management strategy

The design and development teams also created a Web Style Guide, which made it possible to have a flexible website that empowered others and ensured a consistent user experience. This guide is a toolkit of consistent, on-brand web modules that other stakeholders can use to create and edit website pages. These modules are the building blocks for making a landing page.

With all marketers and website stakeholders pulling from the same library of modules, there’s an automatic system in place to ensure a consistent user experience across our many site pages. And if we want to make a global change to update a design element, like one of our brand colors, our developers can roll it out universally.

If you’re building out a web strategy for your site, you’ll also want to prioritize what tasks are important for your core team and which site pages can be delegated to other marketers.

For example, if you have a core website and a robust blog, you might want one marketer to oversee the website’s main pages, while a blog manager manages your blog site. This will free you up to focus on the larger branding-related tasks that we were able to take on.

4. Identify talent with different strengths for your website management team.

Odds are, your website will have many different elements to it, such as a homepage, a mobile-optimized design, a blog, or product purchasing pages. Because of this, it only makes sense that you should build a web strategy team with multiple types of marketers that can give you insight on how to maintain each aspect of your site.

One of the really unique things about our team is that it brings together people with a wide range of expertise, all working towards common goals. Our group is incredibly cross-functional, and the work we create is a testament to the power of diversity of thought.

Below are examples of people you’ll want on your web strategy team. In my case, the people in the following roles don’t all report to me. However, I still consider anyone outside my direct org a member of my team:

  • Conversion Rate Optimization strategists: Use qualitative and quantitative data to run experiments and improve the conversion rate on existing pages, or apply these principles to creating successful new pages
  • Copywriters: Write short-form copy for website pages based on the audience’s needs and business goals
  • Web developers: Develop site pages, applications, and user experiences
  • Web data analysts: Implement analytics technologies and analyzes data to identify opportunities
  • Project managers: Prioritize projects and facilitates collaboration across the team
  • International website champion: Establishes our localization strategies across our various language sites

5. Prioritize your goals and projects.

As you scale up, it can seem like there are hundreds of things to do on your website. It can be hard to identify what’s really the most important thing to be working on. Even when you do, a sudden product launch or company announcement could cause you to need to change course on a project.

Once your website strategy and your team are in place, it’s crucial that you continue to prioritize work in a way that aligns with the goals, mission, and purpose you’ve decided on.

On our team, work falls within three main categories:

  • Optimization: Conducting research to understand data and user behavior to inform website experiments intended to increase conversion rates on a page (ex: A/B testing copy headlines)
  • Business Updates: Altering copy and design on a page or multiple pages to communicate information about our product offerings, brand messaging, partner programs, etc. when there is a strategy change (ex: launching a new product)
  • Redesigns: Completely altering the site structure or making significant, multiple changes to design and copy all at once based on a complex business strategy change or insight about user behavior (ex: updating the site navigation and corresponding pages to simplify conversion paths)

Aside from picking key areas to focus on, as we’ve done, you should also consider an annual planning process or meetings designed for prioritizing upcoming tasks.

In our case, we always have more project ideas and opportunities than team bandwidth. And business changes come along all the time that we weren’t expecting. This combination has led us to create a diligent annual planning process with quarterly revisions.

At the beginning of each year, we spend time with leaders across the business to understand what business updates are coming and how they’d like the website to better support their initiatives.

We also create our own wish list where we see opportunities and create an additional bucket for ongoing maintenance, experimentation, and unforeseen projects.

Then, we determine how many people we’d need across our many disciplines to execute on every project. This helps us create a prioritization system to rank the projects.

After a series of meetings with the marketing leadership team, where we iterate on headcount and prioritization, we end up with the list of projects we’ll commit to delivering.

Every quarter, we revisit the priorities and make adjustments based on any business changes, new opportunities identified, or shifts in goals from our team or the broader business,

Through this process, we’re able to prioritize more urgent matters, while still being able to revisit or re-prioritize the less urgent matters in the future.

6. Recognize potential challenges and make goals to work through them.

Even if you have a winning team and an army of developers, you still will run into challenges as your site grows and your brand evolves. When running a web strategy, it’s helpful to acknowledge those challenges and how you’ll combat them.

Our team has come a long way in establishing an effective and scalable website model, but we still have a lot of room for improvement.

One of the main things we struggle with, which is common to any growing company, is finding the right balance of executing against short term goals with building scalable systems for the future. Trying to do both can feel like already driving a car while you’re still trying to build the car.

We’re trying to get to the point where we never have to do a classic redesign to any of our sites or site sections ever again; instead, we want to continually optimize, update, and evolve our web properties through testing and ongoing improvements.

Start Building Your Website Strategy

Even after three years of directing global web strategy, I still can’t write a line of code.

But, as long as I have a great tech stack and a team that’s committed to empowering marketers, I don’t intend to learn.

If you’re a marketer at a growing business, you don’t necessarily need to be a development expert to lead its website strategy. If you can envision what a smooth website experience looks like for your customers, navigate a CMS, and pick the right mix of development and marketing talent for your team, you can build a successful process.

To learn more about how to build an effective website or scale up your strategy, check out this step-by-step guide to creating a website, or this post on redesign strategies. If you’re interested in testing out our CMS, click here for a free trial.

Discover videos, templates, tips, and other resources dedicated to helping you launch an effective video marketing strategy.