Marketers Produce A Customer Experience Through Seven Website Design Elements

3863527796_f0f2dabac2_m My agency has been designing custom user-centric websites for the past 17 years for small, medium, and enterprise customers worldwide. The website sizes, goals, and target users vary, but they usually have one thing in common—many companies have absolutely no idea where to start when building or redesigning a website. Should you begin with the design or the content?

Most marketers are excited to get started on the design of their website. They may even have a look and feel in mind. That's great - but it's important to remember that the design process extends beyond choosing a layout or picking desirable colors. Where we focus first is on each company's users, specifically considering how we can build an experience specifically tailored to their needs.The end result is a web experience that marketers and their customers love .

Our agency accomplishes this by asking the right questions and helping our clients sort out their content. Admittedly I am hyper-critical of poorly designed websites, particularly when the website tries to speak to everyone and in reality doesn't really speak to anyone. These are the sites that feel rigid, generic and lifeless- "template-y". This rigidness is the exact opposite of what you want. By focusing, first, on the people using your site, the design will naturally fall into place. The content you create for your users always comes first.

But where should you begin? Our agency follows this three-stage process to decide the purpose of a website before designers even join the conversation.

1. Strategy Stage

Research how each of your personas will use your website

It can be challenging to truly understand the purpose of your website. However, people are already visiting your website for specific reasons. They already know what they are looking for, but do you?

Here are some example questions to ask yourself when researching your website's purpose:

Why dostrangers land on your site?
What aboutcurrent customers? What information do they need?
How about yourvendors and partners? Are there resources that could be more easily accessible via your website?

Once you answer these questions, brainstorm all of the information you could deliver, questions you can answer, and how you can help a person with when they are using your site.

For example, let's say you run a pharmacy. Your typical users might include:

A customer looking for information on the referral process, trying to request a refill, looking to speak with a pharmacist, or simply trying to find out when you're open.
A healthcare provider also looking for information on the referral process, but who might need to send over a prescription, or find out what products you carry.
An insurance company trying to process billing requests, or looking to partner with you to serve your customers.

To help figure out how your users interact with your content, consider your buyer personas and the buyer's journey. Who are your ideal customers, and what do they need to achieve their goals? Use that research to develop your content, step by step.

Once you have brainstormed this content, try to collect it into concrete pages. In most cases, each goal that you define should have it's own page. Some pages, of course, will aim to solve multiple goals, such as your homepage.

In order to better visualize your site and organize your brainstorm, write the following information on a stack of notecards, with each notecard representing a page you plan to build:

Page Title:
Page Goal:
Primary Persona Focus (if relevant):
Buyer Persona 1:

Buyer's Journey Stage/s:
Buyer Persona 1 Focused Content:

Buyer Persona 2:

Buyer's Journey Stage/s:
Buyer Persona 2 Focused Content:

(Add one of these sections for each persona that your company works with.)

If you can explain these vital pieces for each page that you're planning on creating, then you've done enough research to move onto the next stage, Site Mapping.

Pro Tip:Talk to the people who answer the phone or respond to your general email account. These people are on the front lines, taking and routing every single call that comes in. What sort of questions do they answer every day? Where do they forward their calls? Use their answers to gather intelligence about your users.

HubSpot Note: Having trouble getting started, or not quite sure who you're writing for? Watch the HubSpot Academy Buyer Personas videos to get started. There's also a brand new app in your HubSpot dashboard called Personas, which can help you map out your website's personas.

2. Site Mapping Stage

Storyboard your whole site from A to Z

Now that you've done some research about why people come to your site, you'll want to start organizing your ideas. The best sites are often the most simple in terms of their architecture, so it's important to prioritize your ideas based on what is most necessary to help your users reach their goals.

Often times when we take on a new client, their site is already organized into as many as ten different sections, which is simply too many. By taking the time to sit with them and recognize which parts of the site are the most relevant to a their experience, you help align the content around what a user actually wants, not what you think they want.

Here's a common User Experience Design exercise that you can try to help you get started:

Grab your notecards from the exercise, above, and spread them out on a table. Then, organize those notecards into groups, aiming for around 4-6 groups, maximum. This is called a card sort, and can help you understand how to structure your content. When you've narrowed everything down to 4-6 sections, try to give each one a name. Often, your results in this exercise can be used to plan your site's navigation menu and structure.

Pro Tip:Try not to work in a bubble. If your business has been around for a while, chances are that you have customers who can give you feedback. Why try to put yourself in your customers' head when you can ask them directly! Have them perform this card sorting exercise as well to see what they come up with. Was it different? The results may surprise you!

No customers to work with? Try it with your colleagues or acquaintances who represent aspects of your buyer personas.

3. Writing Stage

Write out and/or organize all of the copy you want to feature on your page.

By now, you're almost ready to work with your designers. Before you can do that, however, you'll need to start writing. Write out every last piece of content that you plan on featuring on your site in a basic word processing program. This way, you'll be able to hand your content off to a designer to designaround, allowing them to work with your ideas rather than approximating. This can make the design process much easier.

When creating page content, a good rule of thumb is 'the deeper the page, the longer the text'. In other words, your homepage content should be short, focused on holding attention, whereas pages that require a few clicks to find, such as product descriptions, can be a bit longer.

One your content is done, you'll need to deliver it to your designer, along with key website structural items, including:

Your company logo
Navigation menu items
Main Page Heading (the largest text on the page)
Page Subheading (appearing under the main page heading)
Calls-to-Action
Other sections of text, with heading.
At least one descriptive, relevant image

That is a starter list, but feel free to deliver even more content to your designer. In fact, look to websites that you admire for inspiration. What types of content do they include on their homepage? Their landing pages? Their product pages? If you see something you'd like to include as well, send it over!

At this stage, more is better. Keep in mind that the design process is often a reductive one, so while it's best to keep things simple, it's okay if you have too much content at the start. Part of a designer's job is to trim content down into manageable pieces.

Pro Tip:Don't pad your content with business jargon. It may sound smart, but most of your audience will end up skipping over it. Instead, write the way you'd talk on the phone. People like people.

mj-screenshot-05

HubSpot Note: Your content should always align with the Buyer's Journey. If you aren't familiar with the Buyer's Journey, we'd suggest watching HubSpot Academy's Content Creation videos.

Remember, Your Content Comes First.

Our own experience has taught us that you simply cannot design effective websites without planning content, first. Trying to fit your content into a cookie-cutter template often results in last-minute redesigns, frustrated hacking, sacrificing content, and a user experience that is more about you than your customers.

In the end, your site's design shouldenhance your content, and not distract from the goal of each page. Good design is important to draw a visitor in, but your thoughtful content is what will keep them there.

photo credit: rahego via photopin cc

Looking to redesign your website? Take a look at HubSpot's Custom Match program, which helps pair you with the perfect design agency.

Do you have an Inbound Marketing story to share? It takes just a minute to submit your story and you can be as creative as you like. Check out previous stories for inspiration.