The main question that every e-commerce platform owner asks is: how to attract more users and get maximum profit from the site. Evergreen has empirically identified five principles that it recommends following first.
Over 10 years, our team has launched more than 200 projects. In this article, we want to share our accumulated experience, which will allow online stores to increase conversion. But first, a few words about terminology.
UX design ( User Experience ) is the creation of an easy-to-use website architecture, where all important elements are in familiar or intuitive places, and the user’s path to the goal takes a minimum of time. It is thoughtful UX that underlies resources that are pleasant to use.
UI design (User Interface) is the creation of the visual appearance of a website/resource/site. It is responsible for color scheme, fonts, indents and information blocks. Usually, one glance at the UI design of a website is enough to understand how technologically advanced and modern the company is and whether you want to stay on their website longer.
Use UI templates
UI patterns are a compilation of the best and ready-to-use solutions. They are suitable for recurring user interface tasks:
- “add product to cart”;
- find product description;
- find the “Buy” button, etc.
UI templates are built on the basis of UI patterns — which are discussed below. Such templates have been tested hundreds of times by various companies and most often bring results. They take into account where the order button should be, what size it should be, how many steps to complete a purchase will be optimal for the user, and much more.
The difference between a UI template and a UI pattern
A UI template is a ready-to-implement visual solution, and a UI pattern is the user’s usual behavior on a website: where to look for a logo, where to find a shopping cart, where to click to order.
Professional UI templates are built on user behavior patterns derived from heat maps, usability analysis, Google Analytics data, KISSmetrics, RJMetrics, UsabilityHub, UsabilityTools, etc. from thousands of sites .
Where to find UI patterns
You can find UI patterns for websites of any category on the following resources: GoodUI , Dribble , Behance , Awwwards . On Dribble and Behance, designers display their work as a portfolio, and their colleagues can find inspiration in them for a successful solution to their own project.
Awwwards provides a selection of the best solutions for website design. From there, you can choose UI patterns that correspond to specific areas: usability, creativity, content, mobile. Since each project is evaluated by a professional jury, you can choose for your purpose the patterns that received the highest scores in the category you need.
On GoodUI, the structure, content, and content of various UI patterns are tested, and A/B testing of each version is carried out by thousands of users who vote for the best option.
When using such solutions, you need to be careful: a few mistakes in implementation – and a proven design can look cheap and clumsy. There are situations when ready-made templates are not suitable: if you have an exclusive, niche or simply very expensive product.
For example, a retail store may well look according to a familiar template. But from a designer jewelry site, users will expect that it itself will embody a unique visual solution. The value of the product should be emphasized with a unique design developed specifically for your business.
How to distinguish a good UI pattern from a bad one?
Good templates are always built taking into account the psychological characteristics of user behavior. They take into account the patterns of user eye movement: F-pattern, Z-pattern, Gutenberg diagram. They also correspond to the principles of proximity, emergence, complementation, multistability, immutability and others.
Here you can’t focus on “it looks good to me this way”. Because “it looks good” and “convenient” should be for thousands of your users, not just a few people from top management. That’s exactly why there are derived general patterns that a high-quality UI template must correspond to.
Update your website UI every 5 years
Regular website redesign is as much a must do as cosmetic repairs at home. But if visitors don’t leave you because of outdated furniture or unfashionable wall color, then users will exchange your website for a more modern competitor’s resource without thinking twice. The reason for this is simple — updates mean that you are looking for new approaches and solutions, you have a stable income, plans for the future, and you are ready to change for the convenience of users.
On average, a UI/UX redesign should be done every 5 years, because it is during this period that new visual and technical solutions not only appear, but also deeply penetrate the lives of users. And having become accustomed to a new level of convenience, they demand the same from every site they come into contact with. Such solutions include:
- the ability to pay in one click;
- save information about your purchases;
- repeat them automatically;
- use a new payment system, etc.
And remember: good design always has a margin of obsolescence – it is already understandable, but slightly ahead of its time, capturing new trends. It is this margin that allows the site to remain relevant even with rapid changes in trends.
But to create such a site, you need a truly professional designer. This does not mean that his portfolio will contain the names of major brands. Just as 10 years of experience does not guarantee quality. The main thing is that the designer knows his business, follows the latest trends, is able to hear your wishes and implement them in the form in which they will bring the greatest benefit.
Use animations
UX and UI animations are important components of a modern resource. They improve user interaction, show at what stage the action is, how much time is left until its completion, organize data and semantic blocks. Animations perform different, but equally important functions:
UX animations motivate the user to take action, “praise” them, suggest what to click on, brighten up the wait while the page loads, and much more.
UI animations create a wow effect, demonstrate the overall level of the resource, its modernity, and play on the unity of the logo’s appearance and the main idea of the company.
The logo can also be animated, which enhances the impression of the company and emphasizes its main idea
Where to find ready-made patterns for creating animation?
Given the demand for animations, resources like Material Design and Dribble are very popular , offering ready-made patterns to make them easier to create. They not only categorize animations according to how they are used – for example, animations for emphasis, anticipation, state change, etc., but also explain the basic principles of building a high-quality animation that performs the task assigned to it. Considering that every micro-movement matters in animation, and new trends arise frequently, such resource-tips are really useful in the work of a designer.
Animations create the impression for the user that the site is “alive” and responds to his actions, build an emotional connection between the user and your business. And most importantly, when used correctly, animations increase conversion. After all, users enjoy interacting with them, and they want to return to your resource again and again.
Pay attention to the content
It would seem, what relation does the text content of the site have to the design? The most direct, both at the level of design and at the level of user interaction.
In the UX component of design, content helps orient the user on the site. This includes:
- correctly selected names for each menu item;
- the most simple and understandable descriptions of what will happen if you perform an action;
- a soft description of why the action failed;
- Successful headlines are bright, to the point, and convey the essence.
For example, if your title is “5 reasons to build a wood-fired sauna,” then the text should be about that, and not about the distinctive features of a sauna and an infrared sauna.
As we can see, UX content is also an important component of SEO, because the more useful the text is for the user, the more relevant it is to the initial request, the higher the site’s position in the search results.
In the UI component of design, content helps the visual design. Here it is very important that the copywriter and designer take into account each other’s wishes – then the text will fit into the length of the line/menu item, and its semantic breakdown into blocks will fit perfectly into the page grid. Add to this a little play with indents and fonts, and “regular text” will turn into not only a useful marketing tool, but also an additional decoration of the resource.
Unifying context
The fifth rule of increasing conversion is: all elements of your resource should complement each other and logically lead to each other. In a conditional ideal site, everything is subject to the general context. If this site sells eco-bags, then each of its elements should emphasize this idea and the mission of the resource. The background color, the font reminiscent of intertwined cotton fibers, the logo, animated and telling a mini-story, icons on the site itself, the tone of the text on each page.
If you manage to create a truly complete page, you are guaranteed to be sincerely loved by your target audience. And as we know, first users like you, then they love you, and then they advertise you to all their friends.
An example of a unifying context was the redesign of the Argentina Gri website , which is aimed at audiences from different countries. After the redesign, the website began to simultaneously provide each client with all the necessary information and convenience in ordering a table. And at the same time, it emphasized the main feature of the establishment – signature steaks asado.
How it works in real life?
When redesigning a website, we constantly ask ourselves: what benefit will this or that change bring to the customer? And we implement it only when the benefit of the changes is obvious.
One of the striking examples of such a redesign is the website “Your Remote Control” , which after the implemented changes received a modern look with an emphasis on trendy free space and increased technology. For example, the ability to select the necessary remote control from a photo.
The online store now has wholesale and retail customer accounts, business processes have become automated: any changes in the cost or quantity of goods in 1C are automatically duplicated on the site and are available to customers. And customer data received on the site is linked to the CRM system and automatically takes into account loyalty discounts or any other features of working with the client. The online store itself has turned into a real B2B e-commerce platform that combines retail and wholesale trade into one store.
What happened to the site conversion? In the first month, the number of online payments increased 10 times, orders began to come through photo search, instead of calls and Viber
Conclusion
Let’s briefly summarize: it is possible to increase the conversion of an online store with the help of UI/UX redesign. The easiest way is to follow simple tips
- Use UI patterns . Don’t try to figure out where the “Buy” button should be and how to place the product description – the risk of making a mistake that will cost you millions is too high. If your online store is in the mid-price segment, it’s better to choose a suitable UI pattern from thousands of proven options.
- Update your website UI every 5 years . Show your users that you are keeping up with the times, constantly evolving, looking for new approaches, not afraid to implement new solutions and want to provide your users with maximum convenience.
- Use animations . Create the impression of a “live” site for the user, prompt him when to click on the right button, entertain him while the page is loading and “praise” him for a purchase made or a review left. Use the possibilities of animation to the maximum.
- Pay attention to content . Gone are the days when text on websites was written exclusively for SEO, and search engines paid more attention to the opinions of bots than to the needs of users. Now content should be written for people: take into account their needs, pain points, and provide detailed answers to their questions.
- Stick to the context . Define the main idea of your online store and create everything else around it: design, content, user flow. Let all the components of the resource convey this idea. This way, you will be better remembered by users and find your client.
To effectively implement these tips and boost your online store’s performance, consider partnering with a best digital marketing agency that specializes in UI/UX redesign and conversion optimization.