220 Volt is a Russian chain of power tool stores. The brand includes a retail network, the largest online store in the DIY market, a network of service centers and order pickup points.
Historically, the company has two versions of its website: for computers and mobile devices. The design of the mobile version was updated and it was the turn of the desktop version, especially since it was very outdated and had many problems. First, it was designed in the era of small monitors and had a maximum content width of 1,100 pixels, making fonts and components too small. Second, the desktop version was created and maintained in the absence of a design system, which in turn created even more chaos.
The new version has become adaptive for all monitors. For example, at a resolution of 1920*1080 (the first by visits) the content occupies 1,716 pixels. But the same content is collapsed to 960 pixels wide and is correctly displayed on monitors with a resolution of 1024*768. This system of adaptability is part of a higher-order system, the Site System Design, in which everything from the atom to the organism obeys the rules.
Using the existing expertise in behavioral metrics, the interface is designed to make the already formed user experience even faster and more comfortable. For example, the most popular subcategories are placed in the header and can be customized in your personal account. Information, whether textual or graphical (both within blocks and the blocks themselves), now serves as a unified composition and makes the user experience smooth and seamless.
How a site is perceived, in what language the interface speaks to the user and what exactly it says, determines how successfully it will solve the user's tasks. Typography system, color system, work with contrast and composition, rational use of space where each element takes its place, intuitive interaction with components makes the user experience pleasant and memorable.
The new version has become adaptive for all monitors. For example, at a resolution of 1920*1080 (the first by visits) the content occupies 1,716 pixels. But the same content is collapsed to 960 pixels wide and is correctly displayed on monitors with a resolution of 1024*768. This system of adaptability is part of a higher-order system, the Site System Design, in which everything from the atom to the organism obeys the rules.
Using the existing expertise in behavioral metrics, the interface is designed to make the already formed user experience even faster and more comfortable. For example, the most popular subcategories are placed in the header and can be customized in your personal account. Information, whether textual or graphical (both within blocks and the blocks themselves), now serves as a unified composition and makes the user experience smooth and seamless.
How a site is perceived, in what language the interface speaks to the user and what exactly it says, determines how successfully it will solve the user's tasks. Typography system, color system, work with contrast and composition, rational use of space where each element takes its place, intuitive interaction with components makes the user experience pleasant and memorable.
The interface, like a quality power tool, should work smoothly and efficiently in any conditions. To adapt the layouts, the resolutions of the screens with the highest attendance were chosen: 1024, 1280, 1440, 1920. This allowed to fit and display the functionality correctly on small screens and get rid of too much empty space on large screens. For example, in listings the number of products in a row is changed, which allows you to save photos of products in a sufficient size for comfortable perception. The filters located on the left side of the screen do not change their size and remain convenient for use on the smallest monitors and tablets. Or, for example, in the product card the photo changes size depending on the screen, which allows you to see the smallest details without having to click on the photo itself.
If you need to use the entire screen space to solve a task, pop-ups come to the rescue. Thus, the window with the shop selection occupies 70% of the user's screen.
If you need to use the entire screen space to solve a task, pop-ups come to the rescue. Thus, the window with the shop selection occupies 70% of the user's screen.
The company has successfully implemented a system of rewarding users with bonus points for purchases made and other activity on the site, such as posting a review, reposting, subscribing to a newsletter or social media pages. The system motivates customers to make repeat purchases, increases the average check, and reduces customer churn, as customers, knowing that they have points in their bonus account, tend to stay loyal to the company rather than move to competitors. At the end of the day, the programme is attractive to consumers as receiving and accumulating bonuses introduces an element of play.
The benefits, as the key value for the user, are brought to the first screen of the interface, and how the programme works is shown in three concentrated blocks.
The benefits, as the key value for the user, are brought to the first screen of the interface, and how the programme works is shown in three concentrated blocks.
A large share of purchases in online power tool shops is made by wholesale buyers, these are managers of construction and repair companies. A special promotional page was designed to attract them and familiarise them with favourable conditions. The most important information about the advantages and terms of co-operation is placed within one screen - we do not forget that customers spend their time rationally.
Design is about creating rules. Every action of the designer creates a new rule. In order for a design system, from the "atom", for example, colour, to the "organism" - the interface layout - not to grow entropy and the system to be predictable, there is a repository of rules.
Within this repository there are systems of a different order, which are themselves subsystems. So, for example, in the colour system there are rules that determine what information the user will receive when interacting with colours in the interface. The image of a dynamic, modern company, charged and energetic as power tools, users perceive through a contrasting combination of yellow and black colours.
The typography system defines the rules for the use of fonts in the interface. But it also carries information that determines the emotional connection users have with the text. Grotesque fonts, accent headings, and large characters in texts reflect the firm, straightforward character of a company that is an expert in power tools. Combinations of "atoms" of typography with "atoms" of colours give new properties - so black grotesque font combined with bright yellow accents, becomes friendly and responsive.
The rules of colour palettes and typography give rise to the rules of systems of icons, contolls and components. In this way, the whole system tends to maintain a high degree of definition, which means that the information capacity of the interface will not be overloaded.
Within this repository there are systems of a different order, which are themselves subsystems. So, for example, in the colour system there are rules that determine what information the user will receive when interacting with colours in the interface. The image of a dynamic, modern company, charged and energetic as power tools, users perceive through a contrasting combination of yellow and black colours.
The typography system defines the rules for the use of fonts in the interface. But it also carries information that determines the emotional connection users have with the text. Grotesque fonts, accent headings, and large characters in texts reflect the firm, straightforward character of a company that is an expert in power tools. Combinations of "atoms" of typography with "atoms" of colours give new properties - so black grotesque font combined with bright yellow accents, becomes friendly and responsive.
The rules of colour palettes and typography give rise to the rules of systems of icons, contolls and components. In this way, the whole system tends to maintain a high degree of definition, which means that the information capacity of the interface will not be overloaded.
TVOE is a people's shop. Thousands of very different people shop here every day. These people are of different ages, from different social groups with different income levels. But all of them are united by the desire to wear high-quality and modern things. A universal, intuitive interface has been developed for all these people, allowing them to immerse themselves in virtual shopping and enjoy themselves before and after placing an order.
