Кейс: Редизайн сайта «СКМ-Мебель» — от шаблонного решения к уверенному бренду интернет-магазин

Редизайн сайта

Рассказываем, как мы сохранили всю функциональность сайта, и превратили его в узнаваемый бренд на мебельном рынке.

Важное уточнение

Изначально проект был запущен на платформе «Аспро: Next» другой командой разработчиков, как стандартное шаблонное решение. Лишь спустя несколько лет сайт перешёл к нашему агентству с большой задачей: сохранить функционал, но существенно обновить визуал, сделав акцент на конверсию.

Заказчик

Компания «СКМ-МЕБЕЛЬ» работает на рынке мебельных комплектующих с 1999 года, предлагая более 25 000 позиций. Это один из крупнейших поставщиков комплектующих материалов для производства мебели и строительно-плитной продукции в Урало-Сибирском регионе.

Задача

Провести комплексный редизайн, сохранив рабочую логику системы, и при этом решить три ключевые цели:

Создать более современный дизайн;
Улучшить юзабилити;
Повысить конверсию на основных страницах.

С чего мы начинали?

Клиент предоставил нам черновые эскизы, которые отражают его представление о проекте. Показал, как видит каждую страницу, какие блоки там должны показываться, и где именно будут располагаться.

Пример чернового эскиза раздела каталога

Пример чернового эскиза раздела каталога

Изучив их и данные Яндекс Метрики, наши дизайнеры разработали макеты с учетом современных принципов дизайна — целостный фирменный стиль, основанный на минимализме. Реализация шла поэтапно: сначала верстали ключевые страницы (главная, каталог, карточка товара), затем и остальные разделы сайта.

Готовый раздел каталога после редизайна

Готовый раздел каталога после редизайна

В процессе внедрения стало очевидно: чтобы дизайн не только радовал глаз, но и работал на конверсию, он должен быть поддержан технически. Некоторые визуальные решения, например, формы кнопок, динамические блоки или табы, требовали изменений в коде. Это естественно привело к параллельной работе на двух фронтах: дизайн и программные улучшения шли синхронно.

Визуальный редизайн

Мы убрали всё, что отвлекает — анимации, перегруженные блоки, визуальный шум. Цветовую гамму выдержали в нейтральных тонах: белом, сером и чёрном, а акценты в корпоративных: синем и зелёном, чтобы подчеркнуть принадлежность к бренду.

Все элементы: кнопки, карточки товаров, баннеры и блоки услуг получили мягкие скругления, которые делают интерфейс менее резким, удобным для восприятия.

Блоки разделов каталога

Всё, конечно, было адаптировано под мобильные устройства, чтобы клиенты компании, которые часто принимают решения в цеху, на складе или в дороге могли удобно пользоваться сайтом.

Адаптация сайта

Технические доработки

Параллельно с новым визуалом мы поправили некоторые технические моменты:

Устранили битые ссылки в регионаторе, которые выявил аудит — теперь при смене города пользователь не попадает на 404-страницы.
Настроили корректную генерацию карты сайта (sitemap.xml) для каждого поддомена.
Оптимизировали структуру уникальных адресов ресурсов в интернете (URL): все коммерческие страницы перевели на второй уровень вложенности, для улучшения позиций сайта в выдаче.
Провели чистку кода — убрали устаревшие скрипты, закрыли уязвимости.

А еще:

Добавили новый раздел «Акции» в каталоге с фильтрацией, в него попадают товары всех категорий с пометкой «Акция».
Внедрили сквозной блок «Вы смотрели ранее» — он автоматически собирает карточки товаров, которые пользователь открывал, и предлагает их снова.

Блок с недавно просмотренными товарами

Добавили новый поддомен для города Тюмень с индивидуальными ценами, контактами и условиями доставки.

Какой итог?

Редизайн вышел как визуальный, так и технический. Он затронул практически все страницы сайта, даже мелкие элементы, от отступов до подсвечивания кнопок. Но основная работа была сосредоточена на ключевых разделах/формах: