Darvin Digital – агентство с собственными IT-инструментами для российского рынка. Опираемся на свою инфраструктуру и сервисы, чтобы продвижение не зависело от внешних обстоятельств. 17 лет создаём и выводим в топ сайты клиентов в поисковых системах, приводим лиды из всех подходящих заказчику каналов трафика. В этом кейсе рассказываем, как редизайн и плановый переход на новую платформу переросли в масштабное обновление всех технических основ сайта и почему смета в итоге выросла почти в семь раз без потерь для клиента.
Зачем понадобился редизайн
«Галерея дверей» – сеть розничных магазинов дверей в Санкт-Петербурге с собственным производством межкомнатных полотен и складом готовой продукции. Работает и с частными покупателями, и с крупными предприятиями из сферы торговли и строительства.
Сотрудничаем с заказчиком с 2015 года. Поэтому старый сайт проекта – тоже наш. Всё это время мы точечно обновляли отдельные блоки под задачи бизнеса. Но к 2025 году стало очевидно, что локальных правок недостаточно. Сайт устарел и визуально, и технически: часть решений держалась на костылях, требовавших постоянной ручной поддержки.
Первоначальная задача – обновить визуальный стиль и устранить накопившиеся ошибки UX, перенести сайт на новую техническую платформу. Отдельным приоритетом клиент обозначил мобильную версию: именно оттуда идёт основной трафик магазина.
Важная деталь: на момент старта работ старый сайт был полностью рабочим. Никаких критических сбоев или угрозы для бизнеса не было. Это давало команде пространство и время: не нужно было экстренно латать то, что горит, можно было спокойно разобраться, что стоит переделать по-настоящему.
Что показал аудит
Перед тем как отрисовать новый дизайн, мы провели юзабилити-аудит текущей версии сайта. Нашли несколько системных проблем, которые подтвердили необходимость редизайна.
Сломанная иерархия. На главной странице сразу после первого экрана шёл объёмный текстовый блок о компании – прежде, чем пользователь успевал увидеть хоть один товар.
Решили поменять порядок, чтоб сначала были видны краткие, конкретные преимущества магазина, а подробный рассказ о компании – внизу, после блока отзывов. Цель: сначала показать товар и убедить, что магазину можно доверять, и только потом рассказывать историю бренда тому, кто уже заинтересован.
Форма заявки не на своём месте. На первом экране раньше висела открытая форма для заявки – нетипичный паттерн для интернет-магазина: пользователь ещё не успел посмотреть ни одной двери, а его уже просят оставить контакты. Форму решили заменить компактным блоком с актуальной акцией. Он мягче вовлекает и естественнее подводит к каталогу.
Фильтр вместо товаров. В каталоге фильтр занимал весь первый экран сверху. Человек заходил посмотреть двери, а видел форму фильтрации.
Стандартная практика интернет-магазина – это не навязывать фильтр, а делать его доступным сбоку или по кнопке. Заодно решили вопрос с SEO-ссылками, которые раньше теснились рядом с фильтром и занимали немало места: эти ссылки – важный инструмент продвижения, поэтому просто убрать их было нельзя. Перенести предложили в расширенное мегаменю.
Превью карточки товара «расползалось». Из-за отсутствия визуальных границ у карточек кнопка действия визуально «уплывала» к соседнему товару – классическое нарушение принципа близости в интерфейсе.
Предложили добавить лёгкие тени и границы, чтоб карточки стали восприниматься как единое целое.
Корзина, доставка, оплата – всё сразу, без разделения на этапы. На старом сайте контактные данные, способ доставки и содержимое корзины умещались на одной странице. Понять, с чего вообще начинать оформление заказа, было тяжело.
Новое решение – разделить корзину и оформление заказа в несколько последовательных шагов, а итоговую стоимость закрепить на экране при скролле.
Так процесс станет понятнее и вероятность отказа на последнем шаге снизилась.
Если ваш сайт не обновляли несколько лет, велика вероятность, что там найдутся похожие проблемы. Проверьте, так ли это с помощью нашего чек-листа для самостоятельного аудита юзабилити.
Популярные товары терялись среди других блоков. На старом сайте карусель с популярными позициями терялась среди других – акционных предложений и новинок. Чтобы выделить её, команда предложила пересобрать блок в слайдер с визуализацией: каждая дверь показана в подходящем ей интерьере, с быстрым переходом к карточке товара. Качественных фотографий дверей в интерьере у клиента не было. Мастера фотографировали готовые работы на телефон, без света и обработки, вытянуть такие снимки до презентабельного вида было невозможно. Поэтому визуализацию решили делать полностью с нуля через нейросети, подбирая атмосферу интерьера под характер каждой конкретной двери где-то декоративной, где-то лаконичной и современной. Решение было новым и для самой команды, и для клиента. Прежде чем внедрять его на сайт, отдельно согласовали подход с заказчиком.
Интересно, откуда взялась одна из ключевых идей: не из дверных интернет-магазинов – там, если честно, ничего примечательного не нашли, а из сегмента бытовой техники. Там дополнительные услуги и аксессуары к товару традиционно показывают в корзине, а не прячут внутри объёмной карточки товара, где их легко пропустить. Решили: у dveri-spb.ru сервисные услуги (замер, доставка, установка) тоже стоит дополнительно вынести в корзину, а не оставлять погребёнными среди характеристик двери.
Три концепции
Дальше – три визуальных концепции. Важно отметить, что родились идеи из УТП клиента.
1. «Качество, проверенное годами» – говорил клиент о своём магазине. Отсюда родилась первая концепция.
Сдержанная тёплая гамма с коричневыми оттенками, минимум декора, акцент на самом товаре, а не на ярких элементах вокруг него.
2. «Самые низкие цены, удобная доставка, отсутствие предоплаты» – это уже другой регистр, про заботу о покупателе.
Вторая концепция получилась светлее и живее: более яркий оранжевый, мягкий неоморфизм, сохранённые с прошлого сайта 3D-иконки, но переосмысленные.
3. Третья концепция объединяла оба вектора: надёжность и дружелюбие.
Добились этого через нестандартную маску и матовое стекло вместо ярких фоновых цветов.
Клиент выбрал первую, «сдержанную» концепцию, внёс правки. С одной из них дизайнеры не согласились. Клиент просил вынести «Магазины» в верхний уровень шапки – туда же, где корзина и избранное. Команда объяснила: с точки зрения информационной архитектуры корзина и избранное – это основной уровень навигации, а не вспомогательное информационное меню, и смешивать их с «Магазинами» неправильно. Вместо этого предложили компромисс: на освободившееся в верхнем уровне место поставить кнопку «Обратный звонок», а «Магазины» оставить в привычном месте.
Смета в 225 часов. Реальность – почти 1620
Начинается главная часть истории.
Изначальная оценка выглядела скромно: около 70 часов на дизайн, примерно 105 часов на разработку и ещё приблизительно 50 часов на перенос на новую административную панель. Итого 225 часов – то есть около месяца. Но прошёл месяц, а готова была только главная страница.
Финальная цифра – около 1620 часов, при активной фазе разработки протяжённостью примерно восемь месяцев (с ноября 2025 по июнь 2026), от старта работы над концепциями ещё в июне 2025.
Мы не стали перевыставлять клиенту счёт на эту разницу. Причины перерасхода – наши, а не клиента, и вот они, без прикрас.
Дизайнеры предложили решения, которых раньше не делали. Нестандартные вогнутые формы, декоративные маски – элементы, которые нельзя реализовать нативными средствами браузера. Команде пришлось искать способ сделать так, чтобы дизайн можно было редактировать без разработчика: под любую картинку, которую подставит менеджер или клиент, декоративная форма-маска должна была подстраиваться автоматически. На это ушло заметно больше времени, чем закладывалось в смету просто потому что раньше агентство таких элементов не делало.
Перенос базы данных на новое ядро CMS случился впервые. Обычно при обновлении дизайна старая структура сайта переносится частично или адаптируется точечно. Здесь решили мигрировать полностью: вместе с админкой и ядром системы. Опыта такого масштабного переноса в агентстве раньше не было, и заложенные на это 50 часов оказались далеки от реальности.
Фильтр каталога пришлось переписать с нуля. Об этом отдельная история чуть ниже, но само решение переделать фильтр целиком в смету изначально не входило вообще.
И, пожалуй, самое важное признание: команда стремилась сделать качественно, иногда в ущерб скорости. «Слишком я досконально всё пытался проработать», – вспоминает фронтенд-разработчик проекта Darvin Digital Евгений Полубояров о своей части работы. Знакомая ловушка перфекциониста: каждый следующий блок хотелось сделать не «более-менее», а действительно хорошо и это накапливалось.
Но самое неожиданное – то, что редизайн одного клиентского сайта обернулся апгрейдом, которым теперь пользуется всё агентство. Параллельно с работой над dveri-spb.ru команда полностью обновила набор переиспользуемых фронтенд-компонентов, которые используются при разработке любых сайтов агентства: карусели, фотогалереи, модуль подгрузки видео, валидацию форм, маску телефона, компонент спойлеров, счётчик товаров. По сути – масштабное обновление всей технической базы, сделанное «попутно», в рамках одного клиентского проекта.
Перенос данных: как нейросеть за полторы недели сделала то, на что ушёл бы месяц
Перенос содержимого сайта (товаров, каталогов, статей) со старой структуры базы данных на новую был предсказуемо одной из главных забот команды ещё до старта работы. Переносить сотни позиций каталога вручную – работа, за которую агентство, по признанию разработчиков Darvin Digital, вообще могло бы не взяться: слишком долго и слишком дорого для клиента. Как говорит фронтенд-разработчик Darvin Digital Евгений Полубояров, команда попала в момент, когда нейросети резко шагнули вперёд и именно это открыло саму возможность взяться за такой объём переноса.
Решение нашли через связку с нейросетью. Разработчик передал ей структуры старой и новой базы данных, а система предложила логику сопоставления связей между таблицами и написала на Python скрипт для миграции. Дальше – несколько прогонов на локальном окружении и тестовом сервере, ручная правка мест, где нейросеть перенесла данные некорректно.
Именно на миграцию ушло около полутора недель. Без участия ИИ, по оценке команды, перенос занял бы в два-три раза дольше.
Отдельная, не менее трудоёмкая история – переоформление порядка 213 карточек каталога под новый дизайн. Здесь тоже подключили нейросеть: разработчик составил подробный промт с примерами старой и новой вёрстки, и модель по паттерну переносила контент в новый формат. Даже с этой помощью работа осталась рутинной и долгой, но без неё была бы кратно дольше.
Полностью гладко перенос всё равно не прошёл: из-за рассинхрона данных на старом сайте всплывали баги: некоторые свойства товаров при миграции ломались, их приходилось чинить вручную.
Фильтр, который атаковали боты
Одна задача потребовала больше времени и интеллектуальных усилий, чем весь остальной фронтенд вместе взятый, и она не была запланирована изначально.
У сайта фасетный фильтр каталога: пользователь может комбинировать выбор по производителю, цвету, размеру, типу двери и десятку других параметров. Каждая такая комбинация формирует отдельный URL. Количество возможных вариаций страниц практически не ограничено.
Поисковые боты пытаются обойти и проиндексировать все эти страницы подряд, щёлкая по каждой комбинации фильтров, как по отдельной странице сайта. Для сервера это создавало огромную нагрузку, вплоть до критических сбоев.
Проблема обострилась примерно за полгода до запуска нового сайта и не только у dveri-spb.ru, а у многих сайтов в принципе. На старой версии её тогда удалось приглушить через защиту от ботов, подключённую на уровне хостинга. Но у нового сайта каталог и сам фильтр стали значительно масштабнее: параметров больше, вариаций страниц – на порядок выше и прежнее временное решение здесь уже не годилось. Оставлять эту уязвимость в новой версии сайта было нельзя.
Казалось бы, есть простое решение – запретить обход через файл robots.txt или метатеги. Но это работает только с «дисциплинированными» роботами, которые читают правила индексации и следуют им. Часть краулеров эти правила попросту игнорирует. А в последнее время добавились ещё и нейросети, которые тоже сканируют сайты, и они в эту логику правил укладываются далеко не всегда. Так что стандартная блокировка проблему не закрывала.
Решение нашли не быстро. Команда признаётся, что информации по этой конкретной проблеме – «фасетной навигации» в сочетании с индексацией ботами в открытых источниках оказалось критически мало: пара статей на английском, описывающих проблему, но не решение. Итоговое решение: увести отфильтрованные URL-адреса под hash-фрагмент в ссылке. Поисковые боты игнорируют всё, что идёт после такого фрагмента, то есть для пользователя фильтр работает как обычно, а бот эти страницы просто не видит и не пытается их обойти. При этом целевые посадочные страницы под конкретные категории товаров, которые нужны для продвижения и рекламы, остались индексируемыми через обычный путь – эту часть трогать было нельзя.
С момента запуска нового сайта проблем с падениями от ботов не было. Что важно: это решение не осталось разовой доработкой под одного клиента. Оно уже используется как готовый шаблон для других проектов агентства на той же CMS Darvin и по сути, стало частью технологической базы компании.
Что появилось сверх исходного технического задания
По ходу работы список задач расширялся не только по инициативе агентства, но и по запросам клиента, которые команда предлагала реализовывать в новом, более удобном формате:
- Возможность купить в рассрочку отображается прямо в карточке товара. Полноценный автоматизированный функционал сочли слишком дорогим для внедрения, поэтому остановились на компромиссе: наглядная плашка с информацией, а окончательное оформление менеджер согласовывает с покупателем напрямую.
- Новый формат сервисных услуг в карточке товара вынесенных, как упоминали выше, в логику корзины.
Хотите проверить, есть ли всё необходимое на вашем сайте для роста конверсии и среднего чека? Собрали чек-лист по ключевым элементам интернет-магазина. Скачивайте, изучайте и устраняйте слабые места на сайте, что получать больше оплаченных заказов и меньше брошенных корзин.
- Редактирование состава заказа прямо в корзине, если покупатель уже собрал заказ, но передумал по фурнитуре или модели двери. Менять его можно без пересборки с нуля.
- Механизм пересчёта скидки – техническое решение, которое следит, чтобы итоговая скидка на комплект, например, дверь плюс аксессуары сходилась к заявленному проценту, а не считалась «на глаз».
- упрощённая раскладка товара по категориям каталога внутри админ-панели. Раньше добавление одной двери сразу в несколько разделов (по остеклению, типу открывания, назначению) было трудоёмкой ручной работой, важной для SEO-продвижения. Теперь это можно делать быстрее.
- единый шаблон страниц магазинов вместо отдельной вёрстки под каждую точку продаж. Контент каждого магазина подставляется данными, а не копированием разметки.
- кнопка «Купить в один клик» через Yandex Commerce Protocol – второй подобный проект в портфеле агентства.
Информационные страницы: невидимая, но объёмная работа
Помимо основных e-commerce страниц – каталога, карточки товара, оформления заказа – на сайте больше десятка информационных разделов: контакты, услуги, вакансии, «О нас», магазины и часто задаваемые вопросы.
Здесь тоже не обошлось без нетривиальных задач. Один из баннеров нужно было адаптировать сразу под три разные страницы услуг с разным объёмом текста и уникальной картинкой на каждой. И сделать это так, чтобы вёрстка не «съезжала» ни при одном сочетании контента. Декоративные скруглённые формы, которые дизайнеры использовали в разных блоках сайта, пришлось долго переносить в код через маски. А на странице контактов реализовали скрипт, который по кнопке «Построить маршрут» прокладывает путь от геолокации пользователя до выбранного магазина сети.
Подход к вёрстке информационных страниц строился на переиспользуемых компонентах – блоках, которые подключаются сразу на несколько страниц без дублирования кода. Тот же принцип, кстати, лёг и в основу страниц магазинов: вместо отдельной вёрстки под каждую точку использовали один шаблон с разными данными.
Результат
С точки зрения пользовательского опыта обновление визуального стиля, переработка пользовательских сценариев сделали интерфейс более понятным.
«Теперь внимание пользователя сосредоточено на товаре, а путь от знакомства с каталогом до оформления заказа стал последовательнее и комфортнее».Со стороны сервера прирост уже заметен и подтверждён самими разработчиками: страница в среднем формируется за 300 миллисекунд против примерно секунды на старом сайте. Фронтенд пока не оптимизирован полностью: страница остаётся достаточно «тяжёлой» по весу – срочно нужно было открывать новый сайт для покупателей. Когда команда доведёт оптимизацию до конца, сайт станет ещё быстрее.
По словам аккаунт-менеджера проекта Екатерины Кашаевой, она была удивлена скоростью работы сайта после публикации. Учитывая объём каталога и количество характеристик у каждого товара, такая отзывчивость интерфейса нетипична для сайтов подобного масштаба: «Мы все были поражены, когда этот сайт был выложен на живое, с какой скоростью всё открывается. Всё буквально летает».
С момента запуска проблем с падениями от атак ботов на фильтр не зафиксировано.
Единственная болевая точка этого проекта – сроки. Задержка действительно случилась, и команда не делала вид, что так и должно быть. Объяснили клиенту причины, а перерасход по часам – целиком на стороне агентства, и дополнительных счетов за него клиенту не выставили.
«Мы работаем с Darvin Digital уже 11 лет, и, мне кажется, это само по себе главное подтверждение того, насколько мы довольны сотрудничеством. Всё это время сайт точечно обновлялся под наши задачи, но в какой-то момент стало понятно, что локальных правок уже недостаточно и нужен полноценный редизайн и переход на новую платформу. В итоге сайт получился действительно достойный! А то, сколько часов агентство вложило без выставления дополнительных счётов, для меня лучшее доказательство их подхода к работе».Что взять на заметку, если у вас похожая задача
1. Если сайту не первый год, редизайн редко ограничивается одним визуалом. Вместе с ним всплывают старые технические проблемы. Закладывайте это в сроки и бюджет сразу.
2. Смета на нестандартные визуальные решения почти всегда занижена, если команда раньше не делала похожих элементов, спрогнозировать точное время на их реализацию невозможно, можно только заложить разумный запас.
3. Искусственный интеллект хорошо помогает в рутинных задачах: перенос данных, переоформление контента по шаблону, но не подменяет экспертизу. Итоговое решение, проверка качества и ответственность за результат остаются за людьми.
4. И, пожалуй, главное: доверие клиента держится не на идеальном соблюдении изначальных сроков, а на прозрачности, когда что-то идёт не по плану. Мы задержали проект, но оставались в контакте, объясняли, почему и не переложили последствия своего перерасхода на клиента.
Планируете редизайн сайта? Запишитесь на бесплатную консультацию. Разберём вашу ситуацию и подскажем, что можно улучшить уже сейчас.
0 комментариев