Как мы меняли дизайн «Ирайд.ру»
Основатель и генеральный директор компании Александр Лебедев поделился опытом разработки сайта для грузоперевозок.
Ранее мы уже делились историей запуска проекта «Ирайд.ру». Тогда мы собрали минимально жизнеспособный продукт (MVP), с помощью которого проанализировали реакцию потенциальных заказчиков. На основе полученной обратной связи мы приняли решение полностью переработать дизайн продукта. В этой статье мы расскажем, что получилось.
Сбор обратной связи
Первый дизайн был создан мною меньше чем за неделю. У нас было очень много ограничений, в том числе финансовых, и надо было запустить проект быстро. Я понимал, что в будущем дизайн проекта поменяется до неузнаваемости. Но не было понимания, что конкретно придется делать: будем ли мы полностью переделывать дизайн или же дорабатывать существующий.
Мы решили не откладывать этот вопрос и начали спрашивать мнение пользователей о проекте. Помимо потенциальных заказчиков, приходивших к нам через контекстную рекламу, мы провели опрос среди аудитории «Спарка». Мы опубликовали на «Спарке» статью, где пообещали 300 рублей на телефон первым 22 пользователям, давших обратную связь по проекту.
На «Спарке» мы получили 11 письменных отзывов такого вида:
Несколько десятков отзывов мы получили, опросив потенциальных клиентов по телефону и почте. Этих данных вкупе с аналитикой оказалось достаточно, чтобы сделать необходимые выводы по поводу дальнейшего развития сайта. Благодаря полученной обратной связи мы поняли, на чем нужно фокусироваться для увеличения конверсии, и подкорректировали самое важное — наше уникальное торговое предложение (УТП).
Собрав все замечания по дизайну и наработки по УТП в единый список, мы отсортировали их по важности. Стало абсолютно ясно, что почти все элементы дизайна требуют переверстки с нуля.
Что изменилось?
УТП
Если раньше мы считали нашим основным преимуществом мгновенный расчет и заказ, вокруг которых строилась дизайн-концепция сайта, то по итогам обратной связи поняли, что наше конкурентное преимущество — это весь комплекс логистических и таможенных услуг для бизнеса в «одном окне». Было удобно прийти в одно место и сразу решить все свои задачи. А быстрый расчет и заказ из основного преимущества превратился в дополнительный бонус.
Раньше УТП выглядело так:
«Ирайд.ру — сервис мгновенного онлайн-расчета и заказа грузоперевозок из Европы».
Теперь УТП выглядит так:
«Ирайд.ру — сервис доставки сборных грузов из Европы в Россию для бизнеса. Моментально рассчитайте и закажите перевозку в «одном окне». Мы бесплатно проконсультируем вас, осуществим таможенное оформление, поможем сертифицировать товары, дополнительно застрахуем груз».
Из-за невнятного УТП в первой версии дизайна на главной странице было много воды. Безусловно, в будущем УТП будет меняться и в будущем будет еще раз скорректировано по итогам аналитики и обратной связи.
Вывод: прежде чем давать задачу дизайнеру — серьезно проработайте УТП, так как от него зависит внешний вид и структура главной страницы.
SEO
После формулировки УТП и до начала проектирования сайта обязательно соберите всю возможную семантику. Проектируя сайт и его структуру, учитывайте это семантическое ядро.
Например, изначально не подумав о будущем SEO-продвижении при проектировании сайта, я создал Wordpress-блог на отдельном домене третьего уровня blog.eride.ru. Блог задумывался как отдельная база знаний для нас и заказчиков, но не как инструмент привлечения трафика. Это оказалось ошибкой. Блог и основной сайт с самого начала должны дополнять друг друга, быть органичными по навигации, дизайну, стилю, наполнению и логике.
Каждая планируемая к продвижению страница сайта (лендинги, информационные страницы) должна четко соответствовать запросу и иметь все необходимые формы захвата пользователя: телефон, формы обратной связи и тому подобное.
И самое важное: попав на любую такую страницу, пользователь должен понимать, где он оказался и что он может купить. Ранее, придя на наш блог, посетитель сайта не сразу понимал, куда он попал — читал статью и уходил покупать на сайте другой компании. Вероятность лидогенерации с просмотра статьи сводилась к нулю.
Мы перенесли блог и слегка переработали дизайн, чтобы он соотносился с основным сервисом.
К сожалению, до проекта я не занимался интернет-маркетингом и не придавал значения базовым принципам SEO при проектировании сайта: структуре страниц по семантическому ядру, времени загрузки страниц и тому подобное. При грамотном подходе изначально заложенные в проект SEO-решения могут значительно ускорить развитие проекта благодаря органическому трафику и лидогенерации. Есть четкое понимание, что в будущем нам предстоит доработать проект с точки зрения SEO и избавиться от многих компромиссных решений.
Улучшения на главной странице
Отличие лендинга от информационных страниц — более высокая конверсия в лид. Лендинг, как и любая продвигаемая страница, должен точно соответствовать запросу, по которому он продвигается. Вся информация должна быть представлена в сжатом виде, просто и ясно. И самое важное: лендинг всегда продвигает один продукт или услугу, либо очень схожие между собой товары.
Со всем этим были большие проблемы в первоначальной версии. Мы сразу начали вносить исправления в старую версию по мере поступления обратной связи, а потом перенесли эти изменения в новый дизайн, что позволило сэкономить время и деньги.
Перед редизайном мы сформулировали основную цель нашей новой главной страницы: продажа комплекса услуг по доставке груза из Европы в Россию.
Потенциальный клиент, зашедший на лендинг, должен:
- понять, где он находится и что ему предлагают купить (УТП);
- понять с помощью нашего калькулятора, сколько это стоит;
- довериться нам: узнать подробнее о том как мы работаем, о нашем продукте, его преимуществах;
- выбрать удобную форму связи: номер телефона, кнопку заказа «обратного звонка», окошко онлайн-чата;
- связаться с нами: позвонить, сделать электронный заказ, написать запрос через форму связи;
Ниже мы описали, какие конкретно изменения были сделаны.
Изменения на первом экране
У вас не будет второго шанса рассказать, чем вы занимаетесь. Множество пользователей могут «отвалиться» при необходимости скролла хотя бы на один экран вниз. В старой версии дизайна 80% посетителей сайта не скроллили дальше третьего экрана, что обескураживало.
Мы сразу разместили на главном экране всю необходимую информацию для совершения заказа, расставив акценты на обновленном УТП.
Контакты
Создавая проект, мы настолько верили в успех электронного заказа, что даже не указали номер телефона для связи и не сделали никаких дополнительных способов захвата лидов (сейчас мы сами удивляемся такому решению). Впрочем, на первой неделе после запуска быстро догадались, что ждать электронного заказа без предварительных консультаций по почте или по телефону нам придется бесконечно долго.
Сразу же указали телефон и установили онлайн-чат. В новой версии номер телефона выделен крупным шрифтом, вдобавок к этому сразу под ним мы разместили форму заказа обратного звонка.
Сбор обратной связи и идея о редизайне
На наш взгляд, у пользователя всегда должна быть возможность связаться с нами любым удобным для него способом.:
- Телефон.
- Обратный звонок. Не всем пользователям удобно сразу связываться по телефону.
- Формы «Нужно в другой город», «Нужно дешевле», «Нужно быстрее». В логистике всегда можно выйти за рамки типовой услуги и найти решение, поэтому мы позволили пользователям предложить устраивающие их сроки и назначить свою цену. Мы также добавили возможность указать свой город, так как пока доступны не все города России. Это позволяет нам повысить качество лидогенерации, «цепляя» пользователя, если он не нашел ответ на свой вопрос в стандартной функциональности (например, не обнаружил свой город или его не устраивают сроки). Также мы сразу получаем небольшой портрет заказчика.
- Онлайн-чат. Мы изначально отклонили идею навязчивых сервисов «перезвона». Встроенные формы изначально задумывалась нами в качестве эксперимента, но в итоге сработали. В новом дизайне нам больше пишут через встроенные формы, чем через онлайн-чат. Любопытно, что некоторые клиенты пользуются онлайн-чатом для быстрой связи с менеджерами, чтобы задавать вопросы по своим заказам.
Калькулятор
Калькулятор с точным алгоритмом расчета ставок из Европы — главная фишка нашего проекта. У всех конкурентов калькуляторы рассчитывают примерные ставки или берут огромные запасы-люфты в силу специфики отрасли.
Нам же удалось сделать очень точный и окончательный расчет стоимости международной перевозки. Более того, наши цены максимально близки к среднерыночным.
Сейчас в нашей калькуляции не учитываются только таможенные пошлины, расчет которых нам пока не удалось автоматизировать, а также нестандартные ситуации, например, наличие сверхтяжелого груза, негабаритов, сертификации и так далее. Мы решаем эту проблему офлайн-консалтингом, поскольку эта часть расчетов требует привлечения экспертов.
Задача дизайнера — максимально упростить и улучшить внешний вид калькулятора.
Также интересная маркетинговая находка — сразу писать минимальную возможную стоимость перевозки. Во-первых, люди видят наши возможности. Во-вторых, по результатам опроса многие пользователи при виде $0 думали, что сервис не работает. Решение с ценой «от» по умолчанию сняло эту проблему.
Уникальный стиль и информационное наполнение
Прошлую версию дизайна путали с сайтами наших конкурентов. Часто нам звонили по «конкурентным запросам» в контексте, будучи в полной уверенности, что мы другая компания. Время посещения на сайте по таким контекстным запросам сократилось на 88,7% после редизайна (1:02 против 0:07 сейчас).
Также по отзывам сайт был не вполне привлекательным, казался мрачным и не вызывал доверия. Например, отсутствовали реквизитов и информация о нас. От пользователей поступали шаблонные вопросы, которые мы не учли в старом дизайне.
Например, как происходит процесс перевозки, где находятся наши консолидационные склады, работаем ли мы с физическими лицами (работаем только с юридическими лицами). Ответы на эти вопросы мы отобразили на странице. Отдельно мы создали раздел часто задаваемых вопросов.
Страница получилась разнообразной и давала ответы на все основные вопросы пользователя.
Единая цена по всем способам заказа
В первой версии мы попробовали предложить на выбор два вида заказа: более дешевый (электронный) и более дорогой (классический, когда перевозка осуществляется по стандартной схеме с заключением стандартного договора). В итоге, все потенциальные клиенты хотели ехать по более дешевой цене электронного заказа, а работать по более понятной для них классической схеме.
Ошибка была в том, что мы переоценили востребованность электронного заказа для нашей ЦА. Мы думали, что людям так будет удобнее, но не учли пользовательский опыт. В логистике люди привыкли звонить и решать проблемы по телефону с менеджером или переписываться по почте. Даже у наших сильнейших конкурентов количество оформленных электронных заказов составляет лишь 10% от общего потока.
И это в сегменте внутрироссийских перевозок, где цены ниже и есть возможность обслуживать физических лиц. В итоге, конкуренты отдельно продвигают электронный заказ среди своих постоянных клиентов. То есть, сначала люди заказывают по классической схеме, а потом компания их убеждает (в том числе, скидками и бонусами), что электронный заказ удобнее.
Вывод: обязательно изучите и учитывайте пользовательский опыт отрасли. Вы не сможете мгновенно отучить аудиторию от старых привычек, необходимо подстраивать ее под ваш уникальный продукт. Сначала надо завладеть вниманием аудитории, а потом переучивать, если это целесообразно.
Улучшение формы заказа и личного кабинета
Если раньше форма заказа представляла огромную анкету, то новую версию мы оформили в виде простого интервью с клиентом.
Упростили сложные фразы и выражения.
Упорядочили поля по родству.
Мы также сделали удобный и простой личный кабинет, которого не было в первой версии (раньше всю информацию пользователь получал в письмах).
Сделали красивую страницу 404.
Результаты изменений в цифрах
Для оценки результатов редизайна мы запустили те же контекстные кампании, что работали до этого, ничего в них не меняя, и просто сравнили статистику.
Уменьшение нецелевого трафика
Изначально 20% звонков было от физических лиц. Чтобы отсеять этот трафик, мы указали в заголовке фразу «для бизнеса», указали цену «от», и количество нецелевых звонков почти сразу снизилось до 5%.
Статистика по контексту
Мы собрали статистику по контекстным кампаниям по основным параметрам (отказам и времени на сайте по версии «Яндекс.Метрики») за период в три недели: две недели до нового дизайна и неделя после.
Показателем отказов по версии «Яндекса» считается визит, для которого одновременно выполнены следующие условия: за время визита зафиксировано не более одного просмотра страницы, продолжительность визита меньше заданного для расчета отказов времени (по умолчанию 15 секунд), не зафиксировано служебное событие «неотказ».
Подробнее можно прочитать в документации «Яндекса».
1. Кампания «перевозки из Европы» для целевой аудитории:
2. Кампания «перевозки из Европы» для околоцелевой аудитории:
3. Кампания для тех, кто ищет доставку из разных стран Европы:
4. Кампания про комплексный сервис, сбор всех необходимых документов:
5. Кампания по подбору кодов ТН ВЭД:
По всем кампаниям очевиден положительный тренд по основным параметрам, и это только начало.
Электронный заказ
Электронным заказом вначале не воспользовался ни один человек. Только после предварительных консультаций по телефону и почте. Как уже упоминалось ранее, таким видом заказа пользуются только уже существующие клиенты. Первое время нас это беспокоило, но изучив статистику конкурентов и пообщавшись с руководителем крупной компании, мы выяснили, что лишь 1 из 10 клиентов пользуется онлайн-заказом (только во внутрироссийских перевозках, где намного проще заполнять анкету). Но мы все же верим, что нам удастся популяризовать электронный заказ в будущем.
Конверсия в лид
Комплексно говорить об эффективности рано, так как цикл продаж в нашей сфере достаточно длинный — около двух-трех месяцев, и это считается нормальным. Конверсия в целевой запрос с контекста при одинаковых настройках увеличилась незначительно: 0,0067% в ноябре против 0,0073% в феврале. Возможно, это связано с сезонностью: ноябрь — высокий сезон в логистике, и конверсия может быть выше. По-настоящему мы увидим конверсию по итогам года. Стоит оговориться, что наш объем трафика пока невелик — 3000–6000 уникальных посетителей в месяц, и показатели по конверсии статистически незначительны, но они могут дать примерное представление о конверсии.
Целевой звонок или заявка в форме. Имеется в виду заявка на реальную перевозку, которая состоится в обозримом будущем. Не учитываются нецелевые звонки.
Сейчас с 1000 уникальных пользователей звонят или пишут около шести-семи. Но интересно то, что срок принятия решения о покупке во многих случаях начал значительно сокращаться (с 2–3 до 0,5–1 мес.) по сравнению с нашими офлайн-конкурентами.
Если у кого-то есть реальный опыт работы с конверсией в b2b-лиды, и вы считаете, что вышеупомянутые показатели можно повысить, напишите мне на почту al@eride.ru.
Конверсия в продажи
Немного о ключевой метрике бизнеса. Лиды однозначно стали качественней и лучше конвертируются в продажи. Видимо, сказывается большая структурированность информации на сайте, а также современный внешний вид и улучшения в блоге. Точно рассчитать изменение конверсии по заключенным договорам (из-за длинного цикла продажи, когда некоторые клиенты обращаются сейчас, а покупают позже) мы сможем только в конце года. На текущий момент мы видим увеличение продаж примерно на 15%.
Выводы
Дизайн — это в первую очередь решение поставленной бизнес-задачи. Первая версия дизайна в целом исполнила свою функцию — задала структуру сайта, помогла протестировать проект и найти первых клиентов. Новый дизайн подчеркнул наши преимущества перед конкурентами, сделал нас более привлекательным, а сайт — информативным. При этом конверсия в лид увеличилась незначительно.
Для профессионалов выводы, возможно, покажутся банальными, но для предпринимателей, особенно начинающих, они будут полезны:
- Невозможно учесть все в первой версии дизайна, и это надо понимать. Первая версия будет обладать множеством недостатков, и ее придется переделывать, возможно, даже полностью. Если денег немного, лучше обойтись минимальными средствами на первую версию дизайна. Главное — вывести продукт на рынок.
- Изначально серьезно подойдите к созданию УТП и его визуализации. Это напрямую повлияет на внешний вид вашего будущего дизайна. Неправильное определение и подача УТП приведет к ошибкам в дизайне, и его придется в срочном порядке переделывать.
- Перед началом проектирования сайта соберите всю семантику по УТП и постройте структуру страниц. Привлеките специалистов. Это поможет проекту расти быстрее.
- Как можно оперативнее после запуска соберите обратную связь от клиентов, следите за аналитикой. Это позволит быстрее внедрить улучшения и получить конверсию.
- Дайте потенциальным клиентам возможность связаться с вами самыми разными способами и постарайтесь придумать новый вид коммуникации, который с пользователя написать вам.
Наши дальнейшие планы:
- С точки зрения внутренней оптимизации, нужно продолжать улучшать сайт, править баги, создавать больше страниц, отвечающих на прямой запрос пользователя. С точки зрения внешней оптимизации — работать с каналами, объявлениями, качественными внешними ссылками с хороших ресурсов.
- Продолжать сбор обратной связь от пользователей, улучшать внутренние процессы и УТП.
© vc.ru
