Обсудить проект
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
кейс INNERVATE
Как за 2 недели подготовиться
к отраслевой выставке
на 16,5 тысяч человек
к отраслевой выставке
на 16,5 тысяч человек
Лендинг для интерактивного стенда транспортной компании FESCO
на выставке TransRussia. Кейс Innervate
на выставке TransRussia. Кейс Innervate
Реализовать все запросы клиента, устранить все возникшие в ходе работы трудности и успеть закончить работу в предельно сжатые сроки, в последний момент воплотив еще одну важную идею — команда Innervate это умеет.
Каждый год наш ключевой клиент, компания FESCO, участвует в выставке TransRussia. Это ключевое событие в сфере транспортно-логистических услуг, на котором создаются партнерские отношения, подписываются новые контракты и находятся общие решения для развития отрасли.
Каждый год наш ключевой клиент, компания FESCO, участвует в выставке TransRussia. Это ключевое событие в сфере транспортно-логистических услуг, на котором создаются партнерские отношения, подписываются новые контракты и находятся общие решения для развития отрасли.
Задача
После запуска портала самообслуживания компания решила продемонстрировать на выставке возможности личного кабинета. Нашей задачей и стала подготовка лендинга для интерактивного стенда FESCO на этой выставке. С его помощью любой посетитель смог бы сам попробовать найти интересующее расписание корабля или поезда, отследить местоположение своего контейнера и т.д. Словом, стенд должен был представлять лучшие технологии, которые накопила FESCO за это время.
В 2018 году выставку посетило 16 652 человека, примерно 15% от общего числа посетителей ознакомились со стендом FESCO и через него опробовали идею самообслуживания в деле. Это значит, что стенд и лендинг на нем внесли значительный вклад в продвижение портала самообслуживания FESCO.
Дано
Клиент:
Логистическая компания FESCO, ежегодно участвующая
в TransRussia — самой крупной отраслевой выставке транспортно-логистических услуг и технологий.
в TransRussia — самой крупной отраслевой выставке транспортно-логистических услуг и технологий.
Цель:
Продемонстрировать посетителям выставки TransRussia основные возможности сайта и личного кабинета компании, чтобы они самостоятельно оценили список услуг FESCO
и удобство онлайн-самообслуживания.
и удобство онлайн-самообслуживания.
Задача:
За 2 недели разработать лендинг для интерактивного стенда FESCO на выставке, оформленного в фирменном стиле компании.
---
Итак, FESCO участвует в этой выставке каждый год. Впервые компания решила воспользоваться интерактивным стендом в 2017 году, как раз после того, как была запущена вторая версия личного кабинета. С этой идеей они и пришли к нам.
Мы расскажем о двух версиях лендинга — 2017 и 2018 года.
Итак, FESCO участвует в этой выставке каждый год. Впервые компания решила воспользоваться интерактивным стендом в 2017 году, как раз после того, как была запущена вторая версия личного кабинета. С этой идеей они и пришли к нам.
Мы расскажем о двух версиях лендинга — 2017 и 2018 года.
Выставка 2017 года
Одной из сложностей проекта стали сжатые сроки. Компания FESCO пришла к нам
с этой задачей за 2 недели до начала выставки, а это означало, что у нас всего несколько дней на отрисовку дизайна и его согласование. После того, как дизайн будет согласован, нам необходимо отдать лендинг в разработку, а затем провести тестирование результата на айпаде. Если следовать такому плану, мы как раз успеем перенести лендинг с тестового сервера на боевой и протестировать его на реальном устройстве на территории выставки за день до её начала.
с этой задачей за 2 недели до начала выставки, а это означало, что у нас всего несколько дней на отрисовку дизайна и его согласование. После того, как дизайн будет согласован, нам необходимо отдать лендинг в разработку, а затем провести тестирование результата на айпаде. Если следовать такому плану, мы как раз успеем перенести лендинг с тестового сервера на боевой и протестировать его на реальном устройстве на территории выставки за день до её начала.
Стенд FESCO на выставке TransRussia 2017: с его помощью посетители смогли на деле попробовать личный кабинет FESCO и функции самообслуживания.
Функции лендинга:
Ставки
Посмотреть ставки на перевозку
Расписание
Посмотреть расписание кораблей
и поездов
и поездов
Трекинг
"Протрекать контейнер" по его номеру и определить статус перевозки и его местонахождение.
Регистрация
Зарегистрироваться в личном кабинете, т.е. получить логин
и пароль с помощью лендинга для последующей авторизации
в личном кабинете
и пароль с помощью лендинга для последующей авторизации
в личном кабинете
Требования к дизайну
Это должен быть «ширококнопочный» touch-friendly интерфейс для терминалов, по которому пользователю будет удобно нажимать пальцем, переходя в нужный раздел.
Все визуальные элементы должны быть выполнены в фирменном стиле FESCO.
В конце концов, это должен быть продукт, которым легко, удобно и приятно пользоваться, ведь наша задача — продемонстрировать сервисы в лучшем виде.
Следующий шаг — техническая реализация
Уже из списка сервисов, которые нужно реализовать на лендинге, мы заранее знали, в чем будет основная сложность.
Дело в том, что разные сервисы FESCO находятся в разных местах. Например, трекинг контейнеров находится на корпоративном сайте fesco.ru, а запрос ставок — в личном кабинете my.fesco.com. Чтобы выдавать посетителю выставки информацию по трекингу контейнеров, мы должны обращаться к одной IT-системе заказчика, а чтобы показать информацию по ставкам — к другой. И так — почти со всеми сервисами.
Дело в том, что разные сервисы FESCO находятся в разных местах. Например, трекинг контейнеров находится на корпоративном сайте fesco.ru, а запрос ставок — в личном кабинете my.fesco.com. Чтобы выдавать посетителю выставки информацию по трекингу контейнеров, мы должны обращаться к одной IT-системе заказчика, а чтобы показать информацию по ставкам — к другой. И так — почти со всеми сервисами.
Решение №1 — написание API
API — это код, который собирает куски информации с разных мест, с определенной периодичностью запрашивая информацию и получая ее в определенном виде назад (например, файлом).
Чтобы реализовать на лендинге все функции, мы написали API, которое собирает куски информации с разных мест. Например, если пользователь запрашивает информацию о расписании рейсов, идет обращение на сайт клиента, если информацию по ставкам, идет обращение к личному кабинету — и так далее.
Следующая сложность, которую важно было предусмотреть — качество связи.
На выставке, в зависимости от загрузки, время от времени может плохо работать интернет, а это значит, что очередной посетитель, подойдя к стенду FESCO, может столкнуться с ситуацией, когда лендинг не выдает ему запрошенную информацию. Если учесть, что наша задача — продемонстрировать технологичность FESCO, выходит, что как только возникают перебои с интернетом, стенд начинает работать против нас.
Чтобы реализовать на лендинге все функции, мы написали API, которое собирает куски информации с разных мест. Например, если пользователь запрашивает информацию о расписании рейсов, идет обращение на сайт клиента, если информацию по ставкам, идет обращение к личному кабинету — и так далее.
Следующая сложность, которую важно было предусмотреть — качество связи.
На выставке, в зависимости от загрузки, время от времени может плохо работать интернет, а это значит, что очередной посетитель, подойдя к стенду FESCO, может столкнуться с ситуацией, когда лендинг не выдает ему запрошенную информацию. Если учесть, что наша задача — продемонстрировать технологичность FESCO, выходит, что как только возникают перебои с интернетом, стенд начинает работать против нас.
Решение №2 — standalone-сайт
Сайт, работающий в автономном режиме, с локальным хранилищем, которое сохраняет очередь запросов и при необходимости асинхронно передает их
на сервер, когда есть возможность.
Мы нашли простое и изящное решение, позволяющее предотвратить подобную ситуацию. Если соединение с интернетом разорвано, а к стенду подошел посетитель и запросил информацию — например, по расписанию — мы не получим её
из внешних систем, но пользователю отобразится информация локальная (из кеша). Запросы же актуальной информации из внешних систем (сайтов) будут продолжать идти в фоновом режиме. Как только соединение восстановится, ответ будет получен, и информация на экране обновится.
на сервер, когда есть возможность.
Мы нашли простое и изящное решение, позволяющее предотвратить подобную ситуацию. Если соединение с интернетом разорвано, а к стенду подошел посетитель и запросил информацию — например, по расписанию — мы не получим её
из внешних систем, но пользователю отобразится информация локальная (из кеша). Запросы же актуальной информации из внешних систем (сайтов) будут продолжать идти в фоновом режиме. Как только соединение восстановится, ответ будет получен, и информация на экране обновится.
Новый вызов
Буквально за два дня до начала выставки, когда стало ясно, что мы успеваем реализовать все необходимое в срок, FESCO пришли к нам с новой идеей — выдавать всем пользователям, зарегистрировавшимся на стенде, скидку на перевозку контейнера. Это бы мотивировало посетителей регистрироваться в личном кабинете и дало повод в ближайшем будущем опробовать услуги FESCO. Мы были рады новому вызову. В конце концов, в том и состоит преимущество таких команд, как наша — мы можем подхватить и реализовать свежие идеи клиентов, даже если они придуманы буквально в последний момент.
Итак, мы взяли на себя обязательно успеть сделать к открытию выставки и это.
Итак, мы взяли на себя обязательно успеть сделать к открытию выставки и это.
Дополнительная задача:
Реализовать на лендинге возможность выдавать всем пользователям, зарегистрировавшимся через стенд
в личном кабинете, скидку на перевозку контейнера.
в личном кабинете, скидку на перевозку контейнера.
Технически для этого было нужно:
Форма
создать новую форму с проверкой, что пользователь зарегистрирован в личном кабинете (это одно из условий получения скидки);
Письма
сверстать письма о скидках на двух языках — русском и английском;
Настройка уведомлений
настроить отправку писем о полученной скидке клиентам;
Флаги для скидки
настроить сохранение адресов и отметку специальным «флагом»: планировалось, что после выставки все пользователи, получившие скидку, будут отмечены «флагом» в личном кабинете, и при оформлении заявки должны получать информацию о том, что на перевозку применяется скидка;
Настройка
прикрутить отправку сообщения при оформлении заявки со скидкой менеджеру
и клиенту.
и клиенту.
Всё это мы сделали вовремя, и каждый, кто в 2017 году пришел на выставку TransRussia и зарегистрировался
в личном кабинете FESCO, получил скидку на перевозку контейнера.
в личном кабинете FESCO, получил скидку на перевозку контейнера.
Выставка 2018 года
Спустя год FESCO снова пришли к нам с задачей создать лендинг для терминала на стенде выставки TransRussia.
Снова — 2 недели до выставки, снова — сжатые сроки разработки.
Снова — 2 недели до выставки, снова — сжатые сроки разработки.
 |
 |
