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