Сделать редизайн сайта и облажаться: 3 провала и как их можно было избежать08.04.2016 13:08

После того как выкатили новую версию сайта, жалобы посыпались со всех сторон:

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

На сайтах с отзывами начали появляться негативные комментарии о новом дизайне. Люди были в бешенстве. Что пошло не так? Полный редизайн, над которым работали 50 человек, занял слишком много времени. Хотя такие гиганты, как Amazon и Twitter, настаивают на маленьких последовательных изменениях: их нужно внедрять шаг за шагом, чтобы не делать своим пользователям сюрприз в погоне за улучшением конверсии.

Проблемы редизайна

После редизайна всем пользователям пришлось регистрироваться заново: старые аккаунты не работали. У кого-то пропал список вещей, которые они собирались купить, а другим после выбора товара просто лень было регистрироваться заново, и они уходили сайта. 6 миллионов зарегистрированных пользователей остались за бортом.

В новой версии сайта было невероятно много багов, после запуска он даже лёг. Из-за багов некоторые не могли купить товары. Те, кому это всё же удавалось, не получали покупки, так как система обработки заказов работала неправильно: посылки отправлялись не по тем адресам.

Были проблемы с системой учёта: товар отображался со статусом «В наличии», человек оплачивал его и сразу получал сообщение, что его нет. Всё это нужно было исправить ещё до того, как сайт выкатили на всеобщее обозрение.

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

Как можно было избежать этого

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

Компания Amazon справляется с этой проблемой очень просто: она не делает радикальный редизайн. На сайте постоянно меняют отдельные страницы и элементы, но делают это на основе A/B-тестов. Сначала тестируют, как изменения влияют на поведение пользователей и на бизнес-показатели, и только после анализа полученных данных решают, стоит ли внедрять новый дизайн.

Такой подход позволяет видеть, как то или иное изменение влияет на поведение людей. Если же тестировать полный редизайн, то обнаружить влияние конкретных изменений на показатели и поведение людей невозможно.

Digg — падение трафика на 26%

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

В 2010 году, когда Facebook и Twitter были на взлёте, Digg решил сделать упор на социальности. Создатели сайта хотели, чтобы подписываться и делиться контентом с друзьями стало проще.

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

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

Digg ушёл от основной цели, перестал гнуть свою линию и поддался тенденциям. Лояльная аудитория сайта приходила именно за контентом, одобренным другими людьми, —, а за общением, репостами, подписками и другими социальными штуками люди шли на Facebook или в Twitter. После редизайна всё смешалось, и сайт потерял свою особенность.

В 2008 году капитализация компании была около $160 миллионов, а в 2012 году сайт был продан за $500 тысяч. Вполне возможно, что одной из причин провала оказался редизайн. Кстати, после него у конкурентов Digg — Hitwise и Reddit — наметились интересные тенденции. В первые два месяца после редизайна сайта трафик на Reddit увеличился на 24%, причём никаких серьёзных изменений ни с трафиком, ни с сайтом не было. С большой вероятностью можно предположить, что часть пользователей Digg перешла на Reddit.

У Hitwise в первые два месяца после редизайна Digg уникальная аудитория сайта также увеличилась на 15%.

Уроки

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

2. Не делайте масштабный редизайн, который меняет концепцию проекта. Английское слово incremental в переводе означает «постепенный прирост, пошаговый, поэтапный, постепенно возрастающий». В одной из статей Twitter описывал свою работу над улучшениями сайта, и лучше всего их подход определят именно это слово.

Лучше постепенно улучшать сайт, чем в один прекрасный день неожиданно для всех выкатывать новую версию. Если вы считаете такой вариант необходимым и неизбежным, то проведите серьёзный анализ своей целевой аудитории, их потребностей и пожеланий на сайте, чтобы не получилась такая же ситуация как с Marks & Spencer, Digg или «Кинопоиском».

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

Basecamp — потеря прибыли

Компания 37signals всегда серьёзно относилась к процессу улучшения сайта и своих продуктов: прежде чем реализовать что-то новое, каждый раз проводились эксперименты. Но редизайн основного сайта решили делать без A/B-тестирования, о чём впоследствии сильно пожалели.

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

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

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

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

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

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

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

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

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

Только в июле 2015 года они наконец-таки решили провести A/B-тест и в тестовом варианте вернули форму регистрации на главную страницу. Результаты не заставили себя ждать: конверсия увеличилась на 16%.

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

Вот так компания целый год теряла миллионы долларов прибыли, а всё из-за одной глупости — нежелания протестировать несколько изменений, прежде чем реализовать их на сайте. Тем, кто не хочет допускать подобные ошибки, советую прочитать статью «Эти [17 ошибок] похоронят ваш A/B-тест».

Уроки

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

Если бы они провели A/B-тест, то уже через несколько недель заметили бы негативный тренд. Без тестирования сравнивать показатели можно было только за большие периоды: лето 2014 года по сравнению с 2015 годом, лето с зимой, осень 2014 года с осенью 2015 года. Это усложняло и замедляло анализ, поэтому было сложнее увидеть общий негативный тренд.

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

3. Решения нужно принимать быстро. Когда уже было очевидно, что кнопка на главной странице работает менее эффективно, чем форма, очень долго никто не мог принять решение запустить A/B-тестирование. От осознания «Что-то идёт не так» до первого действия прошло более полугода.

4. Фокусируйтесь на чём-то одном. После редизайна сайта вся команда активно работала над другими проектами: они запускали новый сервис The Distance, добавляли новые функции, улучшали сторонние проекты и работали над новой версией сайта. Никто не задумывался о текущем сайте и его эффективности, хотя основной трафик шёл именно на него, а значит, на нём и было больше всего скрытых убытков.

5. Не отказывайтесь от A/B-тестов для проверки своих гипотез. В 2014 году команда Basecamp провела только треть A/B-тестов по сравнению с предыдущим годом. Отказ от тестирования редизайна стоил им нескольких миллионов долларов прибыли.

Выводы из всех кейсов

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

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

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

3. Проводите пользовательские тесты в онлайне или офлайне. Анализируйте, как люди взаимодействуют с сайтом, на что жмут, как передвигаются по нему, где испытывают трудности.

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

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

Ком.