Представить обычные рабочие перчатки так, как будто это смартфон Apple?! Интервью с призерами Workspace Digital Awards

Продолжаем серию парных интервью, цель которых — не только демонстрация внутренней digital-кухни, но и поиск секретов успеха по-настоящему крутых кейсов. А выпытываем их мы и у заказчиков, и у исполнителей проектов, занявших призовые места или вышедших в финал конкурса Workspace Digital Awards.

В этот раз мы поговорили с Леонидом Арутюновым, генеральным директором компании Bronitex, и Семёном Фомичёвым — лидом направления визуальных коммуникаций Red Collar, выступившего ведущим дизайнером проекта.

Речь пойдет о кейсе Корпоративный сайт для производителя перчаток Bronitex. Эта работа заняла первое место в категории Сайты, номинация Потребительские товары.

Что интересного узнали:

• Как выстроить проектный процесс, чтобы успеть реализовать крутой сайт для производителя всего за 2 месяца;

• Сколько времени заняла подготовка 3D-модели перчаток и разных текстур для нее;

• Какие специалисты необходимы для сайта с динамическими эффектами и 3D-моделями;

• Почему на сайтах производителей часто не бывает корзины, и многое другое.

Итак, поехали!

Леонид: Мы поставили перед собой цель создать самый современный и масштабный завод по производству рабочих перчаток в России. У нас передовое оборудование, которое позволяет добиваться наивысшего качества продукции для наших клиентов. И мы поняли, что сайт должен стать визитной карточкой Bronitex и обязательно отражать нашу уникальность и раскрывать все преимущества.

Леонид: Мы обратились в Red Collar по рекомендации и уже на первом звонке поняли, что не прогадали. Несмотря на неординарность задачи, коллеги из агентства сразу прочувствовали задумку, активно выдвигали собственные идеи, демонстрируя полную вовлеченность. Сложилось ощущение, что с первых минут мы стали одной командой, работающей над общим интересным проектом.

Семён: Конкретно для промышленной экипировки — нет, но мы работаем над проектами для разных индустрий: от добычи сырья и сельского хозяйства до геймдева и телекома.

Семён: По нашему опыту можем сказать, что проектов, где позволяют такую творческую свободу, очень мало. Bronitex пришёл к нам с запросом сделать сайт перчаток «как у Apple» и дал зелёный свет на любой креатив, главное, чтобы он показывал товар оригинально.

Леонид: Мы изначально решили, что дадим агентству «зеленый свет», задав только основные рамки с помощью референсов. Но важным условием было, чтоб анимация была уместна и имела обоснованный функционал. Например, привлечь внимание к важному блоку, облегчить восприятие цифр, сделать сайт более живым и современным, подсказывать действие пользователю. Одним словом — быть всецело ориентированным на пользователя. Клиентоцентричность — основа всей деятельности Bronitex в целом. А сайт — важный инструмент отражения наших ценностей.

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

Семён: Да, мы упаковываем результаты этапа в специальные корпоративные шаблоны и презентуем клиентам: цели пользователя, анализ целевой аудитории и бизнес-целей клиента, SWOT-анализ и другие артефакты аналитики.

Семён: Помимо стандартной истории (брифы, анализ рынка и конкурентов) мы часто и детально общались с командой заказчика — команда Bronitex нас много консультировала по продукции, давала референсы, это позволяло и оперативно согласовывать элементы, и погружаться в бизнес.

Товар представлен на сайте с помощью 3D-элементов и моушн-дизайна

Леонид: На первый взгляд такая формулировка может показаться странной, но наши перчатки — это действительно Apple в мире средств индивидуальной защиты. И мне кажется, нам удалось донести это до пользователей через сайт. Концепция заключалась в том, чтобы последовательно показать пользователю весь путь создания, казалось бы, обычной перчатки: от выбора материала до доставки товара.

