Адаптивный лендинг Uber

Посмотреть сайт: http://uberpetersburg.ru

Дизайн и разработка адаптивного лендинга для компании Uber

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

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

Приступаем к работе

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

текущий лендинг сайта uber

Дизайн сайта: сначала – мобильный

При разработке дизайна сайта используем западный принцип mobile first – начинать с мобильного. Сперва делаем версию для смартфона в портретной ориентации:

портретная ориентация сайта

Информацию раскрываем постепенно: сначала интригуем броским заголовком, потом рассказываем о том, что требуется для сотрудничества с сервисом Uber.

стартовая страница сайта Uber в вертикальной ориентации сайта

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

часть экрана в вертикальной ориентации с текстом для ознакомления с компанией Uber

Чтобы заинтриговать потенциального партнёра Uber ещё больше, приводим реальные данные об уровне доходов – в зависимости от количества часов, которое партнёр сервиса проводит за рулём. Кнопка «Узнать подробности!» ведёт к заявке на партнёрство в конце страницы.

Кнопка Узнать подробности компании Uber в вертикальной ориентации

Схема работы сервиса объясняется просто, как раз, два, три: всего три шага – пройти обучение, скачать приложение, начать зарабатывать! Что может быть проще? Ниже сообщаем о том, что партнёрам Uber выручка перечисляется каждую неделю. Далее – ещё несколько преимуществ этого уникального сервиса.

Схема работы сервиса и преимущества компании Uber в вертикальной ориентации

Так как задача лендинга – собирать заявки, в конце страницы (после рассказа о прелестях работы с сервисом Uber и перечисления его преимуществ) размещаем простую партнёрскую анкету, в которой нужно заполнить всего три поля и нажать кнопку «Отправить заявку!».

Продолжаем работать

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

партнёрская анкета с тремя полями кнопкой Отправить заявку

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

дизайн сайта для смартфона в альбомной (горизонтальной) ориентации

Дизайн лендинга для планшета и ПК

По окончании работ над дизайном сайта для смартфона, переходим к разработке дизайна для планшета (работа идёт от меньшего к большему, дизайн как бы разворачивается). Сначала делаем версию для портретной ориентации устройства, потом – для альбомной. После этого делаем ещё две версии дизайна для ПК: для экранов поменьше (1) и для экранов побольше (2). Вот, что у нас получилось:

Дизайн лендинга для планшета и ПК полная версия экрана

Главное – увеличение конверсии

Напомним, что цель нового лендинга Uber – увеличить конверсию, т.е. привлечь больше водителей при прежнем трафике (количестве посетителей сайта). Продуманные тексты, аккуратный дизайн, скорость работы сайта – лишь инструменты для достижения этой цели. Через два месяца после запуска проекта мы узнали, что цель достигнута: на новом сайте конверсия стала больше!

Ниже – цитата из отзыва генерального менеджера Uber Saint Petersburg об эффективности нового лендинга:

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

Прочитать отзыв целиком можно на странице отзывов и рекомендательных писем.

Резюме

В рамках работы над новым петербургским лендингом Uber нам предстояло:

  1. Проанализировать недостатки централизованного корпоративного лендинга известного сервиса, которым петербургское отделение Uber пользовалось ранее
  2. Написать новые тексты для сайта
  3. Разработать полностью адаптивный дизайн сайта
  4. Сделать HTML-вёрстку и программирование (включая back-end, связанный с обработкой заявок)
  5. Увеличить конверсию – привлечь больше водителей при прежнем трафике

Подробный рассказ о данной работе читайте в статье О разработке лендинга Uber (Санкт-Петербург).

* * *

Виды работ: разработка лендинга, разработка сайта
Исполнители: Андрей, Павел
Клиент: Uber (СПб)
Регион: Санкт-Петербург
Сдача проекта: октябрь 2015