Responsive Web Design – Case

Categories
Business Digital marketing Blog Ecommerce User Experience (UX)

The responsive design has a range of advantages, and the most important ones are an improvement in search visibility and an increase in traffic. But will the time and money spent on the responsive layout of an online store pay off? Find out the answer in the case study by Lemarbet.

Service: Create responsive website of the online store.

Subject: Repair parts for mobile phones and tablets.

How was the Responsive Layout Implemented?

The customer was an online store selling repair parts for mobile phones and tablets. The creation of the responsive website took 7 days: 3 days to create the design of different versions and 4 days to make the layout and test how it displays. We made the responsive design for all screens with more than 320px resolution, so, actually almost for all existing mobile devices.

How was the Responsive Design Tested?

  1. Using the inbuilt tool Google device mode in Google Chrome.
  2. Using the Responsive Design Mode in Mozilla Firefox.

Of course, we tested the mobile layout on all devices of the developer’s team.

Results

The responsive design was launched on August 15, 2015. In a week after that, the quality and quantity of transactions from mobile devices began to improve. In the screenshot, you can see the statistics of traffic and transactions on mobile devices. The comparison period: 1.5 months before the launch and 1.5 months after the launch of the responsive design.

mobile traffic

Note: The statistics are filtered by mobile devices and organic search to make the analysis more precise.

The screenshot shows that mobile traffic grew by 30%. But the eCommerce indicators increased much more: the conversion rate grew by 42%, the number of transactions – by 86%, and the income – by 116%. We also compared the website data 6 months before the responsive layout launch and 6 months after it.

mobile+tablet traffic

Mobile traffic increased by 116% and mobile transactions by 170%. Therefore, we can also conclude that responsive design slightly impacts the organic traffic growth. To see that, compare the slopes of the linear extrapolation curve of the traffic before the responsive design launch and the linear interpolation curve that shows the traffic after the responsive layout was implemented.

curve of traffic

Maybe this result was influenced by Google’s Mobile-Friendly algorithm launched on April 21, 2015. The next screenshot shows the growth of the revenue from ecommerce. Already 1.5 months after the responsive layout implementation, the revenue increase was 119%.

revenue of ecommerce

Nevertheless, seasonality shouldn’t be praised for the traffic growth in September. The graph of search request volume by month proves that:

request volume

It is also interesting to compare how the traffic and conversions are distributed among gadgets: tablets, mobile devices, and desktops. Mobile devices account for the most noticeable increase in the transactions rate. Tablets take second place, and desktop devices take bronze.

various gadgets

Actually, it’s logical. The website was already convenient to be used on tablets before the responsive layout launch. However, we are interested in another question: Isn’t the small growth of eCommerce indicators on desktops connected with the responsive design? It may be connected. How? Through assisted conversions. So potential customers come to the website from mobile search, browse the page, and if they like it later, they will visit your website again on PCs to continue the search (for example, to learn more about «iPhone microchip»). Unfortunately, the website wasn’t connected to the User ID function that would allow having updated information on the complete interaction of the users with the website. Yet, for most users who visit this website, a smartphone or a tablet is mainly a way to find information while the necessary transactions are done on PCs. The statistic below proves this.
PC vs mobile

During the first 3-4 days before assisted conversions happen, mobile traffic is absolutely crucial. Potential customers should like the mobile responsive design, which will make them return and purchase. It is also interesting to check how the responsive layout influenced the number of transactions made by new and returning visitors.

new & returning visitors

After the responsive design launch, the conversion rate has significantly increased in both cases, although the new visits indicator is higher. Nevertheless, the absolute values ​​of the transactions rate for these user groups are quite logical: 1.4% for new users and 3% for returning. Now, we will slightly move from transactions and look at the behavior of the users who visited the website on mobile devices. The main indicators (the bounce rate, pages per session, and the average session duration) remained practically unchanged.

Acqulstion overview
users' behavior

So how does it happen? Why has the responsive website become more convenient, but the behavioral factors haven’t changed? If to ponder this and analyze the actions of visitors, it is possible to draw some conclusions:

  1. The average session duration. After the responsive layout launch, the users no longer have to zoom the page with their fingers, which reduces the time of interaction with the site. However, in our case, the average session duration remained almost the same. In fact, some portion of the audience really spends less time on orientation, zoom, and navigation due to the improved convenience of the website. While the rest, on the contrary, remains on the page longer to process its information. Therefore, the average session duration almost doesn’t change.
  2. Pages/session rate is calculated in the same way. On the one hand, the more convenient the website, the fewer pages you have to browse, but on the other hand, the high visit depth means that the visitor really liked the website. As a result, the average value remained almost the same.
  3. Finally, the bounce rate. After the first click, the visitors understand where they are (for example, on the product card of the repair part they need) and learn all the necessary information. A part of the audience immediately leaves the site, but another one continues going to other pages, considering the site’s convenience. Therefore, the value of the indicator practically doesn’t change.

Assisted conversions are the last indicator you should pay attention to. The screenshot below shows the assisted transactions statistics before and after the responsive layout was launched. To make the analysis simple and clear, we included only free traffic channel data divided into mobile devices and desktops:

transactions statistics
The rates of assisted conversions on mobile devices are 2-3 times higher than on desktops. Moreover, the growth is observed in all existing indicators: both for last-click conversions and direct interactions.

Conclusions

  1. If you spend money on website advertising and promotion, be sure to allocate funds for responsive design. It’s almost useless to invest in advertising and promotion of the website if it isn’t responsive (given the rapid growth of mobile users, which now account for 20%-40% of the Internet audience depending on the topic). It’s like you promote a store in the offline business but haven’t repaired its slippery steps, neither have you done ramps for carts and carriages, ensured enough place between store shelves and proper merchandising of goods. So responsive design is a way to increase your return on investment.
  2. If the website isn’t promoted but has good traffic and sales (our case), try to allocate some money for its mobile responsive design. In our case study, already 1.5 months after the responsive design launch, the sales on mobile devices grew by 86% and the revenue by 119%.
  3. If the website isn’t promoted and visited under any condition, make its responsive layout. You’d better keep your money to pay for the domain and hosting 🙂
Article by:
CEO Andrew Chornyy

CEO Plerdy — expert in SEO&CRO with over 11 years of experience.

Leave a Reply

Your email address will not be published.