Как составить стратегию редизайна: семь важных этапов

Семь раз отмерь — один раз отрежь. Нет, Ctrl-Z. Меряй в восьмой. Редизайн — важный этап в жизни сайта, поэтому ему должна предшествовать серьёзная подготовительная работа. Что вы с клиентом надеетесь получить от редизайна? Почему вообще появилась такая задача? Как должен выглядеть результат?

Эксперты портала Design Shack решили свести воедино все важные вопросы, которые следует задать себе перед редизайном. Адаптированный перевод с дополнительными примерами — перед вами.

Исследование сайта

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

Вот несколько вопросов, на которые вы можете ориентироваться при исследовании:

• Сайт большой? Сколько в нём страниц (или постов, если это блог)? 
• Какой контент и какие страницы самые популярные?
• Сколько людей заходят на сайт каждую неделю, месяц, год?
• Стоит ли добавить какой-либо контент или страницы?
• Есть ли новые функции, которые нужно реализовать? Например, добавить форму для оплаты или страницу с новостями.
• Что вам нравится в актуальной версии сайта? 
• Что вас бесит на нём?
• Сайт использует сторонние инструменты вроде системы бронирования или платёжного шлюза?

Официальный сайт ежегодной конференции разработчиков Laracon. Получил одобрение Design Shack за то, что имитирует реальный пейзаж

Что может пригодиться:

• Чек-лист по юзабилити — 200+ пунктов на проверку;
• Audits 2.0 от Chrome DevTools — обзор инструмента для проверки доступности сайта;
• Аудит текстов email-рассылок — кейс маркетингового агентства Email Soldiers.

Определение параметров для измерения успеха

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

Вот какие параметры можно использовать:

• количество и тип посетителей каждый месяц (из какого региона, какой средний возраст, заходят на десктопную или мобильную версию);
• количество звонков и сообщений с сайта, если такая функция есть;
• заказы на сайте, скачивания или продажи;
• конверсии действий: заполнение формы, посещение страниц, завершение опроса;
• генерация лидов;
• когда пользователи проводят больше времени на сайте — чаще заходят вечером или утром? Или посещаемость связана с новостной повесткой, как в этом случае?

Сайт музыкального фестиваля Skull and Roses с расписанием событий. Оценён Design Shack за классные цвета, иллюстрации и UX

Попробуйте потренироваться в определении параметров на этих сайтах, прежде чем перейдёте к своему:

• Mercuryo — сайт криптовалютного кошелька;
• Сторителлинг от лица экспонатов — презентация онлайн-выставки музея космонавтики;
• The Bad Collective — портфолио женской дизайн-студии;
• Lemonade — сайт компании по страхованию жизни и имущества. 

Адаптация контента

Будет ли нынешний контент сайта перенесён в обновлённую версию? Соответствует ли он эстетике и tone of voice нового сайта? Оцените каждую страницу — и отредактируйте или удалите те, что не соответствуют вашему видению редизайна. 

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

Culturally Connected — сайт для повышения культурной грамотности медицинских работников, отмеченный Design Shack за ненавязчивые анимации, которые не утяжеляют страницы и не мешают знакомиться с контентом 

Пример радикального редизайна и старта новой контентной политики — сайт журнала «Искусство кино»:

Старая версия сайта — old.kinoart.ru

Сайт после редизайна — kinoart.ru

Создание нового контента

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

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

Louder than ten — cайт компании-помощника в управлении проектами для диджитал-агентств. Design Shack отметил уникальное ощущение, которое создаётся палитрой, типографикой и контентом

Чтобы не наступить на чужие грабли, посмотрите на Хабре пост «Сделал редизайн — потерял миллиард» с подборкой эпичных провалов.

Оценка новых возможностей

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

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

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

Планирование в пределах бюджета

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

У Design Shack есть руководство по стоимости веб-дизайна (на английском), которое поможет вам разобраться с бюджетом.

Сервис Plink помогает отправлять запросы на оплату и быстро получать деньги. Design Shack отмечает его простоту и изящность 3D-анимаций

Поддержка и продвижение сайта

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

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

Обновлённый сайт творческого пространства BLIIIDA. Design Shack отмечает его за оригинальную типографику и интересную анимацию, привлекающую внимание к конкретным частям сайта

Хотите научиться системному подходу в дизайне и редизайне сайтов? Тогда приглашаем вас на факультет веб-дизайна GeekUniversity!