The case of Antoshka: How can conversion be boosted by 36% through adapting the interface to support various user needs

7 years of cooperation, 2 redesigns

Antoshka is a Ukrainian chain of over 40 stores, which has been holding a leading position in the market of children’s products for more than 20 years, annually receiving awards as a top-of-the-line retailer in its niche.

In 2013 Turum-burum did the first successful redesign of their online store. However by late 2016 the company’s business had considerably grown, which implied higher functionality requirements and a new development concept. Therefore, in 2019 the users got to see a new website design again.

In this article, on the example of the history of change of the online store Antoshka, we are going to tell you about the factors that make major retailers radically redesign their interfaces and what can be achieved through this strategy.

Time is ruthless to interfaces

With the help of ESR (Evolutionary Site Redesign), involving ongoing interface enhancement, the life of an online store can be extended by 5-7 years. However, sooner or later you will arrive at the idea that complete redesign is again a more cost-effective solution.

The demand, user behavior and habits eventually change. In the case with Antoshka, radical redesign of the online store website became inevitable because of numerous factors that emerged under the influence of time.  

• Business scaling
Once a mere shop of children’s products, Antoshka is now a family helper and friend: a future moms school, development clubs, pediatric consultations, play centers, hair salons, cafeterias. Besides, the stores became pick-up points.
• Increased percentage of mobile  users
In 2013 there were much fewer mobile users, so convenient adaptive layout was a priority at the time. From 2014 to 2020 the number of mobile users grew by 400%, and the online store was not ready for it.
• Change of the concept design
In 2015 the brand’s own characters –– Lumers –– were created.

The multichannel system of business development required a combination of online and offline visual styles. Lumers became interface guides –– one can see them in the header and on the product list page, they present news and invite to the hairdresser’s, bringing together all the portals and blocks and connecting the dots between offline and online experience.
• Technology change
The major problem was slow website loading, which no longer corresponded to modern user expectations. Besides, in order to stay on track, the layout width should have been changed from 960px to 1280px.
• New user behavior patterns
Interfaces with large amounts of data have given way to minimalist, simple and more convenient ones. People no longer read into texts trying to find out how this or that tool works. Pages overloaded with information and 3D buttons have become history. Portal blocks are less popular now, because users come for a specific purchase and it’s important not to distract them. Scrolling and swiping have become common in the interface. Making online purchases quickly is a user priority need.

Today users act more intuitively, filtering out unnecessary information, and the previous Antoshka interface was designed in accordance with old patterns.

On the example of the key website pages, please see what exactly was changed and how new user needs were supported with the help of the interface adaptation.

Key changes in the Antoshka interface that affected its efficiency

For 6 years the structure of the directory, blocks and website on the whole underwent considerable changes that were not controlled by any UX agency. The directory grew so much that categories wouldn’t fit on one page. Visually the website looked outdated, which reduced its competitiveness.

Having studied the collected analytics data and building on the expertise we had in working with online children’s stores, we realized that the key pages of the website were:

• Product Card;
• Shopping Cart;
• Checkout.

Product Card

We conducted usability analysis of the old product card and identified the following problems:

- Attention defocusing. Right next to the main product there was a block offering complementary products, which distracted the user from making a decision

- Selection of the product color, size, quantity and other characteristics influencing the product price was inconvenient. New, more useful tools had already emerged by then.
- Poorly structured payment and delivery information.

Solution:

We structured the information on the product card by making the website wide-format and made visual accents on three blocks:

1. Product photo
2. Decision-making block: price, catchy “BUY” button, and secondary calls, such as “print the product card”, “share item via email”.
3. Delivery and payment options.

Lower priority information was placed below: short and full description, characteristics and key features of the product. All the elements were positioned in such a way that the users could move their eyes down the page –– a more conventional pattern in the modern world.

We also added a tool that made it possible to check availability of the selected item in offline stores.

This information is important for making a decision about the delivery method. The customer sees locations and opening hours of all the stores that have the selected product in stock and can quickly decide what is more convenient for him/her: pickup, delivery by post or by courier.
In response to new trends, the focus was placed on the mobile version of the site.

Users “shop” with their eyes first, and then move on to examining the characteristics of the product, and where and when it can be picked up and paid for. That’s why on the first screen we placed the name and a big picture of the item with evident navigation elements, such as arrows and dots below. Depending on the habits and experience of the user, he/she can scroll through the photos either by tapping the arrows, or by sliding with a finger.

