Редизайн сайта без боли для бизнеса

Редизайн это

Редизайн — это полное обновление внешнего и внутреннего функционала текущего сайта. Переделка, реконструкция, модернизация отражают лишь частичное изменение.

От разработки нового сайта отличается тем, что работа проводится на основе текущего сайта и с учетом накопленной аналитики, с сохранением части контента и функционала. Создание нового сайта — запуск с нуля без задачи что-то улучшить на основе текущего опыта или содержания. Редизайн — это перерождение, где берется лучшее из текущего и объединяется с новым.

В этом лонгриде мы собрали 10-летний опыт работы с сайтами (смотрите наши кейсы и услугу разработки сайта). Узнайте все про редизайн в лонгриде. Информация полезна для руководителей, кто выстраивает процесс и думает над сохранением SEO и конверсии. Подчеркнем, что это наш опыт и по такой технологии мы работаем. Смотрите оглавление.

Этапы редизайна: как сохранить SEO, конверсию, любовь пользователей и вписаться в фиксированные сроки и бюджеты

Рассказываем о собственной методологии проведения редизайна. Эта методология учитывает все нюансы проведения редизайна, чтобы в итоге новый сайт выполнял задачи и сохранил лучшее из наследия предыдущего.

1. Обращение клиента

Требуется провести звонок, skype, встречу для знакомства с клиентом. Мы задаем вопросы, направленные на понимание мотивов редизайна. От клиента часто можно услышать.

• Руководство поставило задачу, не знаю причин.
• Просто устарел дизайн.
• Не устраивает CMS.
• Проводим ребрендинг.
• Нам нужно как вот у этих.

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

Мы видим структуру постановки задач в такой иерархии начиная с самого важного:

Продукт.
Продажи.
Маркетинг.
Интернет-маркетинг.
Редизайн сайта.

Маркетологи служат продажам. Им нужен редизайн сайта. Мы расцениваем сайт, как инструмент маркетолога. А какие цели маркетинга бизнеса? Какие цели продаж? У грамотного бизнеса должны быть ответы на эти вопросы. Грамотный редизайн начинается с исследования бизнеса. Если у клиента выстроен маркетинг, продажи, создана стратегия, есть подробное ТЗ, прототипы, то следующий шаг можно пропустить.

2. Исследование текущего сайта

Для составления проектной документации аналитик использует гостевые доступы заказчика по счетчикам Яндекс.Метрика, Google Analytics. Проводит аудит веб-аналитики. Берет задачи, переданные от заказчика и формирует выводы.

Ответы на вопросы, которые дает веб-аналитика:

• Кто аудитория сайта (пол, возраст, география, интересы).
• Что аудитория делает на сайте (наиболее посещаемые страницы, источники трафика, основные сценарии поведения).
• Как эта аудитория ведет себя на сайте (время и периодичность визитов, браузер, устройство, глубина просмотра, время визита).
• Что это дает бизнесу (уровень конверсии, количество достижения целей, стоимость цели).

Помимо исследования веб-аналитики следует обратить внимание на:

• Уровень SEO-оптимизации сайта.
• Сайты конкурентов.
• CMS-клиента.
• Бизнес-процессы клиента (маркетинг, продажи, производство).

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

 

Получать знания быстрее?

Подпишись

ВКонтакте YouTube Telegram

3. Разработка проектной документации

Точная проектная документация — защитник фиксированных сроков, стоимости и ожиданий клиента. Проектная документация при реализации учитывается, но всегда выполняется на 100%. Бывают отклонения. Редизайн сайта — сложный процесс и без проектной документации может свалится в производственный ад. Если заказчик утвердил дизайн, его сверстали, начали натяжку и тестирование, и тут заказчик приходит с идеями нового функционала каталога, то, как говорится, извините, пол покрашен.

В агентстве Evklead мы используем следующий набор документов для создания проекта:

1. Таблица «Анализ спроса»
Исследование позволяет выявить наличие поискового спроса и спроектировать структуру сайта под требования поисковых систем.
Предоставляется в формате Microsoft Excel.

2. Таблица «Структура сайта»
Содержит информацию о количестве типовых страниц на сайте, учитывает иерархию будущего сайта и позволяет сформировать адреса страниц будущего сайта. Если на проекте много SEO трафика, то отдел проектирования старается сохранить адреса страниц сайта и не переделывает с нуля структуру.
Предоставляется в формате Microsoft Excel.