Стенд FESCO на выставке TransRussia 2018 года. По примерной оценке с услугами FESCO с его помощью ознакомились 2,5 тысячи человек.
Задачи
Многоязычность
Лендинг должен быть двуязычным (русский + английский)
Видео
До тех пор, пока к экрану не прикоснется пользователь, каждые 30 секунд на нем должно прокручиваться видео.
Требования к дизайну
На этот раз терминал вертикальный 1040*585 мм, соответственно, дизайн лендинга должен быть сделан так, чтобы человеку среднего роста было удобно нажимать на кнопки и читать с экрана.
Так как API для обращения к разным IT-системам заказчика у нас было уже написано, а функционал остался практически тем же, предыдущих сложностей не было. Но были новые. Вертикальная ориентация стенда вынуждает нас при компоновке информации на экране учитывать средний рост и расположение человека
у терминала. Нельзя заставлять посетителей выставки вставать на цыпочки, чтобы дотянуться до нужной кнопки, и наклоняться вниз, чтобы прочитать важную информацию.
у терминала. Нельзя заставлять посетителей выставки вставать на цыпочки, чтобы дотянуться до нужной кнопки, и наклоняться вниз, чтобы прочитать важную информацию.
Решение: разбивка экрана на четыре области с учетом роста человека
Чтобы понять, как расположить информацию, мы сопоставили средний рост человека с известной нам высотой стенда. Выходит, что выше головы не может быть никакой информации для чтения, все кнопки должны располагаться на уровне глаз и плеч, а всё, что ниже, может быть отведено под менее приоритетную информацию.
В результате мы разбили экран на четыре блока: верхний визуальный блок, блок с основной информацией (там все кнопки, там же выводится информация, которую запросил пользователь) вспомогательный блок
с менее приоритетной информацией и нижний визуальный блок. Так мы и используем всё полезное пространство, и дадим пользователю приятный визуальный опыт.
В конечном виде наверху лендинга на терминале шапка из атмосферных картинок и логотипа компании.
На уровне глаз и плеч находится вся основная информация: формы для ввода и большие кнопки. После ввода информации на этом же уровне появляется вся информация, которую запросил пользователь — например, расписание или ставки из калькулятора. Ниже этой основной области находится менее приоритетная информация: информация о личном кабинете и компании. Самый нижний блок находится на уровне живота, пользователю было бы неудобно там что-то нажимать, там мы размещаем красочные картинки и логотипы других компаний из группы FESCO.
В результате мы разбили экран на четыре блока: верхний визуальный блок, блок с основной информацией (там все кнопки, там же выводится информация, которую запросил пользователь) вспомогательный блок
с менее приоритетной информацией и нижний визуальный блок. Так мы и используем всё полезное пространство, и дадим пользователю приятный визуальный опыт.
В конечном виде наверху лендинга на терминале шапка из атмосферных картинок и логотипа компании.
На уровне глаз и плеч находится вся основная информация: формы для ввода и большие кнопки. После ввода информации на этом же уровне появляется вся информация, которую запросил пользователь — например, расписание или ставки из калькулятора. Ниже этой основной области находится менее приоритетная информация: информация о личном кабинете и компании. Самый нижний блок находится на уровне живота, пользователю было бы неудобно там что-то нажимать, там мы размещаем красочные картинки и логотипы других компаний из группы FESCO.
Вертикальная ориентация экрана — дополнительная задача для разработчика. С помощью таких зарисовок мы демонстрировали клиенту, какой контент будет видеть человек на уровне глаз и удобно ли ему будет перемещаться по лендингу.
Следующим шагом нам нужно было реализовать одно новшество лендинга 2018 года — прокрутка видео каждые 30 секунд до тех пор, пока его не коснется пользователь. Как только к экрану прикоснулся подошедший к стенду посетитель выставки, отображается основной контент лендинга на двух языках.
 |
 |
 |
 |
Разные варианты дизайна для основного контента лендинга в 2018 году.
Как и в предыдущий раз, мы успели вовремя проработать все сервисы и возможности, и в 2018 году на ключевой деловой выставке сферы выставочную площадь FESCO дополнял интерактивный стенд с лендингом, разработанным в Innervate.
Контакты
+7 (495) 585-08-02
hello@innervate.ru
Ленинский проспект, 30А
hello@innervate.ru
Ленинский проспект, 30А