Как мы меняли дизайн «Ирайд.ру»

Основатель и генеральный директор компании Александр Лебедев поделился опытом разработки сайта для грузоперевозок.

​Ранее мы уже делились историей запуска проекта «Ирайд.ру». Тогда мы собрали минимально жизнеспособный продукт (MVP), с помощью которого проанализировали реакцию потенциальных заказчиков. На основе полученной обратной связи мы приняли решение полностью переработать дизайн продукта. В этой статье мы расскажем, что получилось.

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

Мы решили не откладывать этот вопрос и начали спрашивать мнение пользователей о проекте. Помимо потенциальных заказчиков, приходивших к нам через контекстную рекламу, мы провели опрос среди аудитории «Спарка». Мы опубликовали на «Спарке» статью, где пообещали 300 рублей на телефон первым 22 пользователям, давших обратную связь по проекту.

На «Спарке» мы получили 11 письменных отзывов такого вида:

Несколько десятков отзывов мы получили, опросив потенциальных клиентов по телефону и почте. Этих данных вкупе с аналитикой оказалось достаточно, чтобы сделать необходимые выводы по поводу дальнейшего развития сайта. Благодаря полученной обратной связи мы поняли, на чем нужно фокусироваться для увеличения конверсии, и подкорректировали самое важное — наше уникальное торговое предложение (УТП).

Собрав все замечания по дизайну и наработки по УТП в единый список, мы отсортировали их по важности. Стало абсолютно ясно, что почти все элементы дизайна требуют переверстки с нуля.

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

Раньше УТП выглядело так:

«Ирайд.ру — сервис мгновенного онлайн-расчета и заказа грузоперевозок из Европы».

Теперь УТП выглядит так:

«Ирайд.ру — сервис доставки сборных грузов из Европы в Россию для бизнеса. Моментально рассчитайте и закажите перевозку в «одном окне». Мы бесплатно проконсультируем вас, осуществим таможенное оформление, поможем сертифицировать товары, дополнительно застрахуем груз».

Из-за невнятного УТП в первой версии дизайна на главной странице было много воды. Безусловно, в будущем УТП будет меняться и в будущем будет еще раз скорректировано по итогам аналитики и обратной связи.

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

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

Например, изначально не подумав о будущем SEO-продвижении при проектировании сайта, я создал Wordpress-блог на отдельном домене третьего уровня blog.eride.ru. Блог задумывался как отдельная база знаний для нас и заказчиков, но не как инструмент привлечения трафика. Это оказалось ошибкой. Блог и основной сайт с самого начала должны дополнять друг друга, быть органичными по навигации, дизайну, стилю, наполнению и логике.

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

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

Мы перенесли блог и слегка переработали дизайн, чтобы он соотносился с основным сервисом.

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

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

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

Перед редизайном мы сформулировали основную цель нашей новой главной страницы: продажа комплекса услуг по доставке груза из Европы в Россию.

Потенциальный клиент, зашедший на лендинг, должен:

Ниже мы описали, какие конкретно изменения были сделаны.

У вас не будет второго шанса рассказать, чем вы занимаетесь. Множество пользователей могут «отвалиться» при необходимости скролла хотя бы на один экран вниз. В старой версии дизайна 80% посетителей сайта не скроллили дальше третьего экрана, что обескураживало.

Мы сразу разместили на главном экране всю необходимую информацию для совершения заказа, расставив акценты на обновленном УТП.

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

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

Сбор обратной связи и идея о редизайне

На наш взгляд, у пользователя всегда должна быть возможность связаться с нами любым удобным для него способом.:

Калькулятор с точным алгоритмом расчета ставок из Европы — главная фишка нашего проекта. У всех конкурентов калькуляторы рассчитывают примерные ставки или берут огромные запасы-люфты в силу специфики отрасли.

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

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

Задача дизайнера — максимально упростить и улучшить внешний вид калькулятора.

Также интересная маркетинговая находка — сразу писать минимальную возможную стоимость перевозки. Во-первых, люди видят наши возможности. Во-вторых, по результатам опроса многие пользователи при виде $0 думали, что сервис не работает. Решение с ценой «от» по умолчанию сняло эту проблему.

Прошлую версию дизайна путали с сайтами наших конкурентов. Часто нам звонили по «конкурентным запросам» в контексте, будучи в полной уверенности, что мы другая компания. Время посещения на сайте по таким контекстным запросам сократилось на 88,7% после редизайна (1:02 против 0:07 сейчас).

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

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

Страница получилась разнообразной и давала ответы на все основные вопросы пользователя.

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

Ошибка была в том, что мы переоценили востребованность электронного заказа для нашей ЦА. Мы думали, что людям так будет удобнее, но не учли пользовательский опыт. В логистике люди привыкли звонить и решать проблемы по телефону с менеджером или переписываться по почте. Даже у наших сильнейших конкурентов количество оформленных электронных заказов составляет лишь 10% от общего потока.

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

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

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

Упростили сложные фразы и выражения.

Упорядочили поля по родству.

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

Сделали красивую страницу 404.

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

Изначально 20% звонков было от физических лиц. Чтобы отсеять этот трафик, мы указали в заголовке фразу «для бизнеса», указали цену «от», и количество нецелевых звонков почти сразу снизилось до 5%.

Мы собрали статистику по контекстным кампаниям по основным параметрам (отказам и времени на сайте по версии «Яндекс.Метрики») за период в три недели: две недели до нового дизайна и неделя после.

Подробнее можно прочитать в документации «Яндекса».

1. Кампания «перевозки из Европы» для целевой аудитории:

2. Кампания «перевозки из Европы» для околоцелевой аудитории:

3. Кампания для тех, кто ищет доставку из разных стран Европы:

4. Кампания про комплексный сервис, сбор всех необходимых документов:

5. Кампания по подбору кодов ТН ВЭД:

По всем кампаниям очевиден положительный тренд по основным параметрам, и это только начало.

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

Комплексно говорить об эффективности рано, так как цикл продаж в нашей сфере достаточно длинный — около двух-трех месяцев, и это считается нормальным. Конверсия в целевой запрос с контекста при одинаковых настройках увеличилась незначительно: 0,0067% в ноябре против 0,0073% в феврале. Возможно, это связано с сезонностью: ноябрь — высокий сезон в логистике, и конверсия может быть выше. По-настоящему мы увидим конверсию по итогам года. Стоит оговориться, что наш объем трафика пока невелик — 3000-6000 уникальных посетителей в месяц, и показатели по конверсии статистически незначительны, но они могут дать примерное представление о конверсии.

Целевой звонок или заявка в форме. Имеется в виду заявка на реальную перевозку, которая состоится в обозримом будущем. Не учитываются нецелевые звонки.

Сейчас с 1000 уникальных пользователей звонят или пишут около шести-семи. Но интересно то, что срок принятия решения о покупке во многих случаях начал значительно сокращаться (с 2-3 до 0,5-1 мес.) по сравнению с нашими офлайн-конкурентами.

Если у кого-то есть реальный опыт работы с конверсией в b2b-лиды, и вы считаете, что вышеупомянутые показатели можно повысить, напишите мне на почту al@eride.ru.

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

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

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

Наши дальнейшие планы:

#Интерфейсы