3. «Визуальный проект сайта»
Формирует представление у ЗАКАЗЧИКА о визуальном образе будущего сайта.

Нужен для:

• Построения удобной навигации на сайте
• Расположить смысловые блоки на каждой странице сайта
• Выстроить правильную логику подачи информации и расположении элементов, которые влияют на результат от маркетинга.
• Сбора информации о потребности в разработке контента (фото, видео, текст)

Предоставляется в виде ссылки для просмотра в браузере.
Проект представляет из себя набор типовых страниц в виде черно-белых блоков.

4. Документ «Техническое задание на разработку сайта»
Описывает технические средства для реализации сайта следуя визуальному прототипу.
Позволяет описать логику работы технического функционала сайта. Предоставляется в свободном формате в виде документа формата Microsoft Word или PDF.

5. Документ «Концепция стратегии»
Описывает задачи маркетинга, описывает общие выводы по анализу и выбору технического решения, предлагает каналы привлечения аудитории и средства обхода конкурентов.
Предоставляется в свободном формате в виде документа формата Microsoft Word или PDF.

6. Таблица «График разработки сайта»
Визуально показывает этапы разработки сайта, их последовательность и определяет зоны ответственности ЗАКАЗЧИКА по совместной работе.
Предоставляется в виде диаграммы Ганта в формате Microsoft Excel.

7. Коммерческое предложение Разработка сайта»
Содержит информацию о фиксированных сроках реализации каждого этапа разработки. А также расчет фиксированной стоимости с учетом определенных специалистов, стоимостью их часа и итоговой стоимостью за каждый этап и всю работу.
Предоставляется в свободном формате в виде документа формата Microsoft Word или PDF.

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

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

4. Старт работ

Проектная документация готова, подписан договор, получена предоплата. Вся документация в виде задания утверждена. Проектная команда знакомит менеджера проекта и команду разработки со всеми документами и осуществляет передачу задачи на редизайн.

5. Выполнение

При редизайне используются разные технологии.

Разработка с нуля или готовое решение.

В этой таблице отражены основные процессы редизайна сайта с нуля. Исполнитель по прототипам создает дизайн интерфейса, производит верстку, ведет разработку, тестирует, переносит содержание. Результатом работы является новый сайт на тестовом домене исполнителя.

Нюансы. На рынке существуют решения, которые позволяют ускорить процесс разработки. Сам сайт состоит из двух частей CMS (бэкенд) и его внешний вид для пользователя (фронтенд).

Бэкенд можно написать:

• с нуля,
• использовать гибкие фреймворки,
• готовые CMS,
• конструкторы.

Выбор решения по движку сайта зависит от задач и той гибкости, которая требуется для бизнес-процессов.

Помимо готовых систем управления контентом (CMS) существуют и готовые решения сайты. Примеры можно увидеть в маркетплейсе 1С Битрикс. Это уже не только готовая CMS, но и даже весь внешний функционал. Остается только его адаптировать под себя, заполнить содержанием — готово.

Если решение технически сложное, например, онлайн сервис, то особое внимание следует уделить этапу тестирование.

Также важным пунктом редизайна является перенос контента. Если у вас типовые товары или статьи, то часто программисты смогут выгрузить базу и автоматически залить в новую CMS. Если у вас много разного контента, то потребуется участие контент-менеджера.

6. Запуск проекта

При редизайна сайта запуск проекта имеет важное значение. Когда все работы выполнены и сайт находится на тестовом сервере, его нужно подготовить к запуску. Эти работы крайне важны для сохранения результатов SEO, веб-аналитики и т.д.

На этом этапе выполняются следующие работы:

• Составление таблицы адресов страниц старого и нового сайта для создания редиректов с целью сохранения результатов работы по SEO.
• Перенос метатегов со старого на новый сайт.
• Настройка SEO для запуска (sitemap, robots.txt и т.д.).
• Перенос счетчиков веб-аналитики и пикселей соцсетей.
• По согласованию сторон производится настройка целей аналитики.

Поэтапный запуск проекта. Если делают редизайн сайта с большой посещаемостью, то создают поэтапный, безопасный запуск проекта. Новый сайт выносят на поддомен и закрывают полностью от индексации поисковых систем, но оставляют доступным по ссылке для пользователя. На старом сайте размещают всплывающее окно или где-то в заметном месте сообщают приглашение для тестирования нового сайта. Этот шаг позволяет протестировать новый сайт на реальных пользователях. Тестирование нагрузкой и реальными пользователям позволяет:

