Responsive Design of Smartphones and Tablets Accessories Online Store

1. FIRST STEPS

At the initial stage, we had to determine in what way it would be better to adapt this online store. The website had around 2,000 visitors per day, 45% of which were mobile users. There were no problems with behavioral factors and the bounce rate did not exceed 48%, which is quite a positive number for an online store. For that reason, we didn’t want to change dramatically the website that had its loyal visitors, which got used to a certain design or, even worse, redirect them to a subdomain.

We agreed to organize the existing design of the website to make it perfectly convenient for mobile users and refused from dynamic display or redirection. In our case, it was a perfect solution, as this method is even recommended by Google.

2. TASKS

Our main task was to create a responsive design of the online store to make it convenient for mobile users. Therefore, we had to:

• determine the most effective way to adapt the website;
• find all shortcomings and give recommendations on responsive design requirements stated by search engines;
• agree upon a design prototype with the customer;
• adapt the website;
• check if the new design meets search engines requirements;
• analyze user behavior after the changes;
• analyze the impact on the ranking and traffic;
• analyze how the new design impacts the online store conversion rate.

3. WHAT WE DID

As it was already mentioned, first of all, we determined our working strategy. It had to be highly efficient and at the same time the least stressful way to correct the problems, which appeared during website display on mobile devices. In this situation, it was also necessary to take into account the fact that the store already had a fair number of visitors.

There are three ways to solve this problem:

• responsive design;
• dynamic display;
• different URLs.

Check Google support: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/?hl=ru

The best solution for us was to create a responsive design, as dramatic changes of the highly visited website could lead to quite negative consequences.

For example, if you want to redirect users to a subdomain for mobile devices, all URLs of the mobile version should be indicated correctly using appropriate tags with rel=»alternate» and rel=»canonical». Otherwise, the website may be duplicated, which will have dire consequences.

We could have used dynamic display, yet bearing in mind that Google recommends responsive design, we chose this option.

To meet all the requirements, we analyzed every template of the store pages and created a list of “problem zones” which needed to be worked at. Based on these flaws we did a prototype that presented partial changes in website design, different styles, and fonts. These details were discussed with the customer and the after that our layout designers corrected all shortcomings and updated the store.

Having updated the store, we re-cheked all of its sections with unique design templates, namely:

• main page template;
• categories template;
• subcategories template;
• product cards template;
• filters template;
• static pages template.

This was necessary to ensure that the website would be correctly displayed on mobile devices. We found some tiny flaws that were promptly eliminated.

Having received enough Google Analytics data after 1.5 months of work, we started to analyze the results of the taken actions.

We compared the data received 1.5 months before the website adaptation with the data 1.5 months after it, and here what we got:

• organic traffic from mobile devices increased by 31,10%;
• transactions rate increased by 42,22%;
• the number of transactions increased by 86,44%;
• income from mobile traffic doubled 116,28%.

The indicators are quite positive. Of course, we cannot claim that only the responsive design should be praised for the increased transactions and store revenue, as the organic traffic was also growing, which contributed to such increase.

Yet, even without the traffic growth, the results are great: 116,28% — 31,10% = 85,18%

Nevertheless, the organic traffic from mobile devices grew also thanks to the website responsiveness, which ensured better ranking in mobile search results compared to PC. This proves that the responsive design also played a significant role in the organic traffic growth.

As the result, the mobile traffic allowed to increase transactions by 86% and double the revenue.

Results before the adaptation

• Organic traffic from mobile devices: 14 169
• Traffic growth rate from mobile devices: 1,25%
• Transactions from mobile devices: 177
• Store turnover from mobile devices: 237 527 RUB

Results after the adaptation

• Organic traffic from mobile devices: 18 575
• Traffic growth rate from mobile devices: 1,78%
• Transactions from mobile devices: 330
• Store revenue from mobile devices: 513 731,20 RUB