Редизайн сайта. Инструкция по применению без побочных эффектов

13 августа 2018, 11:00
0

Редизайн сайта. Инструкция по применению без побочных эффектов

Подготовили подробный гайд по редизайну сайта с описанием всех этапов: аналитики, подготовки, проектирования, разработки и внедрения новой версии сайта.
Редизайн сайта. Инструкция по применению без побочных эффектов

 

Что за редизайн?

Редизайн — это полный перезапуск сайта, который касается дизайна не только как картинки, но и как продукта. В рамках этого процесса мы можем работать над:

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

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

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


На первом этапе знакомства у нас с клиентами нередко случается такой диалог:


— Привет! Мы из компании «Пегас и рог». Нам нужен редизайн сайта.
— Отлично! Зачем вам редизайн?
— Ну, вы заходили на наш сайт? Он же морально устарел — нужен новый, современный.

 

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


Начинать редизайн нужно не со слова «пора», а с вопроса «зачем?», за которым всегда стоит проблема — говорим мы о сайте, диване или вело-шеринговой программе. По поводу последней, кстати, есть интересный кейс в статье NYT.


Расскажем вкратце. В кейсе речь идет о вело-шеринговой программе Нью-Йорка. Мы с вами знакомы с аналогичной российской системой проката велосипедов: приходишь на станцию, берешь велосипед на час/сутки/неделю. У них произошла такая беда — много активных пользователей годовых абонементов, но совсем мало тех, кто берет велосипед на короткий срок.


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

_________________________________________________________________

Тим Браун, СЕО и президент дизайн-компании IDEO, которая среди прочих крутых вещей сделала компьютерную мышь для Apple, говорит: 

«Необходимость в редизайне определяется тем, насколько вещь соответствует цели».
_________________________________________________________________

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


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

 

Но есть глобальные факторы, которые сигнализируют о необходимости полного редизайна. Мы поделили их на категории:

  • Совсем не достигаем показателей бизнеса, при этом с трафиком все в порядке. Пробовали внедрить небольшие изменения, провели AB-тесты — не помогло.
    Скорее всего, тут масштабная проблема — с сайтом в целом что-то не так. Может быть, дело в стилистике или в общей навигации. Нужно анализировать, искать затык и проводить редизайн.
  • Провели ребрендинг компании, изменились услуги, позиционирование или стиль.
    Тут без редизайна никак, потому что нужно заново рассказать, чем вы занимаетесь, что хотите сказать своей аудитории и как выглядите.
  • Сайт мешает компании развиваться.
    Например, совсем не адаптирован для мобильных или не решает задачи пользователей. Как вариант, есть каталог товаров, но их нельзя купить. В таких случаях доработать бывает сложнее, чем сделать заново.
  • Пользователи ничего не понимают на сайте.
    Здесь проблема структуры, навигации, архитектуры страниц — то есть в целом UX-части. Точно стоит об этом задуматься, если клиенты звонят вам и задают вопросы, ответы на которые есть на сайте. Обязательно стоит посмотреть на метрики и понять, сколько времени пользователи проводят на сайте, как они перемещаются по нему, сколько страниц за сеанс просматривают и каков показатель отказов.
  • SEO-продвижение вообще не работает.
    Если вы уверены, что с исполнителями все в порядке — значит, дело в сайте в целом. Обсудите этот вопрос с вашими SEO-специалистами.
  • Вы запустили сайт 5–7 лет назад.
    Редизайн точно нужен.
 По сути, определение проблемы — это и есть первый этап редизайна. При четком понимании «зачем» можно выстроить правильную стратегию «как» и провести редизайн с пользой. 

Как точно не стоит проводить редизайн?

Все мы помним историю с «Кинопоиском» — так делать не стоит. Редизайн точно принесет больше вреда, чем пользы, если:


  1. Не думать о пользователях и не проводить аналитику.
    Если без подготовки выкатить новый проект, то ожидаемого всплеска продаж, скорее всего, не будет.  А еще вероятнее — пользователи взбунтуются. Если вы не провели аналитику, то наверняка не подумали о паттернах поведения, потеряли важные функции на проекте и вообще не знаете, что нужно пользователям. А значит, из-за редизайна потеряете покупателей.
  2. Не провести бета-тестирование до запуска.
    Конечно, тестирование на стороне агентства — святое. Но и мы, и клиент к моменту запуска проекта настолько погружены в него, что можем не видеть самых банальных багов или неудобств. Например, мы уже знаем, где какая кнопка и как попасть в корзину. Бета-тест нужно проводить на пользователях, которые являются или могут быть вашей целевой аудиторией, но при этом не имеют никакого отношения к новому сайту. Это поможет избежать огромного количества проблем в момент масштабного перезапуска. 

Как провести редизайн без побочных эффектов?

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


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


Обычно эти этапы выполняет агентство — мы отметили самые ключевые вещи, которые помогут вам понять, что происходит с проектом и на что следует обратить внимание, ведь в любом случае мы проходим этот путь вместе.


Этап 1. Предподготовка

