Редизайн промышленного интернет-магазина Векпром

Главное о кейсе

Промышленная группа Векпром — это один из крупнейших поставщиков станков и промышленного оборудования в стране, а это более 50 000 наименований продукции в наличии, склады общей площадью более 15 000 кв. м., а также единственный в стране демо-зал оборудования.

Компания обратилась к нам в Tiqum с главной задачей для нового сайта — сделать дизайн нового сайта компании Векпром с фокусом на UX-удобство подбора и покупки оборудования, но и не забыть про современный, чистый и понятный UI.

Итогом челленджа для нашей команды стали отрисованные 21 страница интернет-магазина с адаптивными версиями, а это порядка 90 экранов (!). И потратили на это с учетом согласований всего 2,5 недели (!)

— — —
ENGLISH DESCRIPTION:

Vekprom Industrial Group is one of the largest suppliers of machines and industrial equipment in the country, offering over 50 000 product items in stock, with warehouses covering more than 15 000 square meters, as well as the only demo hall for equipment in the country.

The company reach out to us with the main task for their new website: to design a website focused on UX convenience for selecting and purchasing equipment, while also maintaining a modern, clean, and intuitive UI.

The result of this challenge for our team was the creation of 21 pages for the online store, including responsive versions—around 90 screens in total! And we accomplished this, including the approval process, in just 2.5 weeks.

Как проект изменил жизнь пользователей

Новый дизайн интернет магазина позволит всем клиентам Векпром найти, подобрать и купить любое промышленное оборудование в несколько кликов и с любого устройства, а современный визуальный стиль подчеркивает статус компании в digital-пространстве.

— — —
ENGLISH DESCRIPTION:

The new design of the online store will allow all Vekprom customers to easily find, select, and purchase any industrial equipment with just a few clicks, from any device. The modern visual style highlights the company's status in the digital space.

Бизнес-задача и ее решение

Ключевые задачи редизайна:

— удобство подбора и покупки оборудования с любого устройства

— современный, чистый и понятный интерфейс

— рассказать о компании и услугах в корпоративном стиле



До работы с нами, ранее заказчик обращался к 2 другим подрядчикам. Инвестировал несколько миллионов рублей и более 1 года на отрисовку и разработку. Поскольку заказчик уже устал, ожидая новый сайт более года, мы решили рискнуть, и приняли вызов — отрисовать новый удобный дизайн интернет-магазина всего за 2 недели, без потери качества и глубины проработки.



Начали мы с масштабного исследования интерфейсов и паттернов поведения пользователей в интернет-коммерции (исследовали лучшие практики маркетплейсов, B2B и B2C интернет-магазинов; исследовали отраслевые магазины, а также другие сегменты). Результаты исследования упаковали в большой мудборд и большую таблицу, провели тщательный анализ, и составили список лучших вариантов решения для каждого пользовательского сценария.

— — —
ENGLISH DESCRIPTION:

Key tasks for the redesign:
— Ease of selecting and purchasing equipment from any device.
— A modern, clean, and intuitive interface.
— Communicate the company's values and services in a corporate style.

Before working with us, the client had approached two other contractors, investing several million rubles and over a year on design and development. Having already been frustrated by waiting more than a year for a new website, the client decided to take a risk and accepted our challenge: to design a new, user-friendly online store in just 2 weeks, without compromising on quality or depth of development.

We started with an extensive study of user interface patterns and behaviors in e-commerce (examining best practices from marketplaces, B2B and B2C online stores, industry-specific shops, and other segments). We packaged the results into a large mood board and a comprehensive table, conducted a thorough analysis, and created a list of the best solutions for each user scenario.

Крафт (мастерство), реализация, технические детали

1. Одна из наиболее сложных задач в проекте — разработать новую шапку интернет-магазина (это блок, который находится вверху любой страницы). Шапка является одним из ключевых элементов навигации по интернет-магазину. Необходимо было уместить всю ключевую информацию о компании: это все разделы о компании, контакты, каталог, поиск, вход в личный кабинет и другие.

Также, в лучших практиках e-commerce, в шапку были добавлены популярные категории оборудования, каждую категорию можно открыть быстро по наведению мышкой и посмотреть все подкатегории товаров. В итоге у нас получилась лаконичная и хорошо структурированная навигация по сайту и каталогу товаров с учетом лучших практик юзабилити и дизайна.



2. Страница товара, также была непростая с точки зрения дизайна и верстки. Для промышленного оборудования характерно довольно большое количество информации, которую необходимо отобразить на сайте:
— комбинации вариантов товара,
— технические характеристики,
— подробное описание с графиками, фотографиями и встроенным видео,
— продажа дополнительного оборудования (доп-опции);
— а также продажа запчастей и расходных материалов, которые подходят к просматриваемому станку.

Для этого были разработаны вертикальные табы, которые фиксируются в левой части экрана, а справа можно скроллить контент.
Также на странице товара мы добавили триггеры для покупателей: гарантия, доставка, сервис и оплата — каждый с небольшим описанием. Это помогает снять частые боли и страхи клиентов перед заказом и повышает конверсию.



