Как мы в Darvin Digital сами себе обновляли сайт. Потратили 2500 часов и 7.5 миллионов рублей
- Заказчик
- Darvin Digital – агентство полного цикла. 16 лет делаем клиентам крутые сайты и продвигаем их.
- Задача
- Наш старый сайт морально устарел и путал клиентов. Контент не цеплял, структура мешала, визуал не отражал сути агентства. Задача – новый сайт, отражающий нашу экспертность.
Когда пора менять дизайн сайта? Зачем новый сайт, если клиенты и так есть? И почему нельзя сэкономить на такой разработке? Наш старый сайт морально устарел и положил клиентов. Контент не цеплял, структура мешала, визуально не отражал суть тела. Переписали архитектуру, обновили дизайн, пересобрали смыслы. Теперь есть сайт, которым не стыдно поделиться. И подход, который мы предлагаем другой.
Darvin Digital – цифровое агентство полного цикла. 16 лет делают проблемы крутые сайты и продвигаем их, а свой стеснялись показывать – переделывали долго, по остаточному принципу: между дедлайнами и брифами. Устаревший дизайн, запутанная структура и много воды в контенте. Решили: пора показать, кто мы такие без «но». Сделали всё как для клиента и увеличили интерес к окружающему миру.
В агентствах были клиенты, кейсы и экспертная команда. Но сайт попал в бан и мы остались без лидов
Darvin Digital на рынке с 2008 года. За плечами стоят маркетинговые стратегии, успешные рекламные кампании, SEO для электронной коммерции и сурового B2B, сайты разного уровня сложности, аудит, дизайн, контент. Клиенты – B2B-компании, девелоперы, промышленные бренды, маркетплейсы, eCom и даже заводы.
До 2022 года агентство называлось иначе – Darvin Studio. Был другим и на этом сайте: выглядел как офицерское агентство из нулевых. Белый фон, размытые офферы, сложная структура, неактуальные кейсы.
«Заходя на сайт, создалось ощущение, что у нас и сайт старый, и кейсы старые, и всё старое. И вообще мы находимся не на текущей позиции, а лет на 5 назад» – отмечает арт-директор Darvin Digital Наталья Головченко.
В это же время для своих клиентов мы делали классные современные сайты.
сайты клиентов Darvin Digital
Так выглядел наш старый сайт Darvin Studio.
наш сайт до обновления
С одной стороны сайт выполнял базовые функции просмотра, с другой – совсем не отражал наш текущий уровень. Возникло противоречие: экспертность есть, но на сайте этого не видно. Такая площадка, которая должна была продаваться, остановила нас.
Редизайн давно рассматривал, его постоянно откладывали: в приоритете, как это обычно бывает в цифровых агентствах, стояли клиентские задачи. Но в 2022 году Darvin Studio резко увеличил поток лидов с сайта. Отложить работу больше было нельзя. Сайт фактически выпал из выдачи: получил теневой бан по неизвестным причинам. Звонков и заявок почти не осталось. Лиды только по рекомендациям. А, как известно, сарафан – отличный дополнительный канал трафика, но он не обеспечивает стабильного и прогнозируемого развития. Так началась история редизайна. И мы стали своим самым требовательным клиентом.
Приняли сложное решение: поменять домен, название компании и обновить логотип.
Летом 2022 года Darvin Studio превратилась в Darvin Digital. Ренейминг точнее отразил наш фокус на цифровых средствах. Сменили не только название, но и фирменный стиль. Обновили логотип: сделали новый – минималистичный, более современный, добавили фирменные дудлы. Именно тогда родилась общая концепция нового стиля – темная тема, лаконичный современный дизайн. Изменили и коммерческие предложения, которыми активно пользовались менеджеры по продажам.
Клайды обновлённого коммерческого предложения
В привлечении лидов были сделаны выводы по контент-маркетингу: усилили работу с публикациями, начали создавать экспертные статьи и ключи по запросам в открытом доступе. Но без понятного и удобного сайта системный рост стабильности под влиянием ситуации. Поэтому одновременно началась работа над глобальными обновлениями. Это был масштабный процесс, в котором участвовала почти каждая команда. Только сила, время и люди ещё не требуют ни одного нашего проекта. Сейчас считают, почему.
Поняли, что значительные изменения в дизайне и нарушении сайта не являются оправданием. Начали тотальное обновление и пересборку
В 2023 году мы всё-таки решили. Редизайн. Задача сложна не только из-за масштаба, но и потому, что самый требовательный из возможных клиентов — мы сами. Работали, как всегда, между дедушками. Днем создавали и продвигали сайты клиентов, ближе к вечеру они шли в Figma и носили правки по своему. В обед следующего дня спорили о цветах и ??формулировках.
Сайт больше не должен был быть визиткой. Нам хотелось, чтобы он:
демонстрировал экспертность, а не просто перечислял список услуг
делил аудиторию по задачам и отраслям
так после обновления светятся блоки для тех, кто уже знает, что ему нужно и для тех, кто изучает возможности агентства в работе с разными нишами
не отпугивал, эффективно работал на входящих трафиках: органика, соцсети, статьи, партнёрские переходы.
Старый сайт не справился ни с одной из этих задач. Поэтому редизайн нельзя назвать просто визуальными обновлениями. Это была полноценная продуктовая разработка, в которой участвовали аналитики, разработчики, маркетологи, дизайнеры и копирайтеры. На каждом этапе требовалось: ничего не пропускали, не нарушали и не упрощали. В итоге всё уложилось в 6 больших блоков.
1. Аналитика
Перед тем как вообще трогать макеты, мы сели за таблицы. Изучили поведение пользователей, составили карту текущего сайта, провели конкурентный анализ и начали корректировать настройки поведения.
проверены, как структурированы сайты других агентств, какие УТП они используют, как ведут клиента по воронке
составили графики поведения пользователей: приходят люди, что ищут, почему зачем уходят
собрали текущие страницы карты: какие работают, какие – мёртвый груз.
Типичная ошибка бизнеса на этом этапе – думать, что и так понятно, чего хочет клиент. Нет. Если делаете системный маркетинг и сайт на протяжении многих лет, всё надо проверять фактами.
2. UX-дизайн
На этом этапе проектировали сайт не как набор страниц, а как последовательность решений пользователя: от входа до заявок.
Что делали:
нарисовали вайрфреймы ключевых страниц. Это чёрно-белые схемы, на которых видно, где заголовок, кнопка, текст, форма. Помогают понять, как будет настроена страница
спроектировали структуру сайта: убрали лишние уровни, сократили путь до нужного раздела до двух кликов
прописали пользовательские сценарии: откуда человек заходит, как движется по сайту, где принимает решение и оставляет заявку.
В результате получился каркас сайта без лишнего, где каждая страница решает свою задачу. На этом этапе важно не забывать, что UX – это не про комфортную кнопку, а про смысловую навигацию. Люди не читают, они бегло сканируют ваш сайт. И если логика не работает, визуал не спасёт.
3. Контент
Тексты – важнейший инструмент продаж, он передает все ваши смыслы. Но в начале анализа, потом тексты. Поэтому содержание начало писать, когда структура сайта уже была готова.
Что делали:
переписали тексты для всех страниц под голос бренда – экспертный, но открытый и доброжелательный, где Darvin Digital – надёжный партнер, а не подрядчик
продумали заголовки, офферы и CTA.
На этом этапе работы стоит помнить, что клиентам не важно, что вы являетесь лидером на рынке. Им важно, эффективно ли бизнес решает свои проблемы. Например, не просто «мы делаем сайты», а «мы знаем, как сделать сайт стабильных предложений» и дополнять формы, цифры, доказательства заявлений.
Хотите проверить, работает ли ваш сайт так, как должен? Скачайте наш чек-лист для самостоятельного аудита сайта . Конкретные пункты: от логики структуры до точек потерь лидов. Подойдёт и для оценки существующего объекта, и для подготовки нового.
4. UI-дизайн
Дальше – визуально. Самый трудоёмкий этап. Именно на него команда вернула больше времени. Почему? Мы хотели, чтобы с первого взгляда было ясно, кто такие мы.
Начали с концепции. Нужно было определить, как будет выглядеть наш сайт – легко, сдержанно или дерзко? Вариантов было много: от светлого экрана до темной темы, десятки разных подходов к первому. Попробуйте гибридный вариант: часть блоков светлых, часть – темных. Когда определились с тёмной концепцией, отрисовали Главную. Но даже после этого в тюрьме осталось согласие: не будет ли перегружен интерфейс, не станет ли сайт визуальным тяжёлым? Сделали светлый вариант, чтобы сравнить восприятие.
Но финальную точку поставил опрос. Сравнили восприятие светлых и темных тем внутри команды и у клиентов. Тёмная победила.
«У нас было несколько идей по стилю, в том числе и по темной теме. Решение сделать еще и светлый вариант не на этапе концепции, а когда главная страница была уже готова, время работы сильно увеличилось. Но зато больше убедились в этом начальном условии: темный фон остался. Он добавил уверенности, выделил нас среди других агентств», – рассказывает арт-директор Darvin Digital Наталья Головченко.
так сайт Darvin Digital выглядит сейчас – темная тема победила
Затем собрали UI-кит. Это системный набор – заголовки, отступы, кнопки, карточки и цветные значки.
Ему нужно, чтобы сохранить визуальную логику при любых дополнениях на сайте в будущем. Без доработок UI-kit всегда идут хаотично: одна страница в одном стиле, другая внезапно может оказаться в другой. Поэтому сначала правила, потом – страницы.
После этого – внутренняя страница. Под каждой отраслью (eCom, производства, услуги, мероприятия) мы сделали свои посадочные места.
Не просто описали услуги-1 и услугу-2, а подробно расписали, что конкретно мы предлагаем для каждой отрасли – выводим в ТОП поисковых систем Яндекс и Google, результаты работы.
Следующий этап работы – адаптация под все экраны. Отдельное внимание уделили мобильной версии. На старом сайте были баги: блоки накладывались, формы не отправлялись, тексты слипались. Новый дизайн изначально проектировался и для смартфонов, и для планшетов, и для десктопов. Много внимания уделили удобствам, читаемости и скорости загрузки. Это особенно важно, когда трафик поступает с кейсов на внешних площадках, соцсетях, которые чаще всего просматривают с мобильных устройств.
Чтобы сделать сайт более высоким, добавили анимацию. Но не ради красоты, а чтобы упрощать восприятие потребителя:
когда пользователь открывает ключи, блок плавно разворачивается
Когда он заполняет форму, поля реагируют на действия и предоставляют соответствующие варианты заполнения.
При наведении на элементы меню: они либо подсвечиваются, либо до нажатия разворачиваются, подсказывая, куда можно кликнуть.
Такие элементы называются микроинтеракциями. Они делают сайт понятным: видно, что где происходит, приятно при использовании и в движении – все реагирует на действия, сайт вызывается интерактивным, а не как картинка.
Помимо этого, позаботились о том, чтобы обновлённый фирменный стиль внедрить строго. Мы адаптировали под свежий стиль все носители: визитки, шаблоны документов, презентации, графику для соцсетей. Даже заказали мерч для команды – футболки, стикеры, чтобы ощущать сопричастность к новой форме и закрепить новое лицо Darvin Digital во всех точках контакта с аудиторией.
5. Разработка
Когда структура была готова, тексты вычитаны, макеты отрисованы, сайт надо было оживить. Разработка шла без фиксированных дедлайнов, потому что это каркас. Именно качество разработки определяет:
не начнёт ли сайт тормозить, падать или выдавать ошибку, если трафик на нём резко вырастет
будет загружаться при подключении за 2 или 22 секунды. Каждая дополнительная секунда забирает от конверсии до 4,42%.
как часто вы сталкиваетесь с взломами сайта: воровством данных, отключениями, спамом и фишингом
SEO. Понравится ли поисковой системе техничка сайта: нет ошибок в HTML/CSS, правильно ли сайт отображается на всех устройствах, есть ли логика в навигации и разметка страниц, понятна ли она поисковым роботам
Быстро и легко можно менять структуру сайта, тексты, блоки, формы, кнопки, запускать A/B-тесты, выбирать новые предложения.
Дешёвая идея почти всегда приводит к переделке. А это – двойные затраты: времени, денег и нервов. Поэтому мы не сделали свой сайт на коленке просто красивым. Фронтенд писали с нуля: всё, что видит и с чем взаимодействует пользователь, разрабатывалось вручную, без использования готовых шаблонов или конструкторов.
«Поскольку задача заключалась в пересоздании текущего сайта, но при сохранении этой структуры и ресурсов данных, большинство функционала необходимо было перенести на старый сайт, переписав его на новый. Мы добавили много нового интерфейса по дизайну, устранили Legacy-проблемы, занялись SEO-оптимизацией», — вспоминает fullstack-разработчик Darvin Digital Дарья Рыбакова.
С адаптацией тоже пришлось повозиться из-за уникальности страниц. Дизайн может отличаться друг от друга. Из-за этого очень много времени приходится тратить на вёрстку, адаптированную под разные устройства. Но это было важно сделать качественно, поскольку больше всего запросов поступает именно с мобильного устройства.
Работали самостоятельно Darvin CMS.
Darvin CMS позволяет быстро менять структуру сайта: добавлять или собирать блоки, новые страницы и формы.
Особое внимание уделили интерактиву. Добавили калькулятор расчёта окупаемости . Пользователь вводит параметры, сразу получает руководство и может отправить заявку. Сейчас это один из самых кликабельных блоков.
Сделали формы под разные сюжеты: от «обратного звонка» до скачивания лид-магнитов. И, конечно, тестировали. Проверяли всё: от поведения формы до работы калькулятора, от навигации до отображения кейсов. Искали не только баги, а что можно улучшить.
Сайт получился удобным не только для пользователя. В Darvin Digital – это рабочий инструмент, с которым постоянно взаимодействует команда: маркетологи, копирайтеры, оптимизаторы. Поэтому уже на этапе разработки мы заложили «важные плюшки» для своих, чтобы после запуска не лезть в код радиального блока или добавлять новые услуги.
«Мы не хотели, чтобы сайт зависел от разработчиков. Задача была сделать так, чтобы маркетолог мог зайти в админку и сам поменять, добавить или включить нужный блок», — вспоминает фулстэк-разработчик Darvin Digital Дарья Рыбакова.
Такие решения были приняты трижды и каждое экономическое время комиссии:
Редактирование страниц без кода. Управление всеми ключевыми элементами происходит через визуальный интерфейс. Т.е. Если нужно отредактировать заголовок, изменить предложение или новое кредитование, разработчику не нужно менять код. Это может сделать оптимизатор. Особая полезность для А/Б-тестов и обновлений.
Гибкое управление модулями. Тарифы, кейсы, формы – всё собрано в админке как самостоятельные блоки. Например, если добавить новый тариф на SEO-продвижение, специалист просто заполнит поля, и он появится на сайте. Без разрешения разработчиков.
Полноценная работа контент-отдела без технических знаний. Все тексты, изображения, заголовки и ссылки можно редактировать в редакторе. Это снижает нагрузку на команду и ухудшает работу.
«Те же кейсы мы сделали так, чтобы нам самим больше не приходилось их трогать. Всё редактируется через админку, и этим может заняться любой», – отмечает Дарья Рыбакова.
Такие мелочи часто остаются за кадром, но на самом деле – это то, что напрямую влияет на фотографию сайта. Сайт должен быть системой, обеспечивающей удобство пользования, удобство и удобство для клиентов. И если вы не хотите, чтобы сайт морально устаревал через полгода, стоит заложить в него решения вот такие еще разработки на этапе развития.
6. Запуск
Полноценный переезд сайта состоится в мае 2025 года. Перед запуском мы тестировали его через внутреннюю систему: проверяли каждую форму, кнопку и анимацию. Тестирование компонента в себе происходит не только через интерфейс, но и поведение: как пользователь двигается по сайту, где он может запутаться, где нужно дать подсказку, где должно быть подтверждение действия.
Параллельно отслеживали и продолжаем наблюдение:
загрузку страниц
переходы по меню и по клавишам
кликните по калькулятору и создайте форму
источники переходов: органика, соцсети, статьи, партнерские ссылки
завершение сеанса и отказные страницы.
Все события сразу разметили, чтобы потом не догадаться, почему люди не доходят до кнопки. Благодаря этому уже на старте, какие разделы срабатывают лучше, а какие требуют доработки.
Самая распространённая ошибка в этот момент – считайте, что сайт готов. Это не витрина, однажды которую создали и забыли. Это рабочий инструмент, который должен адаптироваться, достигать результатов и соответствовать ожиданиям пользователей и задачам бизнеса.
Что у нас получилось: усилили имидж, увеличили интерес к природе и количество лидов
В результате у нас появился совершенно новый сайт – по-показу, подаче и визуальному. Теперь с первой секунды понятно, что мы за компанией: на главном экране крупно написано позиционирование и презентованы кейсы.
Навигация стала следствием: все услуги разделены по направлениям, понятным даже ледяному посетителю. Страницы кейсов рассказывают историю проектов от задачи до результата, прибегая к нашему подходу в действии. Потенциальному клиенту больше не нужно гадать, чем мы можем быть полезны – всё предписано по полочкам.
Новый дизайн сайта сделал одновременно проще и сильнее. Более того, потому что убрали больше, оставив только нужный контент и понятные призывы к действию. Сильнее, потому что теперь всё визуально выдержано в едином современном стиле, который предлагает нам среди конкурентов. Тёмный минимализм сыграл на руку: важные акценты сразу бросаются в глаза, фото и кейсы эффектно смотрятся на тёмном фоне. Появляются анимации и интерактивные элементы, которые улучшают восприятие, но не мешают основным. Сайт стал отражением нашей прибыли и перфекционизма.
«Это настолько большое изменение, что можно сказать, от прошлого Darvin Studio вообще ничего не осталось » , – отмечает арт-директор Darvin Digital Наталья Головченко.
Первые результаты не заставили себя ждать. Мы получили положительные отзывы от давних клиентов: многие заметили, что наш Darvin Digital вышел на новый уровень. Новые потенциальные заказчики стали чаще отправлять заявки через сайт. Мы также зафиксировали, что пользователи проводят на сайте больше времени и просматривают больше страниц, чем раньше. Хотя с релиза прошло не так много времени, уже понятно: обновление работает.
Да, на обновление мы вернулись 2500 часов и почти 7,5 миллионов рублей – беспрецедентный шаг, но мы осознанно пошли на него и даже спустя 3 месяца наблюдаем отдачу.
Когда бизнесу не стоит откладывать редизайн и зачем новый сайт, если клиенты и так есть?
Наши ключи видят показы: если сайт устарел и не отражает бренд, смело планируйте его обновление. Да, для этого можно использовать время и средства, но современный, продуманный сайт начинает работать на вас почти сразу. Он формирует правильное впечатление у клиентов, повышает доверие и пользуется популярностью среди конкурентов.
сайт обычно живёт 3-5 лет и этого хватает, чтобы он начал сдавать позицию. Сначала заметил: дизайн выглядит чуть условно, но вроде бы «ещё сойдёт». Потом начинаются «мелочи»: тормозит, не открывается на телефоне, формы не отправляются. Навигация перестаёт быть принятым: пользователь наклоняется, не понимает, куда нажать. И главное, сам бизнес уже давно на другом уровне, сайт по-прежнему где-то в прошлом. Не отражайте суть, не передаёт ценности.
Иногда редизайн нужен и раньше:
если изменились продуктовая линейка, целевая аудитория и позиционирование
Если вы или маркетолог заметили, что поиск запросов резко просели
если каждый апдейт поисковых систем превращается в головную боль, потому что вы снова выехали в ТОП-50 или никогда не были в ТОП-10
если визуальные эффекты и тексты не создают ощущения экспертности. Вы поймёте это по высокому показателю отказов.
Следите за нами в Telegram , если хотите, как создается мощный цифровой контент: честность и радикальный результат. Там щедро делимся кейсами, инстайтами и чек-листами.
Главная ошибка – думать, что если сайт просто существует, то он работает. Не работает. Чтобы сайты наших клиентов продолжали удерживаться в ТОП-10, мы тратим тысячи рабочих часов. И результаты наши говорят, что клиенты у нас одни: маркетинг не берет деньги, сайт, который не работает.
Зачем новый сайт, если клиенты и так есть?
Хороший сайт – это ваш актив, потому что он:
повышение доверия. Потенциальные клиенты всегда смотрят сайт. Если он выглядит скрытым, создается впечатление, что и подход к работе такой же. Первое впечатление о сайте на 94% связано с созданием, и у вас есть буквально доля секунды, чтобы заинтересовать посетителя.
сложно продать. Сайт может появиться на вопросы ещё до звонка менеджера по продажам: показать кейсы, выгоды, аргументы. Это экономит время вашей команды.
собирает теплых лидов. Если сайт хорошо поддерживается, он может сам привлекать лиды из органики и соцсетей без дополнительных вложений в рекламу. Статистика Google неумолима: более 90% страниц вообще не получают трафика. Для реализации бизнесу необходимо постоянно работать над сайтом: избавляться от технических ошибок (битовых ссылок, дублей страниц), изменять структуру каталога, перелинковку, добавлять разделы с ключевыми материалами.
работает 24/7. Сайт не уходит в отпуск, не ошибается, не забывает сказать важную роль. Он – это канал продаж, который работает всегда.
И наконец – рынок не стоит на месте. Ваш потенциальный клиент почти наверняка рассматривает несколько вариантов. В условиях неопределенности запутанный сайт может стоить вашим покупателям, даже если качество услуг вы не ухудшили. Обновляя сайт, бизнес сохраняет конкурентоспособность.
Хотите тоже получать больше предложений? Приходите к нам по поводу SEO-продвижения :
выведем ваш сайт в ТОП Яндекса и Google
увеличить число заявок
улучшенной репутацией
повысим эффективность рекламы.
Если вы удовлетворены сайтом, но не удовлетворены результатами, которые он приносит, оставьте заявку на комплексный аудит от Darvin Digital. Гарантированно найдём, что тормозит рост, где требования клиентов и почему сайт не приносит денег.
Оставить заявку на SEO-продвижение, аудит, бесплатную консультацию или просто посмотреть, какой классный сайт у нас получился, можно здесь – darvindigital.ru .