Header Design Process

This Header Design Process checklist is engineered to help guide you through the steps of overhauling the header on your website and doing so in a customer conversion focused manner. 

The website header is often the first thing a customer sees when they come onto your site. 

What colors have you used, what text or icon jumps out, and what options does the user have to navigate to next?

These are all important considerations when developing a new website header. 

As you work through this checklist, you will find form fields which will help you record your research and document your process. You can edit this template at any time to tailor it to your process, or to optimize and improve it after you have completed the process. 

Check out the video below for some inspiration for your website header design.

As the first step, consider all the different elements which could be included in a website header. We’ve listed a selection of potential items in the subchecklist below. 

Go through the checklist and tick off the items which are crucial to include on your website header.

Different websites will require different elements depending on their purpose. The Process Street homepage has a very minimalist website header. 

Whereas, an e-commerce outlet like Topman takes a very different approach.

To help provide you with inspiration for how best to structure and design your website header, you will need to do some market research. 

The first step is to look at either your competitors or other websites which provide a similarly structured service. 

This helps you understand what your users are likely experiencing on other websites. Familiarity in design can be a very useful tool to simplify user journeys.

Record 5 similar websites in the form fields below.

This second researching step allows you to be a little more creative. 

Your competitors’ structures may not fit with your Brand Identity or may not be optimized as well as they could be.

Find 5 websites which you like. This is a subjective experience, but if you find them easy to navigate while also being stylish then there is a high likelihood others may feel the same. 

Record the 5 inspiration websites in the form fields below.

You can use our UX Design Process checklist in order to help you fully understand and tackle user experience on your website. 

Alternatively, you can formulate a series of questions about how users interact with your website and gather the research in this more simple manner. 

Potential questions could include:

• For what purpose do you normally use our website?
• What difficulties do you have when navigating our website?
• How clearly do you feel the categories help you understand the content they contain?

Use the email widget to send out questionnaires to some existing users about their experience on the site. 

Alternatively, you could create what we at Process Street call the "run link" to run your research.

The run link is a link which when clicked automatically runs a new checklist from a predetermined template. 

The end result would be that all the information gathered from all the interviews is stored in the overview tab of the new template you create.

To allow anyone to fill in a checklist in the form of a survey, when you choose the option to create the run link, select "Anyone can create a new checklist" as shown below:

Then you can send anyone the run link and have them complete the questionnaire.

This will result in all your information being stored in one place.  

Your header is a central part of your website so it may appear harder to test than other smaller superficial changes. 

One option you have available to you is to create alternative landing pages with differently structured headers. With these landing pages active, you can begin to find out how users interact with them and understand what works and what doesn’t.

Effective user research should never stop at the point of feedback. Assessing users’ behavior is arguably more important than their opinions. 

As Henry Ford famously said, if he had asked his customers what they’d wanted he would have built a faster horse. 

Depending on your resources, there are some simple tools to very quickly create landing pages including LeadPages. Using third party services like these can also help you iterate quickly. 

You have different options when approaching testing your website header in the wild. 

You could find a testing group and perform your research in a more qualitative way. You could sit with your testers and set them tasks to navigate through your website using one of the different header iterations. You can segment your testers and give them different headers to interact with depending on what group you have put them into. Then you can monitor your testers and see how each header version performs. 

Alternatively, if you have money to invest, you could create an advertising campaign which directs people to one of your landing pages. You can then see how many people click through or navigate to a product they may want to buy. This can give you larger scale data from users who don’t feel like they are being monitored.

With both of these methods, you would be employing A/B Testing which lets you compare the performance of different iterations of the same product in order to determine which performs best. 

Upload the results of your testing below.

Now that you know which header performs best and fits in with your branding style, you can implement it and make it live. 

Finished. Job done. 

Well, not quite. It is important to continually test the performance of your website and how users interact with it. 

Here is a list of tools you should consider investigating to find out which might help you optimize your website further in future:

• Optimizely
• VWO – Visual Website Optimizer
• KissMetrics
• CrazyEgg
• LuckyOrange

• Web Design Process
• UX Design Process
• Brand Identity Design
• Header Design
• Engineering Design Process
• Graphic Design Process
• Logo Design Process

• 55 Awesome Website Headers For Your Inspiration | Top Design
• How to Design a Website Header & What To Put In a Website Header
• How To Design A More Effective Website Header – Usabilla Blog
• Clean UI Trends for Large Website Headers – Web Design Ledger
• Designing A Website Header Image | Elements To Consider – Crazy Egg
• Website Header Design: 44 Cool Examples of Headers – Design Your Way