Техническая модернизация сайта

Владельцы существующих сайтов, часто попадают в ловушку, при желании их обновить. Речь идет про успешные сайты со своей историей и аудиторией (сайты компаний, интернет-магазины, порталы). Резкое и необдуманное обновление сайта, может привести к роковой ошибке в судьбе бизнеса.

Молодые и амбициозные веб-программисты видят только верхушку айсберга: дизайн, юзабилити, контент. Но совершенно забывают о привычках пользователей, ассоциаций с брендом, seo показателях, ссылках. Зачастую это происходит так: разработчики и дизайнеры видят, что сайт морально устарел, его дизайн и структура не соответствуют текущим трендам. Разработчики решают сделать сайт полностью с нуля, потому что грамотная переделка намного сложнее. По итогу, лояльный клиент приходит на ваш новый сайт и не может сделать заказ, так как есть сложившиеся привычки у человека. Особенно это часто проявляется у интернет-магазинов.

В этой записи я расскажу вам какие этапы нужны для грамотной реконструкции существующего сайта.
Первый этап — Исследование

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

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

2. Общение с текущими клиентами. Задача выяснить их проблемы с сайтом. Узнать, что нравится на сайте, а какие разделы/страницы нужно переработать или совсем убрать.

С клиентами общаемся аккуратно и выборочно. Важно опросить клиентов которые уже совершили покупку и тех, кто не решается это сделать.

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

Проще и эффективнее всего производить анализ с помощью систем сквозной аналитики. Мы используем Google Data Studio, что позволяет собирать, обрабатывать и визуализировать данные с разных источников.

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

На основе собранных данных из первого этапа мы разрабатываем прототип будущего сайта и структуры. При создании прототипа нужно учитывать поведение пользователей. Иногда перенос кнопок «Корзина» и «Купить» на новые места, губят бизнес.

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

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

Прототип сайта можно разрабатывать в любой программе, важен результат, а не инструмент. Например, Figma или Axure RP отлично подходят для таких задач.
Третий этап — Визуальный дизайн (UI)

После выбора одного из версий прототипа, занимаемся визуальным дизайном. Прототип на данном этапе выступает «скелетом», на который устанавливаются все остальные органы организма.

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

В разработке дизайна мы используем свою «дизайн-систему» и это должны начать делать все разработчики. Дизайн система включает в себя свод правил для: цветов, типографики (стили, шрифты и их применение), иконок, сеток, отступов, анимаций. Это позволяет быстро делать дизайн с использованием всего прошлого опыта веб-студии. Кроме того, благодаря дизайн-системе мы можем без больших затрат поддерживать все клиентские сайты, не нужно искать где находится тот или иной элемент, функционал. Но естественно, использование дизайн-системы не должно сводить все проекты под один стиль. Визуальный дизайн мы всегда делаем уникальных, который соответствует ДНК-компании заказчика. Советую всем начать разрабатывать свою библиотеку элементов.

Дизайнеры должны работать в связке с программистами, продумать и заложить будущий возможный функционал. Новые задачи по проекту, спустя несколько лет, не должны быть ударом по команде разработки. Нужно изначально заложить мощный фундамент и тогда постройка на нем любых новых объектов будет реализуема.
Четвертый этап — разработка

Когда дизайн сделан, работа передается отделу разработки.

Если проект типовой, то лучше всего использовать готовые CMS и CRM системы, которые поддерживаются и обновляются. Не стоит проверять свои амбиции за счет кошелька заказчика, ведь самописные CMS и CRM под каждый отдельный проект, требуют больших ресурсов на поддержание и доработки. Исключение составляют крупные и сложные проекты, где заказчик понимает для чего пишется индивидуальное решение.

Программистам необходимо изучить весь скелет текущего сайта. Сохранить все текущие и хорошо индексируемые ссылки. Удалить или модернизировать лишние. Если сайт успешно работал в течении большого количества времени, значит на нем производились работы и нужно изучить их список. Нельзя сносить все под чистую.

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

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

Протестировать сайт нужно как со стороны управления, так и со стороны пользователя. Нужно воспроизвести все возможные варианты использования сайта и проверить работоспособность. Кроме того, обязательное тестирование на разных устройствах и платформах.
Шестой этап — поддержка

Поддержка сайта является рекомендуемой услугой для всех клиентов. Идеальная поддержка — это ежемесячный «Check-up» сайта, проверяется весь основной функционал, состояние контента, обновление системы и прочее.

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