Сайт-каталог производителя
стройматериалов
Braer — российский холдинг по производству керамических стройматериалов европейского качества. Предприятие выпускает кирпичную продукцию нового класса, совмещая в себе эстетику, инновационность и традиции поколений.
braer.ru
Глобальная задача
Сделать сайт более удобным для пользователей и разработать функциональный каталог с плавной навигацией и современным дизайном — приблизив платформу к стандартам профессионального UX/UI для корпоративных сайтов.
Состав работ
Мы провели комплексный анализ компании и ее бизнес-среды, обновили дизайн-систему бренда и спроектировали структуру сайта, включая личные кабинеты и расширенный каталог продуктов и услуг. В рамках проекта также были внедрены специализированные функции, характерные для сложных корпоративных платформ и онлайн-сервисов.
Предпроектная
аналитика
На этапе предпроектной аналитики мы изучили более 40 сайтов конкурентов, чтобы выявить их сильные стороны и проанализировать подходы к UX/UI. Этот этап отражает методологию, которую мы применяем в UX/UI-аудите: он позволил определить наиболее эффективные паттерны взаимодействия и заложить их в основу прототипов.
В результате фокус был смещен на создание удобного, логически выстроенного продукта, отвечающего ожиданиям пользователей и задачам бизнеса.
Структура сайта
Мы полностью переосмыслили архитектуру сайта. Каждая страница была детально проработана и встроена в единую систему навигации — подход, характерный для сложных проектов разработки онлайн-сервисов с разветвленной структурой и большим количеством сценариев использования.
Прототипирование
На этапе прототипирования уделили особое внимание структуре страниц, сделали их содержательными и эффективными.
Приоритетом стало упрощение взаимодействия пользователей с каталогом продукции и наполнение главной страницы полезным контентом, который сразу рассказал о профиле компании и предоставляемых услугах.
Разработка дизайн
системы
В дизайне сайта мы воплотили все пожелания заказчика и создали корпоративный стиль, сочетающий в себе брутальность, понятность, современность и удобство.
Мы разработали подробный UI KIT, в котором отразили гармонию всех компонентов сайта: сеток, цветов, шрифта, иконок и элементов.
Подбор палитры, типографики
и иллюстраций
Выбранная цветовая палитра выгодно выделяет бренд на фоне конкурентов.
Шрифт Pragmatiсa отлично подходит для заголовков и основного текста, поддерживает дизайн и отражает стиль сайта.
Продукцию клиента облекли в минималистичные векторные иллюстрации, поддерживающие основную дизайн-концепцию бренда.
Разработка анимаций
Отличным решением стало добавление анимаций сложного процесса производства. Это помогло сделать его понятным и интересным для пользователей.
Отдельное внимание уделили особой коллекции кирпича. Мы создали для нее уникальную темную тему и индивидуальный дизайн карточек, тем самым подчеркнув эксклюзивность и премиальность продукции.
Функционал и возможности
Структурирование каталога
Мы значительно расширили возможности каталога. Теперь на странице категории выводятся коллекции, фильтры и товары в нескольких форматах — плиткой или списком.
Для удобной работы со списком товаров мы оптимизировали пространство и вывели нестандартный вид фильтров. Это позволило сэкономить место для товаров и не потерять качество взаимодействия с фильтрами.
Оформление заказа в поддонах
Мы реализовали возможность оформления заказа не только поштучно, но и в поддонах (м²). Это нестандартное решение потребовало разработки кастомной логики и отражает уровень инженерной проработки, характерный для разработки личных кабинетов и B2B-решений для промышленных клиентов.
Штука
Поддон
Создание продающей карточки товара
В основу создания карточки легла идея подробной консультации о товаре. Карточка, подобно умелому продавцу в оффлайн-магазине, рассказывает о ключевых преимуществах товара, работает с возражениями, демонстрирует продукцию в кладке и на фото проектов. А также вовлекает в процесс подсчета товара с помощью привлекательной и наглядной анимации.
Страница превратилась в эффективный и информативный инструмент, помогающий клиентам принять обоснованное решение о покупке.
Реорганизация
личного кабинета
Мы провели оптимизацию личного кабинета, улучшили его структуру и упорядочили содержание. Теперь все материалы находятся в интуитивно понятных разделах, что позволяет пользователям быстрее находить нужную информацию и файлы.
В личном кабинете мы предусмотрели возможность отправки заявок на материалы и на отслеживание их статуса. Упростили работу дистрибьюторов с заказами: сократили количество лишних статусов, добавили историю общения с менеджерами и многое другое.
Разработка
адаптивной версии
Наличие мобильной версии является неотъемлемым атрибутом успешного сайта. Поэтому мы внимательно подошли к адаптивным версиям, сделав их максимально удобными и оптимизированными под различные устройства.
Фильтры в мобильной версии продуманы для удобного использования одной рукой. Интерфейс одинаково понятен и удобен на всех устройствах.
Кратко о проекте: каталог и личный кабинет Braer
- Клиент
- Braer — холдинг по производству керамического кирпича европейского качества (braer.ru).
- Задача
- Пересобрать каталог товаров и личный кабинет так, чтобы B2B-покупатель мог заказывать стройматериал двумя способами — поштучно и поддонами, в м², — без конфликта этих двух сценариев в навигации, фильтрах и оформлении заказа.
- Подход
- До начала дизайна разобрали 40+ сайтов конкурентов, затем пересобрали фильтрацию каталога, карточку товара и личный кабинет вокруг этого одного решения по единицам измерения.
Единственная по-настоящему сложная задача этого кейса
Большинство B2B-каталогов стройматериалов продают поштучно. Braer продаёт кирпич ещё и поддонами — в квадратных метрах, — и этот один факт ломает типовой каталог: фильтры, карточки товара и логика корзины по умолчанию рассчитаны на одну единицу измерения. Реальный результат пересборки — кастомная логика заказа, которая держит оба сценария без раздвоения каталога на два разных интерфейса.
Что сделано
- Предпроектный разбор: 40+ сайтов конкурентов изучены на предмет паттернов UX каталога и личного кабинета до того, как был нарисован первый экран.
- Каталог: страницы категорий с переключением «плитка/список», нестандартная раскладка фильтров, добавляющая опции фильтрации без того, чтобы товары уходили ниже экрана.
- Заказ поддонами (м²): карточка товара и логика корзины поддерживают и поштучную, и поддонную (м²) покупку — это и есть нестандартная часть разработки.
- Карточка товара: пересобрана так, чтобы снимать возражения напрямую — реальные фото объектов, визуализация кладки, встроенный калькулятор количества.
- Личный кабинет: реорганизован специально под дистрибьюторов — убраны лишние статусы заказа, добавлена история переписки с менеджером в формате мессенджера, чтобы статус заказа и коммуникация жили в одном месте.
- Адаптивные фильтры: мобильный UI фильтров спроектирован для управления одной рукой, а не как уменьшенная копия десктопа.
