In this article, we audited a list of world top e-commerce websites header and analyze how they designed and presented each conversion element in their website to increase conversion rate. What you can learn from this article is that, You can scrutinize world top sites and apply the conversion driven design in your own site. So, this e-commerce site audit report is with you to grow more sales and profit from your online store.
According to 80/20 Rule of Marketing/Revenue (80% Revenue Comes from 20% customers), a special customer group is very important for sustainability and gradual profitability of ecommerce businesses.
As from this 20% of the prospects, businesses get 80% revenues, this special customer group is much more important to each brand of the ecommerce, and every reputed business brand optimize their site for this 20% of the customers.
Generally, when you advertise (or organic traffic) on Google or Facebook or other paid media, then by clicking on the ad, a person may land on your landing page (the landing page and home page can be different or same in special case).
If the landing page is optimized enough at appropriate level and if the customer feels that the product/service is immediately needed, then conversion rate may increase.
According to a Global Statistics report, almost 30% of the landing page traffic leads to home page of the site by various searches. This means that about 30% of the traffic comes automatically to home page, even if the header, footer, navigation menu is fully invisible, this particular traffic tries to find home page, observes home page headings, headers, footers and other essential components. THey click on different menus to search for specific details. In this way, if they have minimum satisfaction over the site, then the conversion rate is increased.
This is that special 20% group people from which you will earn 80% revenue in the future. And in the remaining 80% traffic, there will remain some lookiloos and tire-kickers, and you get only 20% revenues from the remaining big traffic group.
Then who is important to you for increasing high profitability and sustainability of your business? Undoubtedly those 20% special groups?
For whom will you optimize your site?
For whom will you optimize the header, footer, home page, category page, product links pages?
Who need to be optimized?
Yes, those 20% special groups whose chance is there to become future customers.
Site header design creates trust, as well as it is a portrayal of your business brand, furthermore manages eye stream.
The eye flow dictation really matters, on the grounds that you need to ensure prospects are looking in areas that is important to them. An uneven header that does not have any visualization of command will confound the prospects, and a befuddled shopper does not want to buy anything from your site.
According to another statistic, just as much as 5% of traffic who lands on home page, search something by typing in the search box in the home page. And a huge revenues come from these 5% people (These may vary for Local or Individual Business). And so the search box at the home page, specially at header, of the big brand is optimized enough for the users.
You can check, at this moment, the top brand Amazon, check the search box located in the header, just check how they have optimized it for the users, its visualization, noticeability, visibility and visual queues are extra ordinarily optimized for prospects and customers. Now compare your site’s search box with this brand and draw your conclusion whether your site’s search box is easily noticeable for the users or not.
Check all other top brands search box. Isn’t the search box catching your attention immediately? Don’t you try typing something in the search box to search some products? See, how do they apply marketing psychology?
Now that we learn how important is the search box, home page, header, footer, navigation menu for an ecommerce site.
Now what we need to do?
Yes, these elements have to be optimized according to the proven strategy?
Jeff Bezos, founder, Amazon gave a simple formula for this: “We watch our competitors, learn from them,, see the things that they are doing for customers and copy those things as much as we can”.
Who is your biggest competitor (the biggest brand in your line) as Ecommerce Businessman?
Then we will see, what and how Amazon optimize their site for the customers? Then we will optimize our site just like that. Hopefully, we will get the best results.
In this audit, we will accept Amazon as the standard, and taking some other small or big brands, we will compare conversion strategy, find out where we are, find out why it is correct/wrong in that point, and why we should find out the reason for the wrong, without conforming exactly to Amazon, Apply the strategy. According to “USA Today”, approximately 1/3 of online transactions are made at Amazon! Amazing but interesting facts. That’s why we need to optimize our site taking Amazon as the best standard.
We will audit whether the various components of the ecommerce site header are optimized at a sufficient level, provide score, provide positive and negative critics and finally tell our best recommendations.
There are 5 key elements to grade in this e-commerce website audit checklist:
Five Elements of e-commerce website Header Audit Worksheet:
1) Grading Elements: All the ingredients that we will give grading scores, such as: Search
Box, help menu, logo, USP etc. In our audit we have 11 total grading elements.
2) Grading Criteria: Based on some specific standard criteria, we will provide grading
score to the grading element. Some of the grading criteria are: Clarity, Scent, Visibility, Noticeability, Visible queue, Professional Design etc. We have 13 total grading criteria in this audit.
3) Element score: Separate score of each grading element. Five parts of it:
A) Exceptional (point 1)
B) Competent (points 0.75)
C) Needs Improvement (Point 0.5)
D) Unsatisfactory (Point 0.25)
E) Absent (point 0)
Example: Suppose, we are auditing the “search box”. If the “search box” is exemplary then the score of “search box” is 1, if it is unsatisfactory, then the score is 0.25, and if there is no search box on the site, then the search box score is 0.
4) Final Score: Total Score Out of 100
5) Action item: Recommendation of the item that is not good, how it can be improved.
Grading Calculation Method:
Considering one or more grading criteria for each grading element, then average value has been calculated. For example, 9 (nine) Grading Criteria has been taken into consideration for grading header element “Search Box” and these are: 1) Clarity 2) Relevance 3) Visibility 4) Visual Queue 5) Noticeability 6) Professional presentation or design 7) Use of Relevant Trust icon 8) Using Visual queues to Highlight Key Area 9) Supporting Imagery. Suppose, a site’s search box number, for these nine criterias are 1, 0.5, 1, 1, 0.75, 0, 0.75, 0.25, 1, respectively. So, average is = 0.69. In this way, we calculate the average for each grading element taking necessary Grading Criteria. For a single grading element, one or more grading criteria is considered as a reason to: a) Find out the precise values as possible b) Decrease the error as possible.
Since there are a total of 11 grading elements and each element’s score is 1, so total score is 11. Suppose, your site’s total grading score is 7 out of 11. Then your score is 7/11. Then the score in percentage = 7/11 * 100% = 63.63%
As Ezra Firestone, Professor at Shopify University, says “The Faceless Ecommerce store is dead”. E-commerce is not like uploading some product photos to a site, then start a marketing campaign on Facebook, and the customers will line up to buy the product from your store. That day has gone a long ago. Now you need a complete mission, brand, tagline and some Ethos. You need to know that your ecommerce store has the Definitive Key and the customer must need to know clearly this Definitive key and finally the customers need a point of reference (Passive training) about your brand. And these issues should be optimized according to the projections of site headers, footers which will facilitate the conversion. That can easily be solved by Jeff Bezos’s formula. So take this e-commerce audit program as the top secret formula to have guaranteed growth in your business.
“Prospect Consumed The Header of Your Website First, It has to let them know they are in right place”. Header Winning Elements (11 Elements of Our Audit) recommended by Ezra Firestone, are:
1) Logo with Link Back to Homepage
2) Prominent Search Box
3) USP (Unique Selling Proposition)
5) Specific Offer (for new prospects)
6) Specific Market Segmented Tagline
7) More info pages link
8) Store Navigation
9) Shopping Cart
10) Help / Live Chat Link
11) Header Layout
Based on these eleven proven winning header elements, we will provide grading scores with the consideration of Grading Criteria of some sites.
13 grading criteria are:
1) Clarity (clear presentation of any element in the header, which gives the correct answer to this question “What is this?”)
2) Scent (the design consistency of the element)
4) Visualization (enhancing the visual structure of the object)
5) Visibility (visibility)
6) Appropriate use of forms/elements/fields
7) Compelling offers
9) Professional design
10) Universal accepted Trust Icon
11) Using Visual Queues to Highlight Key Area (Header and its various components vigilantly guide the eyes of the prospect, whether the part is the high priority or low)
12) Header Design Fits Into Singular Theme (If you look at the headers, it seems to be a unique single brand)
13) Supporting Imagery (whether there is a supporting image or other support material required for each element)
In the outward appearance, criteria number 5 (visibility) and number 8 (noticeability) may seem the same. Let’s clear this by an example: If you look at the sky at day time, the visible part is blue sky and the noticeable part is the sun. If you look at the sky at night, the visible parts are stars and noticeable part is the moon.
Let’s review the audit result:
Note: We have given the average number 1 for logo and tagline as these are not much more considerable things for conversion. That means if you have logo on the site, we have given the logo score 1. In the same way tagline score is given as 1 if there is no noticeable distraction.
Scores received from different parts of the header:
1) Logo: 1
2) Search box: 1
3) USP: 0
4) Guarantee: 0
5) Specific Offer: 0.68
6) Tagline: 1
7) More info link: 0.63
8) Store Navigation: 0.53
9) Shopping Cart: 1
10) Help / Livechat Link: 0.75
11) Header layout: 1
Total score: 7.59 / 11
This is one of the top India’s e-commerce site, Flipkart.com. The header layout of this site is remarkable in one word.
Excellent psychology of customer conversion has been implemented in site’s header layout.
According to color psychology, “blue color” is the best color for conversion, and this blue color has been applied to the header background on this site. Blue-white is the best contrasting color. The white search box in the blue background has blossomed, has been vicious, has enough been noticeable.
Even if customers do not buy anything, they will look for something in the search box by typing some texts. And its name is Ecommerce – The business site will provide all the necessary things available for customers, and it will be hassle free, everything will be noticeable in front of the customers and the customer will just take one step to catch the product.
This type of header layout is included in many large sites around the world, including Flipkart. However, instead of using single headers, they can use double headers.
There is no guarantee on this site, neither USP.
It is a good idea to follow world top e-commerce shops like, Amazon, Alibaba, Aliexpress etc where guarantee, USP etc are best utilized.
In the navigation menu named “Offer Zone”, there is a special offer on the right that is noticeable.
Phone number is missing in header. This topic can be explained both positively and negatively. Instead of setting customer care phone number,they have used a separate link called “24/7 Customer Care”.
For the sake of the audit of international sites, we have omitted the “mobile number” from the header element. However, it is a must for local or national brands.
The “More info” link on this site contains an important element, more important elements were needed.
There is a divert element instead of the conversion element in header. There is a need for adequate impetus on the store navigation.
Reliable Trust Icon, Visual Queues, Supporting Imagery is not fully used. These are needed. With a small number of components in the entire headers, this site is “Unique Brand Supportive”.
This header is remarkable in one word. Customer conversion psychology have been applied to this site’s header excellently. The white search box in Navy blue color background has been appeared excellently. It looks like: The search box is inviting the customer, “Come on, find out here all the things you need, just type something, I’ll supply you all the necessary things in a second”.
The right side of the search box is made more visible by the blue color search box icon, which is enough noticeable also.
The site is missing USP and any guarantee for either new or return customers.
The right top side of the header is the “Specific Offer” zone. There are two visible offers: 1) Free delivery on $ 399+, 2) Free shipping on $ 25+, which is notified by visual cue. Besides, there are some special offers that are named “deals, coupons” in the top left side of the header.
There are many components of conversion psychology for customer conversion in “More Info” Links.
Significantly impressive is the “Store Navigation”. Right images have been used in each element, the category and subcategories are separated by visual cues. Each element is visible, compelling and noticeable.
The shopping cart link on the top right corner is visible and noticeable but it will be easily noticeable to customer eyes if it is designed with contrasting color and visual cues. As The shopping cart background color and header background color are same, that’s why it will not be easily seen by customers.
The help menu has been positioned at the middle of the header. Its exact location will reduce the suffering of the customer and provide relief.
Excellent header layout.
Apart from this, there are other unique components on this site: Gift Idea, Deals, Credit Card etc. In “Gift Idea” menus, numerous gift ideas, Gift Cards and Gift Registry can be found. Any age-appropriate gift items suitable for any person, who can easily fill with great fun can purchase a lot of attractive and wow gift items.
This brand has its own credit card system that anyone can accept and pay bill using the link situated in middle of the header.
If you want to design your site for conversion, then undoubtedly you can follow this site.
This site’s header is super excellent. It has all the conversion elements with perfect positioning based on customer necessity. The white search box in navy blue background is perfectly highlighted and it will easily catch customers attention. Their unique selling proposition “Expert Service, Unbeatable Price” speaks in their prospects language. It delivers a promise and proof that they help their customers seriously which resembles by the two word “Expert Service”. It’s a Big Idea. Its a “Power of One”. This USP is very clear and relevant to customers psychological needs.
They offer “Guarantee” in their header in different position. Customer will find it in USP menu by clicking it and will see “Added Support & Protection” in right side beneath the banner. Customer will again find the guarantee in “Services” navigation menu with the link text “Protection Plans”. Though this guarantee is excellent and convincing enough to convert a prospect but prospect need to search this thing (since it is hidden in both the part), customer need to expand the services menu or click to USP. So, the item is neither noticeable nor easily visible.
Their specific offer is resembled by the top header menu “Deal of the day” situated somewhat left from middle. It’s highly exciting, compelling, visible and noticeable. Customer will find a lot of daily deals in that part while clicking on it. Another exciting offer they will see in “Price Match Guarantee” offer. These all things are highly motivated and encouraging elements for conversion and “Best Buy” brand offer these in their unique way.
Customer will get a huge number of “more info” links in both “Services” and “Account” navigation menu. They offer some unique services that’s nowhere available.
In navigation menus, they used right images, color combination, trust icons with perfect match.
Though their everything is outstanding, I found somewhat lacking in their “Shopping Cart” menu in top right corner. They haven’t used any visualization to highlight key area. Cart is visible, even noticeable but need visual cues to highlight it. It’s needed because it’s special. It’s special because they need to convince the customers by showing the shopping cart’s present status (whether it’s empty or not).
They have another lacking in their site header- The “Live chat/help menu”. Customer need to click “Services” menu to check the “Chat/help” services. It’s neither visible nor noticeable in header.
Header layout is awesome. It resembles a unique and one of best brand.
The other best header elements of this site are: “Hottest Deals, Student Hub, Member Offers” in “Deals” navigation menu, “Sign in” benefits in “Account” menu. The other three convincing header elements are the three right navigation menus: “Shopping History, Order Status and Saved Items”.
Let’s start with their search box. They have big search box, it’s position is OK. It has trust icon at left side. But the problem is the noticeability. Since the header background and search box inner background are of same color, visitor hardly notice this.
The “Search Box” is extremely blah. It is vague, unfocused. It ought to be more convincing which will help elucidate what the prospect is really here. They highlighted the search box using grey border line, though it’s not contrasting with the background.
The search box on this header should be made focused, clearer, as well as convincing enough.
They don’t have any USP or Guarantee in their header. There’s no specific reason to put credibility on this site as having no guarantee on site’s header.
They have three specific offers in first header. These are : 1) “Free Shipping on $75 Purchase” 2) “Free Store Pick Up Today” and 3) “Yes 2 You Rewards, Enroll Today, Earn Points”. Another offer is there in navigation menu, it is “Today’s Deals” where prospects will see a great many offers available for them on that day.
These are extremely incredible offer!
It addresses a coveted end result, reveals to you what you will get instantly.
This is a reasonable and convincing offer that is firmly worded and pictured perfectly.
It emerges, yet absences of visual sign. These can be more appealing and convincing by utilizing visual cue indicating the link where a prospect will land to get these offers and hence will urge the visitors to click the link.
Another lacking in this header is “More Info” link.
Store navigation isn’t compelling, neither noticeable, nor they used relevant trust icons in category or subcategories. They haven’t used any supporting imagery with the product sub categories. These are not visually highlighted. There’s no eye flow from high priority to low one. These things should be improved.
Their shopping cart is great. It is noticeable. Prospects will see their total number of products added to cart easily. It’s visualization is also praise worthy.
Customer help chat is in navigation menu. It’s visible. This is clearly well positioned and designed.
A big lacking is in header layout. Needs big improvement in this part. It’s not clear for a new prospect why s\he should choose this brand for day to day shopping by seeing this header. Need some more customer convincing elements with a combination of professional design and visual hierarchy.
Their best element in header is the “Yes 2 You Reward”. While click on it, prospect will see the details of this offer.
Another great header is this one. It has all the winning header elements in their site. It has noticeable big search box with well decoration visual cues. Boundary around the search box is gray color. Whenever someone is typing something in the search box, at that moment, the deep blue colored boundary is visible around the search box. It also has auto suggested search results.
One USP is found in logo“Powered by Service” but it is unclear about implied benefit-” Buy from us and you will get this particular benefit”.
They have guarantee on their site but it is hidden in “Customer Service” top bar menu on left side. Even the guarantee is not powerful enough to convert a new shopper. When you expand “Customer Service” menu, you will see another dropdown menu “Secure Shopping”. When I landed on that page, I see “Protecting your personal information” details. But as a buyer I want guarantee on my products, guarantee after purchasing, return policy etc which are not highlighted on that page above the fold. Customer will see these things on right side bar on that page. Their free shipping and free return policies are excellent. Their customers can return products in original condition within 365 days for a refund, even they will pay for return shipping. These “free return” policies should be highlighted and must be easily noticeable to customer eyes that can be done while put these lines above the fold on this page with visual cues.
They have specific offer on right side of top header-”Rewards and Earn Points”. Their call to action “Join Zappos Rewards & Get Expedited Shipping + Earn Points on Every Order” is very impressive. They have different types of rewards membership with different types of benefits. Any customer can earn points on every purchase and avail reward facilities. This offer is relevant, clear, timely, noticeable and focused. Even their landing page design is outstanding.
One lacking is there in store navigation. They haven’t used any relevant trust icon for category or subcategories. They have used supporting imagery in navigation. Their another unique and astonishing elements in store navigation is the use of “Search box” for that specific category.
Their shopping cart is surprisingly convincing. They have used light green boundary over the shopping cart for noticeability and when you hover over the cart, the area automatically turn into light green focused region. It’s clear and compelling and visualized nicely. A well designed impressive shopping cart indeed.
They have a list of available customer service options on left side in top bar menu. Another great thing is the use of mobile phone number for 24 X 7 availability in top bar.
Header layout design fits into a single gorgeous brand. Customer will find a good experience with this header (as well as brand) and will feel comfortable.
Now, your turn.
Do you want to get audit report (full e-commerce website audit or only header audit) for your own site?
Fill up the form on this page: Request a free E-commerce site audit and get your report in 5 working days.