Обновление сайта · Подольск
ПлиткаБузСайт, который показывает интерьер до покупки
Павильон плитки на 36-м километре трассы М-2 и больше 19 тысяч товаров. Главный козырь магазина — бесплатная 3D-визуализация интерьера с выбранной плиткой — прятался пятым пунктом меню. Мы перестроили сайт вокруг него — от первого экрана до окна заявки, — сохранив каталог, корзину и адреса страниц.
- 19 страниц
- разобрали на аудите — на компьютере и телефоне
- 17 видов
- страниц и окон в новом оформлении
- 7 мест
- где теперь предлагают 3D-визуализацию
- 0 правок
- в корзине, каталоге и адресах страниц
Было и стало
Главная целиком
Старая главная начиналась сразу с плиток разделов, дальше шли одинаковые ленты товаров и абзац текста мелким шрифтом. Ни слова о 3D-визуализации и павильоне. Прокрутите обе страницы рядом — ползунком или колесом над окном.
- Козырь в середине меню«3Д ДИЗАЙН» — пятым пунктом заглавными буквами, на главной о нём ни слова.
- Пакет затирки на беломФото разделов из разных миров: интерьер, рендер, упаковка из каталога.
- Строка «Бренды: A B C…»Алфавит на всю ширину под меню на каждой странице.
- Одинаковые лентыКоллекции, популярные и новые товары — одной сеткой до подвала.
3D-визуализация
Пятый пункт меню —
теперь в семи местах
Плитку трудно выбрать по маленькому образцу, поэтому магазин бесплатно показывает её в 3D-модели комнаты покупателя. Раньше об этом знал только тот, кто сам открыл пункт меню «3Д ДИЗАЙН». Теперь предложение встречается на пути к покупке везде, где покупатель сомневается.
Цвет и шрифт
Палитра —
из логотипа
Круглый логотип магазина — плиточная мозаика кобальтового цвета. Его мы и взяли за основу: кобальт для каталога и акцентов, графит для шапки и подвала, тёплая терракота — только для кнопок покупки и звонка. Заголовки — широкий Unbounded, текст — Onest.
#0f1724#2348c0#e2703f#ebe6dc#f6f4efШапка
Три подхода
к одной строке
Первая версия новой шапки получилась в два этажа: разделы каталога и служебные ссылки не помещались в строку. На приёмке её забраковали — слишком большая. Служебные ссылки переехали в тёмную строку с адресом, а в меню остались разделы и кнопка 3D-визуализации.
Логотип, поиск, телефон, меню заглавными буквами и строка брендов «A B C…» под ним.
Фото разделов
Одна серия
вместо семи миров
Семь разделов каталога были проиллюстрированы чем придётся — от интерьерного фото до пакета затирки на белом фоне. Мы сделали серию в одном свете: тёплое солнце, камень, кобальтовый акцент как в логотипе. Это иллюстрации нейросети, а не фото ассортимента. Наведите на плитку, чтобы увидеть, как было.
Страница 3D-дизайна
Витрина
для работ дизайнеров
Визуализации делают дизайнеры магазина — 29 интерьеров ванных, кухонь и гостиных с плиткой из ассортимента. Раньше они висели сеткой в конце длинного текста. Мы сделали из страницы витрину: коллаж и счётчик на первом экране, шаги, все работы с увеличением. Потяните карусель.
О компании
Павильон —
на первом экране
На странице «О компании» было 38 фотографий павильона — стенды с образцами плитки, клинкера и фасадного камня. Мы вынесли их в первый экран страницы и отдельную галерею «Образцы можно посмотреть вживую», а текст разложили по карточкам.
Каталог и товар
Новый вид —
тот же магазин
Фильтры, сортировка, корзина, калькулятор упаковок и «Купить в 1 клик» работают на прежнем коде. Мы поменяли оформление поверх него — поэтому обновление не задело ни один заказ и ни один адрес страницы. Наведите на окно, чтобы прокрутить.
Живой сайт
Все страницы —
одним языком
У каждой внутренней страницы теперь тёмная шапка с крупным заголовком, а дальше — своя подача: витрина работ, карточки доставки, фото павильона, карта. Выберите страницу и прокрутите её.
Белые карточки, терракотовая кнопка «В корзину», меню разделов и фильтры в карточках. Больше 19 тысяч товаров на прежнем коде магазина.
Как шла работа
Шесть этапов —
одна команда
Над проектом работала команда студии — от разбора старого сайта до приёмки, с проверкой каждой страницы на компьютере и телефоне. Обновление шло на работающем сайте — магазин продолжал принимать заказы, а старый вид сохранён снимками до первой правки.
- АудитСняли 19 страниц на компьютере и телефоне, сохранили код и данные сайта. Разобрали, где покупатель теряется и что магазин недоговаривает.
- КонцепцияНашли главный козырь — бесплатную 3D-визуализацию — и выстроили вокруг него путь покупателя: от первого экрана до окна звонка.
- Дизайн-системаПалитра из логотипа, шрифты, сетка, кнопки и карточки — один язык для всех страниц и окон.
- Главная и шапкаПервый экран с настоящими визуализациями, блок «Примерьте плитку до покупки», серия фото разделов, шапка и подвал.
- Каталог и страницыНовый вид каталога и карточки товара поверх прежнего кода магазина, витрина 3D-работ, павильон, доставка, контакты.
- Приёмка и доводкаПроверка на компьютере и телефоне, правки по замечаниям: шапка в одну строку, окна заявок, плавные переходы, алфавит брендов.
На телефоне
Звонок и каталог —
под пальцем
Своя шапка с поиском и кнопкой звонка, внизу — каталог, избранное, сравнение, корзина и звонок. Галереи 3D-работ и павильона на телефоне идут в две колонки. Нажмите на телефон, чтобы остановить прокрутку.
Итог
Сначала — в 3D.
Потом — на сайте.
Главная, шапка, подвал, каталог, разделы, коллекции, карточка товара, бренды, доставка, 3D-дизайн, о компании, контакты, статьи и окна заявок — единым языком, без остановки продаж. Козырь магазина больше не прячется в меню: он ведёт покупателя от первого экрана до звонка.