Подавайте работы до 3 июля (птн)18 000 Р,
с 4 июля (сб)24 000 Р
Церемония награждения
4 декабря 2026
Крупнейшая digital-премия в Европе

Интернет-магазин Лист — продажа металлопроката.

Заказчик: Лист
Исполнитель: Q.lab (ex: Волга Арт)
Share
Share
Интернет-магазин Лист — продажа металлопроката.

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

Мы продолжили работу над проектированием и дизайном в результате чего:

— Была полностью переработана структура каталога, дизайн элементов и переработана логика заказа и процесса выбора товара.
— Была с нуля собрана карточка товара и блок взаимодействия с ней.

Выбор и знакомство с продукцией происходит легко и комфортно.

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

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

Отдельным приятным челленджем стала реализация Личного кабинета, в котором очень компактно расположились и последние заказы и статусы и даже бухгалтерские документы. Не говоря уже о традиционных функция классического личного кабинета.

На сегодняшний день работа над проектом ведется в области разработки. А новые решения и готовый результат будем демонстрировать в течение следующего года и на будущем конкурсе.
Спасибо за внимание!

As a result, the perception of content on the site has significantly improved and the procedure for selecting, purchasing and ordering goods has been facilitated.
After we fully realized the most difficult parts of the project, further work went quite calmly and easily, where, as we worked on the design, we twisted the interface and applied new solutions, optimizing the solutions proposed in the prototype and proposing more correct ways.


A separate pleasant challenge was the implementation of the Personal Account, in which the latest orders and statuses and even accounting documents are very compact. Not to mention the traditional function of a classic personal account.


To date, work on the project is in the development field. And we will demonstrate new solutions and the finished result over the next year and at a future competition.
Thanks for your attention!

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

Спроектировать сайт и обновить дизайн для интернет-магазина, с учетом предоставленных материалов и ряда проблем, с которыми нам предстоит разобраться в процессе. И в последствии реализовать его на 1С Битрикс.


The materials provided did not reveal the whole picture of the project, and it was necessary to carry out work on each page to finalize the prototype, structure and interaction with the site.

Today there are a lot of cards and directories. However, it took quite a while to implement the current version of the catalog.

Among the identified problems:
- Illogical elements and semantic blocks. For example, a monotonous, not informative, ruffling, old product card. A repeating photo inside the card and an inconvenient filter that “destroys” the catalog, turning it into a tool for filtering and sorting goods without distinct groups. In the example above, we fixed it and brought it to a decent state.
- 8 groups of goods and a dozen — other subgroups — this is a lot. First-time users of this site should be helped to quickly navigate their products.

The stereotypes in this project did not work for us, but against us. For example, how, through the Internet, having balances in different warehouses, and a lot of scraps, to collect the set you need in a few tons, organize the movement and pay without accounting problems of errors in the documents.

Immediately there is a desire to order everything through the manager.

And we need to minimize the participation of managers in the order process.
The specifics of the project is such that product residues can be scattered between Moscow and St. Petersburg, can be in the process of arriving at the warehouse, or even be booked on the way.


We continued to work on the design and design as a result of which:

- The catalog structure, the design of the elements were completely redesigned and the logic of the order and the selection process of the goods was revised.
- A product card and an interaction unit with it were collected from scratch.

The selection and acquaintance with the products is easy and comfortable.

Tips have been added so that in the process of working with cutting metal users are better guided in the procedure.

The statuses of goods in warehouses and interactions with them are worked out in detail.

Improved front page interface.
And also, based on the catalog solution, the basket and steps in the order forms were optimized


Прочая информация о кейсе

Коротко о проекте: Компания «ЛИСТ» уже более 25 лет занимается складской торговлей металлопрокатом из сплавов на основе алюминия и меди.

2 складских комплекса (в Санкт-Петербурге и Москве). Переработка до 700 тонн цветного металлопроката ежемесячно. Постоянные запасы алюминиевого, медного, латунного, бронзового проката составляют более 2500 тонн и свыше 4000 позиций.

Цель проекта — создание комфортной площадки для продажи металлопроката и заказа сложной услуги в виде резки металла и выточке деталей из этой продукции.

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

Данный кейс является яркой иллюстрацией двух тезисов:

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

— Не стоит слепо доверять внутренней аналитике, как и внешней, даже если это заказная работа, порой нужно переделывать работу заново. Что нас и ожидало.

Изучение рынка и принятие ключевых решений

Аналогичных площадок в этом секторе торговли оказалось довольно мало, соответственно, было и не много данных для конкурентного анализа. Однако были изучены механики популярных крупнейших производителей, специализирующихся на производстве и продаже прочих металлов.

