Главная/Блог/UFS.Travel: увеличение количества продаж за счёт редизайна

Блог

UFS.Travel: увеличение количества продаж за счёт редизайна

Команда UFS.Travel и digital-агентство «Далее» о том, какие обновления на сайте поспособствовали повышению конверсии на 16%.

Тенденции в области дизайна и интерфейсов меняются быстрее, чем тренды в модной индустрии. Отвлекся на минуту — и безнадежно отстал. Пользователь тоже становится всё более избирательным. И если пять лет назад это было: «Ух ты, смотри, я могу купить билет в онлайне», — то сейчас: «Представляешь, я целых полторы минуты копался, ужасно неудобный сайт».

По статистике искушенному клиенту хватает 30 секунд, чтобы проникнуться доверием к ресурсу. Своеобразный speed dating с сайтом, на котором пользователь уже в первую минуту решает, вернётся он сюда или нет.

Первый блин комом

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

Но конверсия клиентов при новом сайте, к сожалению, так и не порадовала — вместо ожидаемых 6–7% прирост составил всего 4%, а количество покупок и вовсе снизилось. Пользователь не хотел к нам возвращаться, и эта ситуация нас совсем не устраивала. Решили подойти к переменам более основательно.

Шаг первый: обновление начинки

Роман Шугалей, директор онлайн-сервиса для путешествий UFS.Travel

В качестве подготовки почвы для нового дизайна мы повысили скорость работы сайта и перевели его на самые последние технологии. Раньше сервис работал на .NET, C#, JavaScript и MVC, но скорость загрузки страницы составляла 11 секунд, что отталкивало путешественников. Поэтому в части продаж ж/д-билетов мы перешли на технологию SPA — Single Page Application («приложение одной страницы»), созданной на базе React.js.

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

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

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

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

Шаг второй: юзабилити-исследования

Андрей Шевченко, креативный директор digital-агентства «Далее»

Взявшись за проект UFS.Travel на самом старте планирования оптимальной структуры нового сайта, мы решили вернуться к истокам и копнуть глубже в смысл вопроса: «Что такое путешествия?». Разобраться помогло юзабилити-исследование.

К участию привлеки целевую аудиторию сайта. Респондентам было предложено потестировать функциональность и оценить дизайн ресурса. Ассоциативный ряд участников выстроился в цепочку из связанных с путешествием деталей: радостное ожидание, стук колес, встреча со старыми друзьями. Именно этих простых эмоций не хватало клиентам UFS.Travel и, как следствие, сайту.

Например, MailChimp делает ставку на юмор, «Сбербанк» переводит всё в инфографику, а интернет-магазин Photojojo практически на каждой странице размещает «пасхалки». Методы у всех разные, но все они направлены на достижение одной цели — сделать так, чтобы сайт запомнился. По такому принципу и работает эмоциональный веб-дизайн, который особенно важен в travel-индустрии.

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

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

Также многие посетители жаловались на неудобство заполнения данных пассажира — некоторые поля были настолько незаметны, что их постоянно пропускали. Также практически все обращали внимание на «серость» сайта — по мнению пользователей, он не запоминался, в то время как travel-ресурс должен быть ярким.

Выбор продающей основы

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

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

Фотографии на сайте UFS.Travel имеют не только декоративную, но и информативную функцию. На многих изображениях мы рассказываем про уникальные и необычные места, которые можно посетить в России. В результате пользователь узнаёт что-то новое, все блоки смотрятся органично, а интерфейс не страдает. При этом купить билет в нужном направлении можно просто кликнув на картинку.

Шаг третий: оптимизация поиска

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

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

После долгих проб и споров в качестве основного семейства шрифтов мы выбрали Museo Sans. Он лучше всего лёг в новый дизайн: выглядит современно и лаконично, одинаково хорошо читается как с десктопа, так и с мобильных устройств.

Шаг четвёртый: расстановка акцентов

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

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

Добавив кнопку целевого действия в разделе «Советы путешественникам», мы увеличили конверсию на 3–5%. В этом разделе мы размещаем тематические материалы с идеями о том, куда можно отправиться. Тщательно проработав уникальные туристические маршруты, мы запустили на своем сайте серию публикаций о необычных местах.

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

Заинтересовав потенциального клиента описанием локации и красивыми фото, мы предлагаем купить туда билет с помощью активных кнопок «Поехали», «Полетели». При разработке CTA-кнопок (call to action) мы пользовались несколькими важными принципами. Текст в кнопке должен:

  • Конкретизировать действие. В этом смысле слова «Купить», «Приобрести» ни о чём не говорят.
  • Содержать призыв к действию (лучше с восклицательным знаком): «Поехали!», «Полетели!».
  • Вызывать эмпатию. Так пользователи «примерят» кнопку на себя и будут больше расположены к совершению действия.
  • Контрастировать с общим фоном. Мы использовали белый цвет текста на красном фоне кнопки. Получилось ярко и аккуратно, поскольку CTA интегрированы в текст.

