drag

кейс

Bronitex

Сайт для производителя рабочих перчаток в духе технологичного мирового флагмана

bronitex.ru
ко всем работам
задача

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

клиент

Bronitex

отрасль

Производство

год запуска

2022

что сделали

Прототипы
Дизайн сайта
3D-модели
Motion-дизайн
Frontend-разработка
Backend-разработка
Тестирование

Аналитика на старте

Для отстройки структуры и создания дизайна проанализировали существующий рынок. Переработали существующую структуру для более результативного взаимодействия пользователя и интерфейса. Проанализировали путь пользователя и пользовательские сценарии для проектирования прототипов. 

 

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

Главная страница и знакомство с товаром

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

 

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

 

Рассказали о преимуществах каждой модели и различных типах покрытия, анимировали и привязали к скроллу процесс «упаковки» перчаток одна к одной.

Каталог продукции

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

 

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

 

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

Графика + интерактивность

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

 

Чтобы все «летало», провели кросс-браузерное и мультиплатформенное тестирование, включающее в себя стабилизацию работы на мобильных устройствах Apple и Android, в браузерах Google Chrome и Safari. Для дальнейшей оптимизации создали модуль, который сжимает картинку при загрузке практически без потери качества.

 

Повышение доверия

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

 

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

Разработка

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

 

В админке доступны таблицы с единицами измерения и со статусами откликов на вакансии и запросов на сотрудничество. Установлена защита на удаление статусов и настройка полей форм. HR-менеджер может смотреть отклики и взаимодействовать с ними. Также добавили возможность настраивать роли администраторов сайта с доступами в разделы для разных пользователей.

Детали 

На складе клиента всегда есть 2 млн перчаток — ошибок с недостатком товара не будет. Но на сайте мы продумали 404 ошибку, так же в общей визуальной стилистике. 

 

Это касается всех деталей сайта, которые отстраивают клиента от конкурентов, и продолжается и за его пределами: при оформлении заказа пользователь получает письмо-автоответ в той же стилистике.

технологии

Jmix

Spring Boot

Java 11

Gradle

Spring framework

PostgreSQL

Docker

React

Next.js

Three.js

отзыв

Ашот Арутюнов
Ашот Арутюнов
Генеральный директор
Bronitex

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

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

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

Рекомендуем к сотрудничеству.

смотрите также

MegaLabs

Дизайн-система и frontend-разработка платформы для проведения вебинаров

Панельки

Мобильная игра для МегаФона: советская эстетика, пиксель-арт и любовь к ретро

Creddy

Дизайн и разработка сайта для современного p2p-сервиса онлайн-кредитования

связаться

Расскажите о своей задаче

Мы Red Collar, а как зовут вас? Чтобы связаться, нам нужен ваш e-mail Ого, какой тяжелый файл! Больше 10 MБ ждем на hello@redcollar.ru Пожалуйста, проверьте, правильно ли написан e-mail

Нажимая кнопку, вы соглашаетесь с нашей политикой в отношении обработки персональных данных