In an effective interface, everything works for the user. Every last pixel.
Sometimes, all it takes is changing the color of a button, rearranging blocks, or removing one step to increase conversion.
The main thing is to know what to change.
The Turum-Burum team sees this every day in projects of all sizes and industries. In this article, they share their experience.
1. Desktop version of the site that doesn't fit well on mobile
The website opens on a phone, everything is compressed and seems to be responsive, but the main thing is missing — usability: the banners are small and blurry, the text is almost unreadable, and the buttons are too small or there is not enough space around them, so the user cannot click where they want.
Responsive does not equal mobile UX.
Today, mobile commerce is the standard. 75% of eCommerce purchases worldwide are made from mobile devices. And if your website is inconvenient to use from a phone or tablet, you lose customers and profits.
For example, the design of the Robinzon website, the official distributor of Samsonite in Ukraine, was created not as a reduced copy of the desktop version, but according to the mobile-first principle. This is when the mobile version has its own logic and structure and takes into account the behavior patterns of mobile users:
A reduced and fixed header or one that appears when scrolling back;
Familiar icons for the menu, shopping cart, search, etc., located in places that are familiar to the user;
Sufficient space between elements and buttons to reduce the likelihood of accidental clicks.
(2).png)
Online store design Robinzon
A carefully designed mobile version is not a “nice bonus” but a direct investment in business performance. It helps not only to retain mobile traffic but also to convert it better, reducing bounce rates and making it easier for users to make purchases.
2. Confusing navigation that makes it difficult to find the right product
Navigation is not just about “menus” and “catalogues.” It's about how quickly and easily users can find what they need.
If the menu is difficult to find, even Sherlock Holmes won't be able to figure out the catalog, and the filters don't work, then searching for a product turns into a quest, and that kills the desire to buy anything.
Effective navigation is when, from the first touch, it is intuitively clear to the user what is on the site, where to look for it, and how to quickly get to what they need.
This is especially critical for large online stores such as VARUS — a service with thousands of items, categories, subcategories, and different delivery formats. To create convenient navigation and a catalog for this online project, we:
Analyzed heat maps, webvisor, and typical scenarios of user interaction with the catalog (what queries they make, where and what they search for, etc.);
Conducted navigation benchmarking among 10 major competitors.
Based on the data obtained, the catalog structure was completely redesigned and rebuilt: categorization was optimized, category names were changed, and the order and depth of nesting were altered.
For example, the study found that customers most often look for eggs among dairy products, although VARUS previously placed them in the meat category.
(1).png)
Development of a catalog structure for VARUS
The result: an intuitive catalog where products are placed exactly where users usually look for them. In the mobile version, a separate catalog icon was added to the bottom menu for quick access.
.png)
Appearance of the online store catalog VARUS in the mobile version before and after the redesign
Taking into account user needs, we managed to build a catalog and navigation system that helps users navigate the site structure and shortens the path to the product, and thus to the purchase.
3. Product page without... important product information
It is on the product page that the user weighs all the pros and cons and makes a purchase decision. And if the visitor does not see the answers to their questions, they will not buy. Not because the product is bad. But because there are not enough arguments: low-quality photos, lack of characteristics, insufficient description, advantages are not obvious, price and conditions are not visible, etc.
All this is about the structure of the page.
For example, for the Lamour professional cosmetics online store, we managed to increase the effectiveness of the product page and increase the average check by 1.7 times by changing the layout and organizing the information by priority:
Key elements (large photo with carousel, name, price, button, payment, delivery) were moved to the first screen;
The description was simplified and structured: with subheadings, lists, separate blocks;
We added social proof and brand advantages in a separate block (explaining what the unusual “Pro Only” button means).
We also removed unnecessary elements and added emphasis through typography, visual elements (labels, CTAs, etc.), and added space for a showcase effect.
(1).png)
Online store product page Lamour
It is not the presence of a recommendation that matters, but its relevance. So, if the “People who bought this also bought” section contains the same products or products that are out of stock, and the “You may also like” section offers irrelevant products, then it does not work and is of no use.
However, properly configured cross-sell and up-sell not only increase the average check, but also improve the user experience.
After all, cross-sell does not just show something “similar,” but suggests what will complement the purchase right now, and upsell offers an alternative, perhaps a little more expensive, but one that is even better suited to the customer's request.
Thus, in the YouShouldBeHair project, recommendations are based on real scenarios of product use: each category has its own options for additions, so that they are right on target. And they are placed exactly where they will be noticed and when they are really needed: on the product page (bundles and similar products), in the shopping cart, and at the bottom of the category results page.
(1).png)
An example of implementing a cross-sell block in an online store shopping cart YouShouldBeHair
The user does not need to think about what else to buy because everything has already been selected for them. This not only affects the average check but also demonstrates care for the customer, which increases their loyalty.
5. Complex and lengthy checkout process = unfinished purchase
When a user leaves the checkout, you lose not just a potential customer, but a person who was already ready to pay. And that is critical.
Very often, the reason is not the price, but usability issues such as an overly long form, a confusing process, a lack of prompts, distracting elements, etc. The rule here is: the simpler and shorter, the better.
A good example of a customer-oriented interface is the order page on the ORNER online store website:
.png)
Checkout page on the website ORNER: 1) A short, step-by-step form for filling in the necessary data to make a purchase; 2) Order details with the option to edit.
It is also important to save the data that has already been entered by the user so that they do not have to re-enter everything when reloading the page or returning to the previous step.
A beautiful interface does not always sell, but a convenient one always does
This article has covered only five mistakes that most often prevent websites from selling. This is just the tip of the iceberg. But even correcting these mistakes can significantly change the situation: reduce abandonment, shorten the path to purchase, and increase conversion.
But the main thing is that every project is unique and there are no universal solutions. What works in one case may not work in another.
Therefore, improving UX starts not with aesthetics, but with analytics. Understanding the user and their needs, pain points, and tasks. An effective interface is not about pretty pixels. It's about well-thought-out logic, a clear structure, and timely prompts.
Leave your review