кейс INNERVATE
Лендинг для интерактивного терминала на стенде транспортной выставки
В предыдущих кейсах мы рассказали о том, как создали портал самообслуживания и настроили аналитический дашборд в Power BI для нашего ключевого клиента — транспортной компании FESCO.
В этом кейсе мы расскажем, как мы разработали лендинг
для интерактивного терминала, и о том, с какими сложностями
мы столкнулись.


Каждый год компания FESCO принимает участие в самой крупной российской выставке транспортно-логистических услуг и технологий — TransRussia. На выставке компания представляется собственным стендом, на котором можно ознакомиться со всеми услугами компании.
Задача
Нашей задачей стала разработка лендинга в фирменном стиле компании для интерактивного терминала на выставочном стенде. Цель — показать на лендинге основные онлайн-фичи сайта и личного кабинета, чтобы клиент сам попробовал, например, найти интересующее расписание корабля или поезда, или отследить местоположение своей контейнера.


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


Теперь про дизайн.

Референсы для дизайна — это "ширококнопочный" touch-friendly интерфейс для терминалов, по которому будет удобно тыкать пользователю, переходя в нужный раздел.
Итак, мы нарисовали вариант лендинга.
Лендинг должен позволять:
1
Посмотреть ставки на перевозку
2
Посмотреть расписание кораблей и поездов
3
"Протрекать контейнер" по его номеру и определить статус перевозки и его местонахождение.
4
Зарегистрироваться в личном кабинете (т.е. получить логин и пароль с помощью лендинга для последующей авторизации в личном кабинете).
Весь этот функционал был у нас уже реализован — была настроена интеграция с внутренними IT-системами, где хранилась информация по ставкам, расписанию, информации по контейнеру и пользователям.

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

Кроме того, возможны были ситуации, когда API недоступно какое-то время, либо на выставке может периодически пропадать интернет, и к этому нужно было быть готовым. Значит это должен быть stand-alone (автономный) браузерный сайт с локальным хранилищем для сохранения очереди и ajax-запросами для передачи их на сервер, когда есть возможность.


Модель работы была определена:

терминал будет отправлять запросы к нашему API (которое мы написали специально для лендинга) на сайты, где реализован конкретный метод. Если получили ответ на запрос, то показали его на экране. Не получили ответ, стоим в очереди.


Второй технический вопрос — touch-клавиатура.

При тестировании на реальном устройстве, клавиатура никак не хотела появляться. Из-за чего возможность ввести текст на лендинге — отсутствовала.

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

После долгих часов тестирования различных вариантов нашли простое решение — браузерное расширение виртуальной клавиатуры. Осталось только подобрать ее под разрешение и дизайн.

Еще одна сложность была решена!


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

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

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

Новые озвученные работы пришлось разделить на 2 итерации: до выставки, и после выставки — до выставки оставались считанные дни.

Все было реализовано в планируемый срок. Мы победили!




Второй заход (выставка 2018)
К нашей радости спустя год клиент снова пришел к нам с задачей создать лендинг для терминала на стенде транспортной выставке.

Но снова — за 2 недели до выставки, снова — сжатые сроки.
Функционал остался практически прежним. API у нас было уже написано, c виртуальной клавиатурой вопрос тоже решен, поэтому предыдущих сложностей не было. Но были новые :)
На этот раз терминал был вертикальным 1080х1920. Выглядел он таким образом:
Тут нужно было учитывать высоту человека и расположить контент так, чтобы ему не приходилось тянуться наверх или до нижнего края экрана.


Другое нововведение — прокрутка видео на терминале каждые 30 секунд до тех пор, пока его не коснется пользователь. По тепу на экране появится контент-лендинга.


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







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



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