Редизайн сайта. Инструкция по применению без побочных эффектов
Подготовили подробный гайд по редизайну сайта с описанием всех этапов: аналитики, подготовки, проектирования, разработки и внедрения новой версии сайта.
Что за редизайн?
Редизайн — это полный перезапуск сайта, который касается дизайна не только как картинки, но и как продукта. В рамках этого процесса мы можем работать над:
- структурой и архитектурой проекта,
- контентом,
- визуальной составляющей сайта,
- функциональными возможностями,
- техническими мощностями.
Результат редизайна — это всегда новая версия продукта или проекта, которая лучше и полезнее, чем предыдущая.
Когда и как часто нужен редизайн?
На первом этапе знакомства у нас с клиентами нередко случается такой диалог:
— Привет! Мы из компании «Пегас и рог». Нам нужен редизайн сайта.
— Отлично! Зачем вам редизайн?
— Ну, вы заходили на наш сайт? Он же морально устарел — нужен новый, современный.
Да, действительно, если ваш сайт участвует в цепочке продажи, а запустили вы его в 2010 году, то скорее всего, вам нужен редизайн. Но не стоит гнаться за постоянно меняющимися трендами дизайна только потому, что сайту нет и двух лет — пользы от этого будет мало, а денег потратите много.
Начинать редизайн нужно не со слова «пора», а с вопроса «зачем?», за которым всегда стоит проблема — говорим мы о сайте, диване или вело-шеринговой программе. По поводу последней, кстати, есть интересный кейс в статье NYT.
Расскажем вкратце. В кейсе речь идет о вело-шеринговой программе Нью-Йорка. Мы с вами знакомы с аналогичной российской системой проката велосипедов: приходишь на станцию, берешь велосипед на час/сутки/неделю. У них произошла такая беда — много активных пользователей годовых абонементов, но совсем мало тех, кто берет велосипед на короткий срок.
Дизайнеры стали разбираться в ситуации: сходили «в поля», поговорили с клиентами, понаблюдали, сами протестировали. Обнаружили, что те, кто покупает годовые абонементы, пользуются специальными ключами и не взаимодействуют с панелями аренды. А вот те, кто берет велосипед ненадолго, имеют дело с интерфейсом. Именно в нем и нашли проблему — много текста, из которого сложно понять, как арендовать велосипед, тем более иностранцам, для которых по большей части и создавалась система. Дизайнеры предложили заменить текст на иконки с короткими подписями. Сказано — сделано, запустили. Прошел месяц, и продажи аренды на короткий срок выросли на 14%.
_________________________________________________________________
Тим Браун, СЕО и президент дизайн-компании IDEO, которая среди прочих крутых вещей сделала компьютерную мышь для Apple, говорит:
_________________________________________________________________
Поэтому редизайн как идеальная конструкция работает так: видим проблему — решаем проблему — профит. Так должно быть и с сайтами. Но, к сожалению, зачастую этап «видим проблему» пропускают, поэтому большинство редизайнов получаются бесполезными, а в некоторых случаях даже вредят бизнесу.
Проблемы сайта могут быть очень точечными. Например, вы запускаете новую услугу или выводите на ваш рынок новый продукт. Вполне вероятно, что в этом случае вам не нужен редизайн — будет достаточно доработки текущего сайта.
Но есть глобальные факторы, которые сигнализируют о необходимости полного редизайна. Мы поделили их на категории:
- Совсем не достигаем показателей бизнеса, при этом с трафиком все в порядке. Пробовали внедрить небольшие изменения, провели AB-тесты — не помогло.
Скорее всего, тут масштабная проблема — с сайтом в целом что-то не так. Может быть, дело в стилистике или в общей навигации. Нужно анализировать, искать затык и проводить редизайн.
- Провели ребрендинг компании, изменились услуги, позиционирование или стиль.
Тут без редизайна никак, потому что нужно заново рассказать, чем вы занимаетесь, что хотите сказать своей аудитории и как выглядите.
- Сайт мешает компании развиваться.
Например, совсем не адаптирован для мобильных или не решает задачи пользователей. Как вариант, есть каталог товаров, но их нельзя купить. В таких случаях доработать бывает сложнее, чем сделать заново.
- Пользователи ничего не понимают на сайте.
Здесь проблема структуры, навигации, архитектуры страниц — то есть в целом UX-части. Точно стоит об этом задуматься, если клиенты звонят вам и задают вопросы, ответы на которые есть на сайте. Обязательно стоит посмотреть на метрики и понять, сколько времени пользователи проводят на сайте, как они перемещаются по нему, сколько страниц за сеанс просматривают и каков показатель отказов.
- SEO-продвижение вообще не работает.
Если вы уверены, что с исполнителями все в порядке — значит, дело в сайте в целом. Обсудите этот вопрос с вашими SEO-специалистами.
- Вы запустили сайт 5–7 лет назад.
Редизайн точно нужен.
Как точно не стоит проводить редизайн?
Все мы помним историю с «Кинопоиском» — так делать не стоит. Редизайн точно принесет больше вреда, чем пользы, если:
- Не думать о пользователях и не проводить аналитику.
Если без подготовки выкатить новый проект, то ожидаемого всплеска продаж, скорее всего, не будет. А еще вероятнее — пользователи взбунтуются. Если вы не провели аналитику, то наверняка не подумали о паттернах поведения, потеряли важные функции на проекте и вообще не знаете, что нужно пользователям. А значит, из-за редизайна потеряете покупателей. - Не провести бета-тестирование до запуска.
Конечно, тестирование на стороне агентства — святое. Но и мы, и клиент к моменту запуска проекта настолько погружены в него, что можем не видеть самых банальных багов или неудобств. Например, мы уже знаем, где какая кнопка и как попасть в корзину. Бета-тест нужно проводить на пользователях, которые являются или могут быть вашей целевой аудиторией, но при этом не имеют никакого отношения к новому сайту. Это поможет избежать огромного количества проблем в момент масштабного перезапуска.
Как провести редизайн без побочных эффектов?
Этапы работы над эффективным редизайном зависят от типа проекта. В продуктовом сервисе внимание нужно уделить имеющимся паттернам поведения, в корпоративном сайте — вовлечению и доступности информации, а в интернет-магазине — показателям конверсии.
Но есть общие этапы редизайна, которые важны и нужны при работе над любым проектом. Мы вывели их из собственных набитых шишек, здравого смысла и опыта зарубежных коллег.
Обычно эти этапы выполняет агентство — мы отметили самые ключевые вещи, которые помогут вам понять, что происходит с проектом и на что следует обратить внимание, ведь в любом случае мы проходим этот путь вместе.
Этап 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 — Самостоятельная жизнь новой версии
Помните: редизайн может не закончиться во время запуска. Скорее всего, вы позже будете вносить изменения на основе отзывов и поведения клиентов.
После редизайна продолжайте регулярно просматривать сайт, чтобы узнать, как он работает и какие улучшения вы можете сделать. Таким образом, ваш редизайн станет маркетинговым активом, который развивается и растет вместе с вашим бизнесом.
Краткий итог в виде чеклиста
- Определите проблему, которую поможет решить редизайн.
- Посмотрите, как редизайн соотносится со стратегией развития бизнеса.
- Проанализируйте поведение аудитории: метрики, фокус-группа, качественные интервью.
- Проведите SEO-аудит.
- Проанализируйте сайты конкурентов.
- Разработайте задание на редизайн.
- Разработайте структуру и архитектуру, проверьте все сценарии пользователей.
- Разработайте прототипы с живым контентом.
- Не забудьте про данные пользователей, которые накопились на старой версии сайта.
- Протестируйте новую версию сами и привлеките лояльных клиентов.
- После релиза новой версии оставьте пользователям возможность вернуться на старую.
- Закрывайте старую версию, когда количество ее пользователей сократится до 30%.
Рекомендуем!
Популярные новости
13 декабря 2024, 16:04
13 декабря 2024, 15:32
13 декабря 2024, 14:35
13 декабря 2024, 13:24
12 декабря 2024, 10:06
