Сначала разобраться в исходном сайте
До работы над макетами подготовил UX-аудит и разбор контента исходного сайта. Рассмотрел витрину, названия товаров, показ цен и способы связи. Зафиксировал наблюдения, предложения по улучшению и вопросы для дальнейшей проверки.
Ниже — исходная главная и её товарная сетка. Из аудита получились три приоритета: отделить характеристики от рекламного текста, объяснить способ расчёта цены и передавать выбранные материалы в переписку. Это экспертный разбор без интервью с покупателями и продуктовой аналитики.
Характеристики внутри длинных названий
Наблюдение. В названиях смешаны материал, сорт, толщины и рекламные формулировки. Параметры для сравнения стоят в разных местах.
Решение. Сократить название, вынести размер, толщину и единицу продажи в отдельные поля, добавить фильтры по параметрам.
Разные способы показа цены
Наблюдение. У части карточек есть цена и скидка, у других цена отсутствует. Сетка не объясняет следующий шаг для товара по запросу.
Решение. Разделить предварительную стоимость и запрос расчёта. Считать площадь и количество, а доставку и итог согласовывать с магазином.
Связь без выбранного состава
Наблюдение. На сайте уже есть телефон и Zalo. Сам переход к контакту не объясняет, какую конфигурацию выбрал покупатель.
Решение. Сохранять состав в заявке и кабинете менеджера; предложить готовый ответ в Zalo с этими параметрами.
Сохранить привычные ориентиры, упростить выбор
Широкий поиск, категории материалов и заметная корзина ведут в каталог. В карточках отдельно показаны название, размеры, толщина и цена. Страницы доставки, обработки и контактов отвечают на практические вопросы до обращения в магазин.
Сначала выбрать параметры, затем обсуждать заказ
На странице товара фотографии, характеристики и выбор параметров собраны рядом. Покупатель выбирает размер и толщину, задаёт количество и видит общую площадь и предварительную сумму. Описание, обработка и доставка доступны во вкладках.
В демо можно менять параметры, переключать фотографии и вкладки, добавлять разные конфигурации в корзину, менять количество и удалять товары. Цены комплектаций демонстрационные; заявки в магазин не отправляются.
Попробуйте карточку товара
Выберите параметры, измените количество и откройте корзину.
Отделить заявку от подтверждённого заказа
Покупатель проверяет состав, оставляет контакт и выбирает способ получения. Создавать аккаунт не нужно. В сводке предварительная сумма материалов отделена от доставки, которую ещё предстоит согласовать.
После отправки появляется номер заявки и объяснение следующего шага. Статус «заявка получена» не означает, что наличие, доставка и итоговая цена уже согласованы.
Тот же сценарий на небольшом экране
Мобильная версия сохраняет последовательность решений: найти материал, проверить характеристики, выбрать параметры и отправить заявку. Количество меняется крупными кнопками, счётчик корзины заметен, а для вопросов доступен Zalo.
Показать менеджеру, что делать дальше
Список заказов выделяет новые заявки и показывает материал, количество, сумму и статус. В карточке собраны состав, сведения о клиенте, стоимость доставки и подтверждение. История помогает увидеть, что уже произошло.
Для товаров предусмотрены отдельные список и редактор. Название, размеры, толщины, способ показа цены и фотографии заполняются независимо. Предпросмотр карточки и проверка перед публикацией помогают оценить результат или сохранить черновик.
Сохранить детали заказа в переписке
Выбрал Zalo, который уже указан среди контактов исходного сайта. В предложенном сценарии помощник уведомляет сотрудника о заявке и ведёт в её карточку. В чате с покупателем показан готовый ответ с материалом, количеством, доставкой и итогом.
Менеджер проверяет ответ перед отправкой. Макеты показывают концепцию интеграции; права бота и доставку сообщений ещё нужно сверить с процессами компании и возможностями Zalo.
Доработать домик, сохранить узнаваемость
Сохранил домик из исходного знака: красную крышу, зелёные стены и арочный вход. Упрощённая геометрия и спокойное написание названия помогают использовать его в небольшом размере — на сайте, документах, форме, машине и вывеске.
Интерфейс построен на компонентах Material 3, адаптированных под палитру бренда и Be Vietnam Pro. Тёплые фактуры дерева, насыщенные карточки и прямая связь с магазином сохраняют локальный контекст. Физические носители показаны на сгенерированных мокапах.
Связанный сценарий для проверки
Концепт связывает витрину, заявку, кабинет менеджера и переписку вокруг одного состава материалов. Интерактивное демо позволяет проверить основные действия. Следующий шаг — выяснить, понимают ли покупатели предварительную сумму и могут ли сотрудники согласовать заказ без повторного уточнения состава.