Леонид: Удобные фильтры каталога, полезная анимация, структура описания каждой позиции, 3D-модели, с которыми можно взаимодействовать — все это сильно упрощает пользование сайтом. Кроме того, в каталоге есть удобная функция переключения фото при наведении курсора на карточку товара, чтобы сэкономить время пользователя при выборе. Сейчас наш ассортимент сильно расширяется, поэтому актуальность такого функционала будет только расти.

Леонид: Мы в Bronitex не просто делаем перчатки. Каждая мелочь нашего товара продумана и реализована так, чтобы пользователю было комфортно: качество ткани, фиксация на руке, надежное покрытие, широкий ассортимент, возможность создать собственный дизайн или забрендировать тираж. Более того, наше производство одно из самых масштабных в стране, что позволяет реализовывать огромные объемы в короткие сроки. И нашей задачей было все это отразить на сайте.

Леонид: Как показывает аналитика, наши клиенты по достоинству оценили каждый элемент сайта, который мы с большой любовью для них придумали и реализовали.

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

Семён: То, что смогли оригинально показать обычный товар с помощью 3D-элементов и моушн-дизайна — важная фишка.

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

Еще работа мобильной версии, которая сильно отличается от десктопной — в ней все блоки перестраиваются и анимации адаптируются под тип устройства, это тоже крутая фишка.

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

Леонид: Я бы сказал, найти решение, которое будет одновременно отвечать и нашим ожиданиям, и ожиданиям рынка и клиентов. Кроме того, задачу сильно усложняли очень сжатые сроки — у нас с командой Red Collar было всего 2 месяца.

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

Ещё сжатые сроки и необходимость сделать сайт, который будет одинаково хорошо работать на десктопе и мобильных устройствах. А учитывая то, что у нас было много 3D-моделей, оптимизация стала очень важной и сложной задачей, с которой мы успешно справились.

Леонид: Время покажет :) На текущий момент могу сказать, что каждый элемент на сайте имеет свое назначение, каждый — на своем месте.

Как говорил ранее, для нас было важным не просто добиться «вау-эффекта», но и сделать сайт действительно удобным и информативным для пользователя.

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

Сам процесс выглядел так: моделирование перчатки оптимального размера, создание текстур под неё по референсам, утверждение с клиентом, перенос всего на сайт.

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

Мы поняли, что в нашем случае нет необходимости использовать метафору: есть перчатки — показываем перчатки. И это сработало. Согласовали всё достаточно быстро, поскольку сроки были сжатые.

Семён: Начали с дизайна главной страницы и каталога. Как только доделали десктопную версию, сразу подключили фронтенд-разработчика, чтобы начать работу над моделями на главной: оптимизировать текстуры и наладить свет.

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

Пока шла разработка главной страницы со всеми визуальными элементами и 3D-моделями, в параллели шла разработка фронтендерами страниц каталога и бэкендером административной панели на Jmix, куда клиент будет добавлять все товары.

Семён: UX/UI дизайнеры, моушен-дизайнеры, 3D-дизайнеры, тестировщики, фронтенд-разработчики, бэкенд-разработчики, продюсер проекта.

Леонид: Команда Red Collar нас очень удивила своим профессионализмом. Скажу честно, мы даже не ожидали такого основательного подхода. За каждый участок работы отвечал выделенный специалист, а порой даже целая команда экспертов, которая подключалась к процессу по мере того, как мы продвигались по проекту.

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

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

Bronitex сейчас активно развивается, мы не исключаем возможности дальнейшего расширения ассортимента. Поэтому уверены, что еще реализуем с Red Collar много интересного!

Семён: Остроту выдумки. Мы показали обычный товар как что-то элитарное, штучное. Плюс, техническое решение: оптимизированные 3D-модели на главной, всё разнообразие текстур и видов перчаток.

Семён: В этом году у нас будет несколько крутых работ, так что да, вы нас обязательно увидите в числе участников.

Коллеги, спасибо вам за классные, развернутые ответы! Желаем вашему союзу новых творческих и бизнес-успехов!