We also highlighted the price by placing a catchy call-to-action button next to it and made the product code stand out, since this is key information for the user if he/she needs a consultation at the customer support center.

Well-structured information on the new product card page let the user clearly see all the parameters necessary for making a decision about the purchase. Now the product card met the needs of the modern user.

Results of the changes introduced on the product card page

We compared the analytics data collected 2 months prior to redesign and 2 months after it and received the following results:

The number of the desktop users who placed the order after viewing the product card increased by 45%, and that of mobile users –– by 47%.

Micro conversion from the product card to the shopping cart stayed the same, which was a good indicator, taking into account that during the measurement period the traffic grew by 34% and 52% in mobile and desktop respectively.

Shopping Cart

Main issues:

• In the old version the interface and navigation were designed in such a way that the shopping cart was part of “My Account” page, i.e. the page structure was confusing and misleading.
• The information was poorly structured: the call-to-action button and the order total were placed in the bottom part of the page, so if the user put many items in the cart he/she couldn’t see them.

Solution:

We designed the cart in two formats:

• as a separate page;
• as a pop-up.

Since we eliminated the left menu bar in “My Account”, now there was more space on the shopping cart page, of which we made maximum use: we placed all the information about the contents of the shopping cart on the left, and all the order details –– on the right. As a result, more information necessary for making a decision would fit in one screen.

We introduced “Favorites” and “You also viewed” tabs, from where the user could add a product to the cart with just one click. These cross-sell tools help to remind the customer, which products he/she showed interest in, and thus increase the average order value of the online store.

Taking into account the modern user behavior patterns, we added an option of sharing the shopping cart. For example, a new mother staying at home with her baby can fill the cart with the products she needs and share the link with the father, who will place the order and pick it up on his way home from work.

Besides, now the user can preview the shopping cart by hovering over the shopping cart icon in the website header. The customer can quickly check the contents of the cart and move on to placing the order right away. Thus we make the funnel path shorter by skipping one step – navigation to a separate shopping cart page.

Results of the changes introduced on the shopping cart page

After comparing the analytics data collected 2 months prior to redesign and 2 months after it we discovered that the conversion from the shopping cart to checkout increased by 31% in mobile and by 29% in desktop.

Checkout

According to analytics data, 53% of the users were not completing the order placement.

Main issues:

• Long bulky form with too many fields to fill in, which scared the user away. The call-to-action button was placed at the very bottom of the page, so the user could miss it.
• As new payment and delivery methods were emerging over time, the presentation of information in this block became inadequate.

In order to see the available payment and delivery options, the user had to make additional steps by opening each particular sub-menu. Besides, there was no information about the opening hours of the stores and availability of items in stock.

• Extra links in the header that would take the user away from the page

• There were no prompts and autofill in the forms

The global task of the checkout page was to make the order placement process as easy as possible by splitting it into consequent steps and minimizing extra questions.

Solution:

The information in the order form was structured and split into semantic blocks by making visual accents. A slick slider with the basic order details was added.

We also reduced the number of steps in the order placement process, making it possible to skip the navigation to the shopping cart.

We made it possible to place an order without signing in.
A sign-in option, which used to be unavailable, was also added.
The registration and sign-in forms were optimized, the number of fields to fill in was reduced, and the process was split into subsequent steps.
In the new interface we request information by parts –– we start from the telephone number, then ask to enter the code, and thus, step by step, receive all the necessary data without overloading the user.

‍‍

Result:

If we compare the data collected 2 months prior to and 2 months after redesign, the number of mobile and desktop users who completed the order placement increased by 35% and 43% respectively

How can you extend the life of your interface and avoid wasting time?

As a result of redesign, the conversion rate of the online store Antoshka increased by 36%.

If you don’t enhance your interface for a long time, it becomes outdated, its technical characteristics stop meeting the modern requirements, and the website efficiency decreases. In this case, it is more cost-effective to address the existing issues in a comprehensive manner and redesign the website completely, applying the RSR (Revolutionary Site Redesign) approach.

After that you can prolong your project’s life using the ESR (Evolutionary Site Redesign) approach, by constantly improving it in accordance with the modern trends and user behavior patterns.

Pay particular attention to the key pages of the website, but don’t forget about the features that will make your interface special and might become advantages in the eyes of the users.

When choosing the strategy to apply, use the analytics data and expert opinions. Start with a UX audit – you will get a detailed report about the website pitfalls, which will help you make a rational decision, whether it is a revolution or an evolution that you need.

‍