На этом же этапе было принято решение сконцентрироваться на создании максимально удобного для пользователей интерфейса, особенно в части магазина, а разработку инструмента резки отложить на потом, ориентируясь на самые распространенные пользовательские сценарии.

Также было решено реализовывать проект последовательно и были выделены основные этапы:

— Переработка предоставленного прототипа в основных страницах.
— Дизайн сайта.
— Front-end и Back-end реализация.
— Интеграции с системами учета, доставки и др.

Предоставленные материалы не раскрывали всей картины проекта, и приходилось на каждой страницы проводить работы по доработке прототипа, структуры и взаимодействия с сайтом.

Сегодня карточек и каталогов огромное множество. Однако на реализацию текущей версии каталога ушло довольно много времени.

Среди выявленных проблем:
— Нелогичные элементы и смысловые блоки. Например, однообразная, не информативная, рябящая, старая карточка товара. Повторяющееся фото внутри карточки и неудобный фильтр, который «уничтожает» каталог, превращая его инструмент фильтрации и сортировки товара без внятных группировок. В примере выше мы это исправили и довели до приличного состояния.
— 8 групп товаров и десяток—другой подгрупп — это много. Пользователям, впервые использующим этот сайт, нужно помочь быстро сориентироваться в продукции.
Стереотипы в рамках данного проекта работали не на нас, а против нас. Например, как через интернет, имея остатки на разных складах, и множество обрезков, собрать нужный себе комплект в несколько тонн, организовать перемещение и провести оплату без бухгалтерских проблем ошибок в документах.

Сразу возникает желание все заказать через менеджера.

А нам нужно минимизировать участие менеджеров в процессе заказа.
Специфика проекта такова, что остатки продукции могут быть разбросаны между Москвой и Питером, могут находиться в процессе прибывания на склад или даже быть забронированы еще в пути.

Briefly about the project: The LIST company has been engaged in warehouse trade in metal products from alloys based on aluminum and copper for more than 25 years.
2 warehouse complexes (in St. Petersburg and Moscow). Processing up to 700 tons of non-ferrous metal monthly. Permanent reserves of aluminum, copper, brass, bronze rolled products are more than 2500 tons and more than 4000 positions.

A task:
Design a site and update the design for an online store, taking into account the materials provided and a number of problems that we have to deal with in the process. And later to implement it on 1C Bitrix.


The aim of the project is to create a comfortable platform for the sale of metal and order complex services in the form of metal cutting and undercutting parts from these products.

Since it was difficult to realize all his desires within the framework of the old site, and the design was morally obsolete, it was obvious that we would need to carry out a lot of work in the field of designing the entire site logic, user interaction and a huge number of revisions of the current site prototype. As a result, it was decided to create a site that is convenient for all categories of users: construction companies, manufacturers, builders and suppliers, within large and small companies and individuals.

This case is a vivid illustration of two points:

- Identifying the needs of users and the desire to make a comfortable tool for selling such a complex product can be a more powerful locomotive for the development of the project than the task of simply launching another online store.

- You should not blindly trust internal analytics, as well as external, even if it is a custom-made work, sometimes you need to redo the work again. What awaited us.

Market research and key decision making

There were quite few similar sites in this trading sector; accordingly, there was not much data for competitive analysis. However, the mechanics of the popular largest manufacturers specializing in the production and sale of other metals were studied.

At the same stage, it was decided to concentrate on creating the most user-friendly interface, especially in the store, and postpone the development of the cutting tool for later, focusing on the most common user scenarios.


It was also decided to implement the project sequentially and the main stages were highlighted:

- Recycling the provided prototype in the main pages.
- Site design.
- Front-end and back-end implementation.
- Integration with accounting systems, delivery, etc.

Скриншоты

Видео

Комментарий заказчика

Мы крайне довольны результатом. Очень надеемся что дальнейшие работы будут проводиться также, как и первые 2 этапа.
Share
Share

Номинации

Сайты → Ритейл и e-commerce
Сайты → Промышленность и производство
Совершенное исполнение (Craft) → Лучший дизайн

Дата запуска

14 ноября 2019 года

Ориентировочный бюджет

1 000 000 ₽

Авторы

Куфаков Максим — Дизайн директор/ Продюсер
Татаев Константин — Арт Директор / Архитектор / Дизайнер
Саша Гаврилова — Проектировщик
Анна Веселова — Дизайнер

Ссылки

behance.net youtube.com
Крупнейший digital-конкурс в Европе
Подавайте работы до 3 июля (птн)18 000 Р,
с 4 июля (сб)24 000 Р

Церемония награждения — 4 декабря (пт)  •  Москва и онлайн
Купить билет
Количество билетов ограниченно, торопитесь!