3. Так как у клиента более 50 000 тысяч наименований товаров, поиск по каталогу необходимо было сделать интуитивно понятным и простым. В реализованном нами интерфейсе поиск можно осуществлять как из шапки сайта, так и находясь внутри любой категории.



4. Для удобства покупателей мы отрисовали два вида карточек товаров с переключателем:
— классические плитки, когда нужно быстро отсмотреть большое количество товаров;
— и отображение списком, когда нужно не переходя на страницу станка ознакомиться с его характеристиками.



5. Фильтр разработан простым и функциональным: при фильтрации условий, в верхней части каталога дублируются примененные фильтры, которые:
— с одной стороны помогают пользователю понять итоговый набор выбранных фильтров;
— а с другой стороны, быстро очистить любой из выбранных фильтров.

Отдельно стоит отметить, что за это время мы также полностью подготовили макеты для передачи разработчикам: разработали UI-кит, собранный на дизайн-токенах и по принципу атомарного дизайна. Благодаря такому подходу, при внедрении дизайн-токенов в исходный код и в пайплайн CI/CD, можно сделать так, чтобы при изменении дизайнером графического макета страницы, эти изменения автоматически применялись и появлялись на сайте, без программирования, без привлечения разработчиков. Это в несколько раз ускоряет разработку и позволяет в дальнейшем легко масштабировать и поддерживать новый интернет-магазин.

— — —
ENGLISH DESCRIPTION:

1. Header Development
One of the most complex tasks in the project was designing a new header for the online store, which is a key navigation element at the top of every page. The header needed to include all essential company information, such as sections about the company, contacts, catalog, search, login to the personal account, and more.
Following e-commerce best practices, we also added popular equipment categories in the header. Each category can be quickly opened by hovering the mouse, allowing users to view all subcategories of products. This resulted in a concise and well-structured navigation for the site and product catalog, considering usability and design best practices.

2. Product Page Design
The product page was also challenging in terms of design and layout. Industrial equipment typically requires displaying a large amount of information, such as:
— Product variants combinations
— Technical specifications
— Detailed descriptions with charts, photos, and embedded videos
— Additional equipment options for sale
— Spare parts and consumables that match the viewed machine
We addressed this by developing vertical tabs fixed on the left side of the screen, allowing the content to scroll on the right side. Additionally, we added triggers on the product page (warranty, delivery, service, and payment), each with a brief description. These help address common concerns and fears customers have before placing an order, thus improving conversion rates.

3. Catalog Search
Since the client offers over 50 000 products, it was crucial to make the catalog search intuitive and easy to use. In our implemented interface, search can be performed both from the header and within any category page.

4. Product Cards
To enhance user convenience, we designed two types of product cards with a toggle switch:
— Classic grid view, for quickly browsing through many products
— List view, to view product specifications without needing to navigate to a separate page

5. Filtering Functionality
The filter was designed to be both simple and functional. When applying filters, the selected options are shown at the top of the catalog, which:
— Helps the user understand the final set of selected filters
— Allows them to easily clear any of the selected filters

Additionally, we fully prepared design mockups for the developers: creating a UI kit built with design tokens and based on atomic design principles. This approach ensures that when design changes are made, they are automatically reflected on the site without programming or developer involvement. This speeds up development and makes future scaling and maintenance of the online store much easier.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Обязательная часть при отрисовке макетов — учитывать разрешения экранов различных устройств. Две трети клиентов Векпрома работают с сайтом с компьютеров, а более трети — со смартфонов. Учитывая тренд на работу с мобильных устройств, проанализировав мобильную версию старого сайта (которая не удобная), и опросив небольшую фокус-группу, мы сделали вывод, что для большинства корпоративных клиентов Векпрома важно наличие мобильной версии. Мы отрисовали каждую страницу в 4 разрешениях: большой экран, ноутбуки, планшеты и мобильные устройства.


В мобильной версии дизайн адаптируется и становится похож на мобильное приложение: все основные разделы переехали с верхней части экрана в таб-бар в нижней части, что делает их максимально доступным для пользователя, а сам сайт — похожим на мобильное приложение.

— — —
ENGLISH DESCRIPTION:

An essential part of the design process was to account for screen resolutions across different devices. Two-thirds of Vekprom's customers access the site from desktop computers, while more than a third access it from smartphones. Given the growing trend of mobile usage, we analyzed the mobile version of the old website (which was not user-friendly) and surveyed a small focus group. Based on these insights, we concluded that having a mobile version is crucial for most of Vekprom's corporate clients.

We designed every page in 4 screen resolutions: large screens, laptops, tablets, and mobile devices.

In the mobile version, the design adapts to resemble a mobile app. All main sections were moved from the top of the screen to a tab bar at the bottom, making them easily accessible for users and giving the website an app-like feel.

Скриншоты