Завод металлической мебели
ПодмосковьеКороткие слоганы на первом экране и логотипы клиентов.
Взяли: Логотипы заказчиков
← Портфолио
МастекСайт, который выглядит
Обновление сайта · Москва, Зеленоград
МастекСайт, который выглядит
как их верстаки.
Интернет-магазин металлической мебели для мастерских, автосервисов и производства работал на дизайне 2023 года. За один вечер мы обновили его целиком — главную, шапку, подвал, разделы, каталог и карточку товара. Каталог, корзина и адреса страниц остались прежними.
- 1 вечер
- от задачи до запуска на живом сайте
- 12 видов
- страниц и окон в новом оформлении
- 5 сайтов
- отрасли изучили перед работой
- 0 правок
- в корзине, оформлении заказа и адресах страниц
Было и стало
Главная 2023 года
против новой.
Сайт продавал прочную современную мебель, а выглядел как шаблон трёхлетней давности: первый экран занимал станок из другого направления компании, красное «Внимание!» встречало раньше товара, каталог был сеткой одинаковых плиток. Потяните шторку.
- Чужой первый экранКартинка станка из соседнего направления вместо мебели, ради которой приходят.
- Тревога вместо товараКрасное «Внимание! Корректировка цен» — первое, что видел покупатель.
- Нет подсказкиНичто не помогало понять, какой комплект подойдёт для гаража или автосервиса.
- Стена текстаВнутренние страницы — сплошной мелкий текст по ширине, без воздуха и заголовков.
Отрасль
Пять сайтов
до первой строчки кода.
Чёткого ТЗ не было — была задача «современно, в ногу со временем». Поэтому сначала мы разобрали сайты четырёх российских производителей металлической мебели и одного европейского: что у них на первом экране, как устроен каталог, где заявка. Названия не публикуем — смысл в приёмах.
Производитель промышленной мебели
регионЦифры опыта и предложение прислать задачу — «подберём решение».
Взяли: Цифры и подборМастерская мебели для гаражей
ПодмосковьеКаталог плитками с картинками и услуги на заказ.
Взяли: Каталог карточкамиФедеральный производитель сейфов и мебели
вся РоссияОтраслевые решения: банки, склады, мастерские — и форма консультации.
Взяли: Подбор по задачеЕвропейский производитель рабочих мест
ГерманияКрупный первый экран, мало текста, много воздуха и отзывы с фото проектов.
Взяли: Крупный первый экранГлавная
Девять блоков —
девять ответов.
Каждый блок новой главной отвечает на вопрос покупателя: что это, что у вас есть, подойдёт ли мне, почему вы, что дальше. Выберите блок — окно прокрутится к нему на живом сайте.
Подбор по задаче
Не «верстаки и шкафы»,
а «мой гараж».
Покупатель думает о своём помещении, а не о разделах каталога. Четыре сценария ведут сразу в готовые комплекты и нужные разделы. Иллюстрации к блокам сделаны нейросетью в стиле настоящих комплектов «Мастек» — это картинки настроения, а в каталоге остались фото самих товаров.
Автосервис и СТОСмотреть на сайте ↗
Гараж и мастерскаяСмотреть на сайте ↗
Производство и сборкаСмотреть на сайте ↗
Склад и хранениеСмотреть на сайте ↗
Фон первого экрана сделан так же: мастерская с синими шкафами и верстаками по мотивам комплекта LOFT из каталога.
Шапка
Весь каталог —
в одно нажатие.
Новая шапка на всех страницах: синяя кнопка «Каталог», поиск с подсказкой, телефон и «Заказать звонок», значки сравнения, избранного и корзины. Кнопка открывает все девять разделов с картинками и подразделами. Предупреждение о ценах осталось, но переехало в тонкую верхнюю полосу.
Было
Каталог
Новый вид —
тот же магазин.
Каталог, фильтры, корзина, «Купить в 1 клик», сравнение и избранное работают на прежнем коде: мы поменяли только оформление. Поэтому обновление не задело ни один заказ, а адреса страниц и позиции в поиске остались на месте.
БылоСтало
- Не трогали
- Каталог и товары, цены, фильтры, корзину, оформление заказа, адреса страниц.
- Обновили
- Карточки товаров, метки, фильтры, сортировку, карточку товара, выезжающую корзину.
- Добавили
- Кнопку «Помощь в подборе» в карточке товара и четыре товара в ряд на широком экране.
Живой сайт
Все страницы
в одном стиле.
Доставка, оплата, вопросы, блог и статьи раньше выглядели как распечатка. Теперь у каждой страницы своя шапка с крошками, текст разбит на карточки, а сбоку всегда есть кто помочь. Выберите страницу.
Раздел каталогаКарточки товаров в рамках, крупная цена, метки «Новинка» в цветах сайта. Слева разделы и фильтры, на широком экране — четыре товара в ряд.
Заявки
Окно заявки,
которое хочется заполнить.
«Заказ звонка» и «Помощь в подборе» были стандартными серыми окнами. Теперь в каждом — короткое объяснение, что будет дальше, крупные поля, одна кнопка и телефон внизу для тех, кому быстрее позвонить. Кнопки, которые их открывают, есть в шапке, на главной, на каждой странице и в карточке товара.
- Шапка: «Заказать звонок» и «Помощь в подборе»
- Главная: первый экран и блок «Нужен комплект?»
- Каждая внутренняя страница: блок помощи сбоку
- Карточка товара: под характеристиками
Доводка
Девять мелочей
после просмотра.
Сразу после запуска сайт посмотрели глазами покупателя на большом мониторе и прислали снимки с пометками. Всё поправили в тот же вечер — именно такие мелочи отличают аккуратный магазин от шаблона.
- ГлавнаяПлашка «Новое направление» поднялась сразу под первый экран.
- ГлавнаяУбрали рамку, которая появлялась у «Читать полностью» при нажатии.
- КаталогБлок фильтров стал одной ширины со списком разделов.
- КаталогКолонка фильтров шире — цена больше не обрезается.
- ТоварОдна линия между характеристиками вместо двух.
- ТоварОписание на всю ширину, без пустоты справа.
- Весь сайтСайт шире на больших экранах: 1360 px вместо 1140.
- КорзинаВыезжающая корзина больше не прячется под шапку.
- ТоварАккуратный счётчик количества и чёткое сердечко «В избранное».
Следующий сайт
Ваш магазин устарел?
Обновим, не останавливая продажи.
Новый вид каталога, главной и карточки товара — без переезда на другой движок, без потери товаров, заказов и позиций в поиске. Начните с адреса сайта: остальное посмотрим сами.