Redesign of E-commerce Header

Repositioning the search bar, conveying confidence to our users and achieving positive results

User interviews

We interviewed users in order to understand their motivations and their fears during online shopping. There were 2 types of selected profiles:

A) People who buy online regularly.
B) People rarely buy online.

We asked about the reasons that makes them to buy, or not, in an online store. Here are the answers:

 

Group A (buy regularly)

  1. Comments and references
    60% of respondents said that positive and negative comments on the Internet, or the appointment of friends and family are decisive factors for the purchase.
  2. Design
    30% said they don´t buy on sites they deem to have an amateur appearance (visual) or have interface errors.
  3. Being a well-known brand
    10% said contextual information about the store, such as values, responsibilities and its credibility in the market segment, are important for making a purchase.

Group B (rarely buy)

  1. Store Lifetime
    20% of respondents said that the store age (in years), increases their confidence to make a purchase.
  2. Physical stores
    50% feel more secure when they find that the online store has a physical address.
  3. Availability of service
    30% said they only buy in stores that show available for service, with phone, email and / or chat.

Empathy map

The results of the interviews were converted into empathy maps, individual to each user. This way we are able to see the insights obtained more easily and also have a better understanding about their pains to prepare a proposal for cure.

Empathy map

Empathy maps developed after the interviews

Heatmap (pre analysis)

We did two sessions of heatmaps, a pre and a post A/ B (split) testing.
The previous analysis was made up of heatmaps from the last 6 months. We could notice 2 points about the information architecture of the original header:

  • Sorting of the links at the top;
  • Search field decrease in favor of growing inclusion of new departments in the navigation menu;

Heatmap pre-analysis 2

Heatmaps from months 6 to 4

Heatmap pre-analysis

Heatmaps from months 3 to 1

 

Wireframe

Like most e-commerces, the noblest part of our is the header. We believe it is the first part of the site where we meet the wishes of our users and for this reason it was chosen as the object of this redesign.

 

High fidelity wireframe - new header

Wireframe designed in Axure

Layout

After the interviews and previous heatmap analysis, we obtained some insights that helped us in the layout proposal. We made some changes to the original elements and added others wich were directly linked to the pain of users.

  1. Reordering of the links “My Orders”, “My Account”, “Chat” and “My Lists”.
    This action was taken after observing clicks on these links. We did the sorting based on the amount of clicks, the largest largest amount to smallest;
  2. Insertion of links “About Us”, “Our stores” and “Call Center” and  text date “since 1980”.
    The links were inserted after 10% of users have expressed to know more about the brand is a key buying factor for them.
    The insertion of the phrase “Since 1980” was inserted after 20% of users say that the store existence of time is significant for them.
  3.  Repositioning the search field to the upper part, based on heatmaps analysis.
    The heatmap analysis showed disfavoring the search field regarding the addition of new departments in the navigation menu. In the proposed solution, the search field was larger and more visible.
  4.  More emphasis on the award seal “Época – Reclame Aqui” as the best e-commerce of furniture in 2015. This stamp was strategically repositioned after 60% of users claiming in the interview that the references about the company on the Internet, were decisive for effecting the purchase.

The award “Época – Reclame Aqui” was created with the purpose of encouraging companies to seek excellence in customer service, making efforts to improve the relationship with the consumer, through the improvement of its processes, to achieve high troubleshooting index..

Some other minor changes occurred due to the better use of the space obtained:

  • On the search button, the icon was replaced for the word “Search”;
  • Text change from “Online Chat” to “Chat” and “What are you looking” to “What are you seeking”;
  • Increased spacing between the items in the navigation menu.
New header layout - TAC

New header layout

 

A /B (split) testing

Finally, was time to see which of the two versions would increase the conversion rate.

A/B (Split) testing

Version A and Version B to compare on split testing

 

Heatmaps (post analysis)

Along the A/ B testing, we made a new heatmap monitoring, in order to compare the areas of clicks in both versions, besides giving more basis to the test.

Heatmap pre-analysis

Version A and Version B – Heatmap comparison

Results

In heatmap analysis we could observe two things:

  1. New links added,  “About Us”, “Our Stores” and “Call Center” had significant clicks, which validates the arguments raised by the users in the interviews;
  2. A notable increase of clicks in the search field;

To better quantify, the result of A/ B testing shows an increase of 122.3% to the conversion rate through the new positioning of the search field, with a confidence level of 99%.

Result obtained from A/B testing

Result obtained from A/B testing

 

Conclusion

Never stop asking your users about how they feel using your product or a similar to yours. We can always go better and deliver a better experience to our users with positive effects on our business.