Результат

К новому сайту пользователи привыкали в течение трех месяцев. За это время сократилось количество отказов и увеличилось количество просмотренных страниц. Обновлённый яркий дизайн и интересная подача информации в контентных разделах также не остались незамеченными: посетители стали задерживаться на информационных страницах и статьях на 56% дольше.

Была решена и главная проблема — пользователи стали охотнее возвращаться на сайт:

  • Конверсия в продажу из вернувшихся выросла на 10%.
  • Общий коэффициент конверсии увеличился на 16%.
  • Количество «брошенных корзин» сократилось на 14%.

Адаптивный дизайн также положительно сказался на покупках с планшетных устройств — они выросли на 5%. Пользователи высоко оценили удобство новой функциональности: теперь в 20% случаев билеты туда и обратно покупаются сразу в одном заказе, что значительно экономит время клиентов.

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

Первоисточник материала здесь

Другие посты

 

Как нанять робота вместо менеджера проекта

Мы в Далее ищем новые способы оптимизировать распределение ресурсов и тестируем для этого разные технологии. Недавно наша команда разработала...

13 декабря 2018#Business
 

Микромультик для Микролакса

Для продвижения средства Детский Микролакс наш клиент Johnson & Johnson предложил конкурс, который порадовал мам и детей, а также помог в...

6 декабря 2018#кейсы
 

Время экспериментов. 10 карточек по A/B...

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

27 ноября 2018#web
 

Не заставляйте меня думать: как снизить уровень...

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

19 ноября 2018#UX И дизайн#web
 

В поисках Dream Team для разработки сайта

Найти классную команду для разработки проекта – это челлендж для менеджера. Построить работу можно по-разному: собрать команду у себя в штате,...

6 ноября 2018
 

Релиз или жизнь? Хеллоуин в digital

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

30 октября 2018#creative
 

Как данные и эмоции меняют дизайн

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

23 октября 2018
 

Темная сторона дизайна

Apple сделал темную тему основной по умолчанию для новой Mac iOS, а Youtube начал тестировать темный фон еще год назад. Темные темы в интерфейсах...

17 октября 2018#digital #UX И дизайн
 

Зачем нужно тестирование сайта

До тестирования сайт ведет себя как кот Шредингера. Вы не знаете, работает ли все так, как задумано. Тесты перед запуском или обновлением сайта...

10 октября 2018#web
 

Большой брат: как и зачем использовать...

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

3 октября 2018#digital #UX И дизайн#кейсы
 

Дизайн B2B-портала: найдите отличия

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

27 сентября 2018#UX И дизайн#web
 

Еще раз об эффективности: чек-лист перед...

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

20 сентября 2018#web
 

Типографика в веб-дизайне

Типографика на сайте – это не просто выбор шрифта, а набор правил оформления текста. Они основаны на том, как пользователь воспринимает текст на...

13 сентября 2018#UX И дизайн
 

Как бренду рассказать свою историю

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

16 августа 2018#marketing#UX И дизайн
 

Финансовые сервисы в digital: будущее уже...

Удобство нашей жизни во многом зависит от скорости развития финансового сектора в digital. Многие уже привыкли к оплате коммунальных услуг на сайте...

9 августа 2018#digital #UX И дизайн#web
 

UX-аналитик и другие профессии с приставкой UX

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

27 июля 2018#UX И дизайн
 

Как отличить атомарный дизайн от UI-kit

Невозможно перестараться, оптимизируя работу над дизайном. Можно подойти к вопросу глобально и воспользоваться методологией атомарного дизайна, а...

23 июля 2018#UX И дизайн
 

Преимущество использования отзывчивого веб-дизайна

Как адаптировать дизайн под разные устройства, чтобы он оставался удобным для пользователя? Вместе с контент-продюссером компании InVision Уиллом...

19 июля 2018#UX И дизайн
 

Лучшие диджитал-кампании к Чемпионату Мира 2018

Чемпионат стартовал 14 июня, и острая борьба среди брендов началась задолго до этого. На самом главном спортивном мероприятии в мире мы увидим не...

25 июня 2018#кейсы
 

Как составить контент-план, который работает

От контента зависит максимум эффективности кампании. Что лучше, традиционный подход с подготовкой всего контента на месяц вперед или эксперименты в...

1 июня 2018#smm
 

Правило Хемингуэя: как агентству и заказчику...

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

29 мая 2018#marketing#digital #creative
 

Обзор самых популярных систем для управления...

Система для управления проектами может сильно повлияет на продуктивность компании. Сложно определиться с системой для работы с клиентами, и еще...