Шаг 1 — Определите проблему

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

 

Шаг 2 — Сопоставьте план работы со стратегией бизнеса на 2–3 года

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


Этап 2. Аналитика

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

Шаг 3 — Метрики и текущее поведение пользователей


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


В итоговом документе 

  • Основные сценарии пользователей
  • Основные паттерны поведения
  • Основные точки максимального вовлечения
  • Основные точки отказов 


Шаг 4 — Фокус-тестирование


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

 

В итоговом документе 

  • Сложности в использовании проекта
  • Преимущества проекта

Шаг 5 — Качественные интервью


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

 

В итоговом документе 

  • Расшифровки интервью
  • Список инсайтов от аудитории
  • Список барьеров при покупке
  • Идеи по новому функционалу и автоматизациям
Бонус. Качественные интервью помогут вам сформировать очень близкие к реальности портреты пользователей — это будет полезно для брендинга и маркетинга.


Шаг 6 — SEO-ситуация


Проведите SEO-аудит текущего проекта. Поймите, важно ли вам, чтобы был органический трафик, и работает ли SEO в вашей отрасли. Проанализируйте ваше текущее положение. Соберите семантическое ядро с нуля или дополните его, если у вас есть активное SEO-продвижение. Зафиксируйте все важные моменты и требования от SEO-специалистов, чтобы не потерять позиции при редизайне.

 

В итоговом документе 

  • Текущие позиции
  • Семантическое ядро
  • Требования к редизайну 


Шаг 7 — Конкуренты


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

 

В итоговом документе 

  • Список дополнительных идей
  • Список плохих решений 

Шаг 8 — Задание на редизайн


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

 

В итоговом документе 

  • Проблема, которую поможет решить редизайн
  • План развития бизнеса и точки, которые в перспективе повлияют на сайт
  • Портреты целевой аудитории
  • Инсайт и барьеры целевой аудитории
  • Сценарии поведения пользователей
  • Паттерны поведения, которые важно сохранить
  • Сложности в использовании и точки отказов, от которых нужно избавиться
  • Список новых решений с приоритетами внедрения
  • Требования к редизайну от SEO-специалистов

Этап 3. Проектирование


Шаг 9 — Структура и архитектура проекта


На основании предыдущего этапа разработайте структуру и архитектуру проекта. Обязательно привлеките SEO-специалистов.


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


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

 


Шаг 10 — Контент

Архитектура поможет понять, какой контент и в каком объеме необходим. На этом этапе появляются задания на тексты от SEO-специалистов, требования к фото- и видеосъемкам.


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

 


Шаг 11 — Прототипы


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


Обязательно отработайте на прототипах все сценарии из задания на редизайн — скорее всего, вы найдете несоответствия или в голову придут новые идеи. Это важная часть, которая повлияет на эффективность редизайна.



Этап 4. Разработка новой версии

Шаг 12 — Дизайн и верстка


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

 


Шаг 13 — Разработка


Мы в OLYMPIA начинаем этот этап с написания технического задания, но тут все зависит от агентства. Важно добавить в ТЗ требования к разработке от SEO-специалистов.


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



Этап 5. Релиз

 

Шаг 14 — Альфа-тестирование


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

 


Шаг 15 — Бета-версия


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

 


Шаг 14 — Масштабный релиз на new.домен


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


Хороший тон — сообщить аудитории про редизайн, подробно рассказав что и почему вы сделали. Это можно сделать прямо на сайте или с помощью специальной рассылки по базе клиентов. Посмотрите, например, как это сделал «Сноб».

На этом этапе внимательно следите за показаниями метрики. Как только около 30% аудитории начнет постоянно пользоваться новой версией, можно переходить к следующему этапу.

 


Шаг 15 — Рокировка версий


Итак, можно переносить новую версию на основной домен и открывать ее для индексации. Старую же — на old.домен и, наоборот, закрывать от индексации. Не забудьте добавить для пользователей возможность вернуться на старую версию сайта.


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


Как только показатели приходят в норму, а количество пользователей старой версии снижается до 30% — можно закрывать старую версию. 



Этап 6. Развитие проекта

 

Шаг 16 — Самостоятельная жизнь новой версии


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


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



Краткий итог в виде чеклиста

  1. Определите проблему, которую поможет решить редизайн.
  2. Посмотрите, как редизайн соотносится со стратегией развития бизнеса.
  3. Проанализируйте поведение аудитории: метрики, фокус-группа, качественные интервью.
  4. Проведите SEO-аудит.
  5. Проанализируйте сайты конкурентов.
  6. Разработайте задание на редизайн.
  7. Разработайте структуру и архитектуру, проверьте все сценарии пользователей.
  8. Разработайте прототипы с живым контентом.
  9. Не забудьте про данные пользователей, которые накопились на старой версии сайта.
  10. Протестируйте новую версию сами и привлеките лояльных клиентов.
  11. После релиза новой версии оставьте пользователям возможность вернуться на старую.
  12. Закрывайте старую версию, когда количество ее пользователей сократится до 30%.



Ответить?
Введите капчу