• улучшить пользовательский опыт, протестировать уровень конверсии,
• избежать стресса пользователей от нового интерфейса,
• вскрыть новые ошибки,
• собрать аналитику и построить дальнейшую работу на данных.

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

Цена редизайна сайта — из чего складывается?

Ниже пример сметы на редизайн сайта нашего агентства. В смете отражены основные работы из которых формируется стоимость. Смета представлена для редизайна, когда движок 1С Битрикс не меняется, структура сайта не изменяется, изменяется только внешний вид сайта.

Что включает в себя редизайн:

Дизайн концепции на основе главной страницы:

• Кол-во специалистов: 1
• Стоимость часа (руб.): 1 500
• Кол-во часов: 20
• Итого (руб.): 30000

Дизайн всех страниц сайта:

• Кол-во специалистов: 1
• Стоимость часа (руб.): 1 500
• Кол-во часов: 100
• Итого (руб.): 150 000

Дизайн-адаптивов (макеты для смартфонов и планшетов):

• Кол-во специалистов: 1
• Стоимость часа (руб.): 1 000
• Кол-во часов: 50
• Итого (руб.): 50 000

Верстка всех страниц сайта:

• Кол-во специалистов: 1
• Стоимость часа (руб.): 1000
• Кол-во часов: 100
• Итого (руб.): 100 000

Программирование функционала на 1С Битрикс:

• Кол-во специалистов: 2
• Стоимость часа (руб.): 1500
• Кол-во часов: 95
• Итого (руб.): 142 500

Управление проектом на этапе разработки:

• Кол-во специалистов: 2
• Стоимость часа (руб.): 1000
• Кол-во часов: 60
• Итого (руб.): 60 000

SEO настройка для успешного переезда, перенос веб-аналитики:

• Кол-во специалистов: 1
• Стоимость часа (руб.): 1000
• Кол-во часов: 10
• Итого (руб.): 10 000

Копирайтинг

• Кол-во специалистов: 1
• Кол-во часов: 10 000 символов
• Итого (руб.): 10 000

Фотостоки - покупка фото, которые используются для оформления сайта и могут быть использованы в коммерческих целях:

• Стоимость часа (руб.): 5000
• Кол-во часов: 1
• Итого (руб.): 5000

Итог:

• Кол-во специалистов: 9
• Итого (руб.): 557 500

Рассмотрим другие случаи

• Пример. У вас сайт на 1С Битрикс и вам нужно поменять CMS и сделать редизайн. В этом случае к стоимости из таблицы добавляются работы по установке и настройке новой CMS, переносу всего содержания.
• Пример. У вас сайт на 1С Битрикс и вам требуется использовать готовое решение. В этом случае вы сможете сэкономить значительное количество времени и средств на этапах дизайн, верстка и натяжка т.к. этих пунктов не будет. Их заменит пункт доработки готового решения под ваши задачи.

Заказать редизайн сайта, с чего начать и не прогадать. 10 рекомендаций

1. Сформировать цель редизайна. Постарайтесь выяснить, чем именно не устраивает текущий сайт и на основе этого сформулировать цель. Почему нужен редизайн? Что это даст?
2. Опишите детально все требования бизнеса, бизнес-процессы в виде общего ТЗ.
3. Найти средства редизайна. Как сделать редизайн? Это уже задачи. На этом этапе рекомендуем обратиться к специалистам. Покажите им проблемы, цель и текущее положение дел в виде вашего ТЗ. Они порекомендуют подходящее решение под задачу. Обратитесь к нескольким консультантам и компаниям, чтобы сравнивать рекомендации.
4. В итоге у вас получится ТЗ, достаточное для грубой оценки. Обращайтесь в агентства и запрашивайте оценку стоимости и сроков.
5. Также у агентства-исполнителя посмотрите портфолио с дизайном. Из предложенных работ уточните, чтобы было разработано с нуля, а что является редизайном. Узнайте, какие шаги выполняются для сохранения результатов по SEO, конверсии. Также важно знать, используется ли маркетинговая проработка, переносится ли содержание сайта и как это будет реализовано, потребуется ли дополнительная интеграция и т.д.
6. Если у вас есть отдельная команда специалистов по маркетингу, обязательно привлеките их к процессу редизайна.
7. Если вам достаточно грубой оценки, и вы готовы на риски работы в режиме водопада, то можете смело подписывать контракт на почасовую оплату. НО см. пункт 8.
8. Скорее всего вам потребуются фиксированные сроки и суммы.
9. Для этого требуется разработать подробный проект редизайна (смотрите описание этапов в начале статьи) и уже с этими документами отправляться к команде разработки.
10. Если в вашем проекте есть SEO, конверсия, трафик, лиды и другие маркетинговые слова и бизнес зависит от этого, то крайне важно, чтобы интернет-маркетологи принимали участие в разработке проекта и имели там вес. Технически сайт сделать можно сейчас легко, а вот сохранить результаты для бизнеса, усилить их и чтобы сайт продавал лучше — не так просто. Особенно в новом дизайне, с новыми требованиями, где еще не все гипотезы протестированы и есть риски.

