dpktns

“Идеальные пятницы в TimePad” — это раздел, где мы просто и по-дружески рассказываем вам, как работает и развивается сервис.

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

 

Глава 1. Классическая страница события

Screen Shot 2016-05-25 at 18.13.38

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

Требовательный современный мир выявил у классической страницы события ряд серьезных минусов:

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

И тогда мы решили исправлять ситуацию.

 

Глава 2. “Новая” страница события

Screen Shot 2016-05-25 at 18.15.07

Разрабатывая новую страницу, мы придерживались двух главных принципов:

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

Новую страницу события мы сверстали в одну колонку и закрепили кнопку регистрации.

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

screenshot-docs.google.com 2016-05-26 11-14-06

В итоге при тестировании новый дизайн показал 1,4% конверсии вместо 6–7% классической страницы 🙁

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

  1. Контентно-ориентированный подход, на который возлагались наибольшие надежды, не оправдал себя. Этот принцип работает, когда организатор может и хочет создавать качественный контент, но в реальности большинство организаторов не уделяют много внимания оформлению страницы — нет времени, дизайнера, не считают это важным или просто не используют страницу TimePad как основное место регистрации участников.
  2. Закрепленная кнопка регистрации вызывала проблемы на мобильных устройствах.
  3. Подробная информациия о времени и месте события, которая в классической версии размещалась в правой колонке рядом с описанием, в новой распределилась между шапкой и “подвалом” страницы, в результате покупатель стал менее осведомлен о деталях, важных для решения о покупке билета.

 

Глава 3. “Новая новая” страница события

Screen Shot 2016-05-25 at 17.07.31

Решения проблем первой версии, которые мы нашли в финальной:

  1. Мы признаем, что контент в событиях далеко не всегда будет хорошим, и контент-ориентированную стратегию сводим к более широким картинкам и колонке текста. Изображение в шапке приглушаем, чтобы конверсия страницы не страдала, даже если у организатора нет афиши мероприятия в высоком качестве.
  2. Делаем четкий, легко читаемый блок с информацией о событии в верхней части страницы: дата, место, организатор, карта.
     screenshot-docs.google.com 2016-05-26 11-16-13
  3. Концентрируемся на одном сценарии — решаем, что участник потенциальный, и стараемся во что бы то ни стало довести его до регистрации.

Если первая версия дизайна разрабатывалась долго и вдумчиво, то финальная родилась очень быстро: мы взяли готовые решения из прошлой версии, доработали и обкатали на примере одного популярного события “Умной Москвы” и запустили.

Благодаря упрощенному процессу разработки на основе реального кейса, в третьей версии мы успели добавить много дополнительных особенностей, на которые не хватило времени во второй:

  • Разный вид страницы для вебинаров и офлайн-событий.
  • Продуманные кнопки соцсетей.
  • Карта стала лучше.
  • Разный вид для залогиненных и незалогиненных пользователей.
  • Полезные мелочи для организатора: выпадающее меню с шагами редактирования.
  • Кнопка “Зарегистрироваться бесплатно” для бесплатных событий.

Screen Shot 2016-05-25 at 18.24.57

Screen Shot 2016-05-26 at 10.37.07

В результате “новая новая” страница события показывает конверсию 9,6–10%, что на 3–5% больше, чем классическая страница и почти в 5 раз больше, чем “новая”. Успех!

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


 

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

Доработка “новой новой” страницы события и добавление новых полезных функций для нее продолжается!

Если решение с приглушенной картинкой в шапке вам не подходит или вы хотите внести другие изменения в дизайн страницы события — наши технические специалисты всегда готовы вам помочь: напишите нам на support@timepad.ru, и мы оценим сроки и стоимость работ.

 

Подписывайтесь на блог TimePad и оставайтесь в курсе наших новостей.