What Makes a Good Ecommerce Header Design

The header can be argued that it is one the most important parts of a website. However, most sites do not take advantage of it. In this post, we will review what makes a good E-commerce header design by identifying the elements most commonly added and which ones might matter the most when thinking about conversion.

Before we begin, I always like to mention the term buying personas when working with clients. Because each person is different just like a personality, a buying persona is the buying style of a user. There all several styles to consider but not many. Some experts will say six while others will say five. Let's get them all in this posts as an example.

Good Ecommerce Header Design

Buying persona:

• Decisive
  Could be considered the "Driver" and one that wants to get it done and mess around thinking about it. Does not care about the details and typically already made up his or her mind before entering the site.
• Collaborative
  This buyer will get a lot of opinions before buying. Likes to feel good about the buy based on maybe looking at reviews, asking a friend, and expects not to be pushed into the sale.
• Relationship
  This buyer wants to feel at one with your brand. They're looking for social interaction and a welcoming entry. Do not oversell to where they are stuck in the technical details.
• Skeptical
  This buyer is a very critical thinker. More introverted and does not care to communicate. There are going to be sold on facts and data. Make your products easy to find and then reinforce with trust messaging or a form of confidence for buying your product.
• Analytical
  This user is going to look at everything before making a buying decision. They need to understand the product, who's buying and why, what are the reviews, and does the brand align with any organizations that matter. In short, your hardest sell. A good user experience and brand experience will be important for this sale.
• Innovator
  Considered the creative one of the bunch. Likes to give input and will be the most likely of the 6 to give reviews about the product. Like upgrades, new models, and pushing the limits because they are never happy with the status quo. Always on the move most likely swayed by limited time deals.

So when thinking about designing and laying out the elements, you should consider that not everyone is like you giving more in most case will be better. What we like to do at Bright Vessel is break down the elements required by clients and then add or subtract items that may or may not fit into the header.

Common Header Elements:

1. Logo
   Branding will be the most important element in the header. You want your logo to easily be identifiable to the customer and resistant so first time user will recognize your brand later.
2. Company Specific URLs
   These URLs will be about the company which could be "About Us, FAQs, Contact Us, Etc."
3. Checkout URLs
   These are your shopping and checkout URLs. These are critical. Do not bundle up with brand URLs. When a user sets down this path, you do not want them turning around.
4. Search
   Probably one of the most essential items for conversion on sites which have an extensive catalog. Make this prominent.
5. Tagline
   This is where you speak directly to your user by showing the brand differentiator and key benefits.
6. Shopping URLs
   If your site were a local store, these would be your isles. Having easy access to your categories or type of products will be critical to all kinds of buyers.
7. Outstanding Deals
   Having your most important deal front and center is a common practice and one that converts. This could be text like "Free Shipping" or could be a designated sales area for many of your products.
8. Contact Details
   In a few of those buying personas, we just talked about a key element was trust. Having the ability to easy contact customer service will make the user feel comfortable not to mention phone sales convert in some cases 800% more than web sales.

We recently worked on a site called Miracle Botanicals and launched a refreshed version of the header. Before completely redesigning your site, consider rolling out changes to specific areas to test results. Changing the complete user experience could make a dip in conversion before seeing it improve.

Before Header Changes

After Header Changes

For more great tips on designing an e-commerce site, check out this article 21 Tips for WooCommerce Website Design.

If you need help in improving your website design or want to achieve a better conversion through testing certain areas. Feel free to contact Bright Vessel for a consultation.