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

Материал подготовлен специально для блога SPECIA командой агентства OLYMPIA.

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

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

 

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

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

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

 

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

 

 

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

 

Artboard Copy 2

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

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

 

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

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

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

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

___________________________________________________________________________________

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

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

___________________________________________________________________________________

 

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

Artboard Copy 3

 

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

 

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

 

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

 

 

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

 

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

 

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

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

 

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

 

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

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

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

 

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

 

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

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

 

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

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

 

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

 

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

Artboard Copy 5

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

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

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

 

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

 

 

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

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

 

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

 

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

 

 

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

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

 

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

 

  • Расшифровки интервью
  • Список инсайтов от аудитории
  • Список барьеров при покупке
  • Идеи по новому функционалу и автоматизациям

 

 

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

 

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

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

 

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

 

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

 

 

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

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

 

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

 

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

 

 

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

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

 

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

 

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

 

 

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

 

Artboard Copy 6

 

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

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

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

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

 

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

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

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

 

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

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

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

 

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

 

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

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

 

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

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

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

 

Artboard Copy 4

 

Этап 5. Релиз

 

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

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

 

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

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

 

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

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

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

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

 

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

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

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

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

 

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

 

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

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

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

Artboard Copy 7

 

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

 

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

Скачать чек-лист по редизайну сайта в формате PDF.

Материал подготовлен специально для блога SPECIA командой агентства OLYMPIA.

Связанные посты

  • 1500628022_featured.jpeg

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

      Тендер — не самый лучший способ найти исполнителя. Некоторые компании принципиально не участвуют в тендерах, а если и участвуют, то не выкладываются на полную. Достоверно оценить потенциал компании...
  • crazy-ru-800

    Как вести проекты так, чтобы никто не сошел с ума

    Управлять проектом не так просто, как кажется на первый взгляд. Разбираемся, как стать настоящим гуру менеджмента и грамотно координировать работу с клиентом, подрядчиком и своей командой. Предыстория Многие пользовались...
  • photo_2017-05-24_17-14-21

    Регистрация на AngelHack в Санкт-Петербурге открыта!

    Хотите за 24 часа вырваться на международный уровень? Тогда срочно регистрируйтесь на AngelHack 2017 в Санкт-Петербурге. Хакатон пройдет 03-04 июня. AngelHack — это самый диверсифицированный из глобальных хакатонов. В...
  • 1-_NnXPnzz0B4aZXKKm5JNhA (1)

    Тендер мечты: как выбрать правильного подрядчика

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