Что такое редизайн сайта, и как его сделать правильно

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

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

В процессе редизайна дизайнер решает следующие задачи:

● Улучшает визуал — например, заменяет морально устаревшую графику на трендовую.
● Перерабатывает путь пользователя — облегчает достижение цели, убирает барьеры, оптимизирует сценарии или добавляет новые.
● Добавляет новые функции и элементы — от отдельных кнопок и форм до возможности положить товар в «Избранное» и т. д.
● Адаптирует продукт под мобильную версию — например, если в результате исследований выясняется, что большинство пользователей заходят на сайт со смартфонов.

При редизайне платформы изменили шрифт, добавили новые кнопки и изменили стиль разделов: теперь они выделены синим цветом. Источник: store.steampowered

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

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

На назревшую необходимость редизайна указывают следующие признаки:

● Упавшая конверсия — низкие метрики и финансовые потери говорят, что пора обратить внимание на сайт или приложение.
● Множество негативных отзывов — показывают, что пользователям неудобно или сложно пользоваться продуктом. Часто обратная связь от пользователей прямо указывает, что нужно менять.
● Изменения в бизнес-стратегии — например, корректировка или смена задач либо целевой аудитории. Бизнесу нужно показать, что он и его аудитория по-прежнему на одной волне.
● Потребность в новом функционале — когда нужно добавить новые фичи и возможности.
● Обновление фирменного стиля — требуется синхронизация облика продукта с утверждённым брендбуком.

LinkedIn образца 2000 года vs LinkedIn образца 2024 года: изменили стиль иллюстрации и вынесли наверх разделы. Источник: webdesignmuseum

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

Как и в примере с ремонтом квартиры, существуют разные виды редизайна:

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

● Функциональный, или UX-редизайн, — включает либо пересмотр и изменение существующих функций, либо добавление новых. Например, на старом сайте пользователю приходилось самому заполнять все поля в форме заказа, а при функциональном редизайне добавили выпадающий список. Максимальное внимание при таком редизайне уделяется именно проработке пользовательского опыта.

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

● Полный редизайн — включает полную пересборку сайта, то есть фактически это отказ от старого продукта и создание нового с нуля.
Выбор вида редизайна зависит от потребностей бизнеса и целевой аудитории.

Визуальный редизайн сайта спортивного магазина и сообщества позволил акцентировать внимание на их главной теме — горах. Источник: alpindustria

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

Этап 1. Исследования. Сначала нужно понять, что компания хочет поменять, и самое главное — зачем. Важно провести аудит существующего продукта и выяснить, что в текущем моменте мешает пользователям выполнять их задачи. Затем нужно чётко сформулировать цели и задачи редизайна и определиться, какой конкретно вид редизайна нужен. Условно говоря, достаточно ли будет перенести сайт на новый движок и перерисовать пару иллюстраций или нужна более глубокая проработка путей пользователя.

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

Этап 3. Детальная проработка UI. Подробная проработка пользовательского пути, отрисовка макетов, а также работа со шрифтами и цветом.

Этап 4. Вёрстка. Разработка кода и последующий выпуск в продакшн обновлённого продукта.

Этап 5. Заключительный этап исследований. Нужно протестировать, решил ли редизайн поставленную задачу. В основном на этом этапе применяют А/Б-тестирование, сравнивая старую и новую версии. Также можно сравнить основные метрики и проверить обратную связь от пользователей. На основе полученного фидбэка вносятся финальные изменения.

Перечислим самые частые ошибки, которые допускают при редизайне сайта.

1. Редизайн ради редизайна. Случается, когда компания решает сделать редизайн без целей и задач, в отрыве от действительности. Условно эта ситуация обыгрывается в десятках анекдотов, когда заказчик приходит к дизайнеру с просьбой «сделать красиво».

2. Не исследовать свою аудиторию. Редизайн без изучения потребностей и болей целевой аудитории — провальная идея, которая не принесёт бизнесу успеха.

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

4. Слишком резкое обновление продукта. Часто компания не даёт пользователям времени привыкнуть к изменениям, одномоментно отключая старый сайт или лишая клиентов привычного функционала. Например, так на сайте DTF отключили возможность ставить минусы постам, что вызвало возмущение пользователей.

5. Отсутствие тестирования. Суть ошибки — после обновления не замерять метрики, не отслеживать изменения в поведении пользователей, не собирать обратную связь и не сравнивать результаты работы старого продукта с новым.

При редизайне Figma дизайнеры в том числе уменьшили рабочее пространство с каждой стороны на 12 пикселей и спрятали линейку за слои, что неудобно большинству пользователей. Источник: leonardo.osnova

Если добавить в форму регистрации маску, у пользователя не будет таких проблем. Источник: play.google