Виды редизайна

Предлагаем выделить виды редизайна по степени привнесения нового.

• Только дизайн. Текущая CMS, структура сайта и функционал остаются без изменения, обновляется только дизайн.
• Дизайн и смена CMS. В этом случае по текущей структуре и функционалу создается новый дизайн и все содержание переносим на новую систему управления контентом.
• Дизайн, смена CMS и изменение структуры. Тоже самое что и второе, но меняются адреса страниц, добавляются новые разделы. Старые разделы переезжают, удаляются. Потребуется подготовка дополнительного контента.
• Полный редизайн. Тоже самое, что и третье, но сюда добавляется разработка нового функционала.

Таким образом от вида редизайна зависит степень изменения сайта. В каких-то случаях требуется изменить только в дизайн, а в каких-то разработать новый сайт.

Пример редизайна сайта. Кейс было и стало

Сайт zao-nir.com.
Основная задача: каталог не электронный, а в формате PDF 10 000 позиций. Требуется сделать редизайн сайта с созданием электронного каталога.

Подробнее о кейсе.

Сайт dabsystems.ru.
Основная задача: устаревший дизайн не создает имиджа надежной компании. Требуется сделать редизайн с сохранением трафика и усилить конверсию для B2B.

Подробнее о кейсе.

Сайт pirogovo.ru.
Основная задача: повысить загрузку в сезон, а для этого обновить сайт, разработав календарь событий.

Подробнее о кейсе.

Когда нужен редизайн сайта

1. Устаревший дизайн, который неудобен пользователю или не создает доверия к компании. Для этого потребуется экспертная оценка и сравнение с конкурентами. Также возможно заказать исследование пользователями, для понимания текущего уровня сайта.
2. Отсутствие мобильной версии сайта или неудобная/технически плохо работающая адаптивная верстка.
3. Смена бренда/обновление корпоративного стиля компании.
4. Изменение маркетинговой стратегии компании и постановка задач от маркетинга по изменению рынков, позиционирования, открытию новых направлений, разделению компании на подсайты.
5. Низкая конверсия на сайте или другие проблемы в интернет-маркетинге, например падение трафика из поиска.
6. Задачи SEO-специалистов, которые не могут выполнены на текущей системе управления контентом.
7. Неудобная CMS для контент-менеджеров, а также небезопасная, медленная работа или нет возможности интеграции с нужными системами учета.

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

Какие результаты ждать от редизайна сайта

Если компания, которая выполняет редизайн, взяла на себя роль генерального подрядчика, выполнила маркетинговую проработку и подготовила проектную документацию, то следует ждать следующих результатов:

• Фиксированные сроки и суммы.
• Не более 10% отхождений от ТЗ и проектной документации.
• Обновление интерфейса сайта, который будет еще конкурентен минимум 5 лет.
• Сохранение SEO-трафика без ощутимых падений, в перспективе - увеличение трафика.
• Сохранение, а лучше увеличение конверсии сразу после запуска.
• Сохранение структуры, контента, аналитики - всего лучшего наследия и привнесения нового для выполнения поставленных задач.

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

В заключении

Если вас заинтересовал наш подход при редизайна сайта, то откройте самый первый раздел статьи после оглавления и начинайте двигаться по нему. Мы проводим бесплатные консультации и помогаем менеджерам и основателям компаний найти взвешенные решения по формированию задач. Обращайтесь по контактам.