15 мая 2018#Business#web
 

Сам себе Youtube: 5 шагов к вирусному контенту

Над видео для компании лучше работать вместе с продакшн-агентством. Вы смотрите портфолио агентств и выбираете подходящее по стилю и по цене. Что...

4 мая 2018#marketing#digital
 

Как агентства представляют свои кейсы

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

24 апреля 2018#кейсы
 

Просто о сложном: agile-разработка

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

17 апреля 2018#web
 

Что такое нативная реклама и как она работает

Несколько лет подряд все говорят о нативной рекламе. Недавно Business Insider заявили, что к 2021 году выручка от нее вырастет до 74% от общих...

12 апреля 2018#marketing#digital #creative
 

Разработка единой дизайн-системы для группы ВТБ

Собственные дизайн-системы – что это? Модный тренд или рабочий инструмент для качественного продвижения бренда? Рассказываем про наш опыт.

10 апреля 2018#UX И дизайн#кейсы
 

Чем дизайнер продукта отличается от просто...

Мы собрали пять отличительных признаков дизайнера продукта от дизайнера, занятого на «потоке» — чтобы окончательно разобраться в вопросе и...

5 апреля 2018
 

Быстрее, выше, сильнее: как использовать видео...

Почему видеоконтента становится всё больше, где стоит размещать ваши видеоролики, и как сделать их ещё лучше.

3 апреля 2018#marketing#digital
 

Микроинфлюенсеры – будущее маркетинга влияния

Одним из трендов инфлюенс-маркетинга стал «подъем микроинфлюенсеров» — блогеров с небольшой, но активной аудиторией. Бренды обращают меньше...

27 марта 2018#marketing
 

Мессенджер-маркетинг как современный способ...

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

23 марта 2018#marketing#digital
 

Формы оплаты работ за разработку сайта

Мы разберем детально какие бывают формы ценообразования на создание интернет-проекта.

31 января 2018#Business#web
 

Как убрать непонимания при общении с исполнителями

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

24 января 2018#Business#web
 

В каких конкурсах участвовать, если вы...

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

17 января 2018#digital #Business
 

Ищем подрядчика по разработке сайта (2 часть)

Как начать искать подрядчиков? Чем руководствоваться при выборе таких специалистов? Читайте продолжение статьи про особенности подбора...

10 января 2018#Business
 

Как искать подрядчика по разработке сайта (1...

Самый надежный путь — сформулировать свои задачи, критерии поиска и отбора подрядчика и заняться поиском самостоятельно.

27 декабря 2017#Business
 

Поддержка и развитие сайта

Работа над сайтом не прекращается после подписания акта и сдачи проекта. Сайт или интернет-проект — это инструмент, который постоянно...

20 декабря 2017#Business#web
 

PR-менеджер в digital-агентстве: 2017

Бюджеты, зарплата, показатели, достижения и профессиональные трудности.

14 декабря 2017#digital #Business
 

Выбор платформы для создания сайта

Последствия выбора платформы проявляются на финальных стадиях работы над проектом или после его сдачи заказчику.

13 декабря 2017#Business#web
 

Сколько стоит разработка корпоративных сайтов

Мы рассмотрим самый популярный тип проекта — корпоративный веб-сайт. На основе рыночных исследований мы выделили 3 ценовых группы и разобрали...

7 декабря 2017#Business#web
 

Цели проекта: имиджевые, финансовые, смежные.

В первую очередь ответьте на вопрос «Для чего и для кого делается этот интернет-проект?»

29 ноября 2017#marketing#Business
 

На западном фронте: особенности работы с...

О работе с западными заказчиками писали много, но в основном о финансово-юридических моментах. Мы же осветим другую сторону — организационную,...

22 ноября 2017#Business
 

Онлайн-трансляции в соцсетях любят больше, чем...

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

15 ноября 2017#smm #кейсы
 

Блогеры решают: Influencer Marketing в действии

Лучше всего работает та реклама, которая не выглядит, как реклама. Поэтому сегодня Influencer Marketing становится всё популярнее. Рассказываем,...

8 ноября 2017#marketing#digital #creative
 

«Мы решили заправить Instagram тем, чего от...

Агентство «Далее» запустило кулинарный Instagram-сериал с комедийной актрисой Мариной Федункив из «Реальных пацанов» в главной роли.

6 ноября 2017#marketing#digital #smm #creative#кейсы
 

KPI digital-кампаний: к чему нужно быть готовым

KPI (Key Perfomance Indicators) — ключевые показатели эффективности. Иногда их для краткости называют «метрики». Существование метрик...

1 ноября 2017#marketing#digital
 

Как решать конфликтные ситуации с трудными...

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

30 октября 2017#marketing#Business