Мобильное приложение для прослушивания аудиогидов TRiMOTi

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

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

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

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

Мы рассмотрели задачу с точки зрения ограничений ресурсов и приняли решение разделить ее на две составляющие:

1. PWA-приложение с возможностью слушать аудиогид даже без интернета. (текущий кейс)

2. CRM-система для аналитики и менеджмента экскурсий, аудиофайлов, городов, музеев, экспонатов и др. (рассказали в другом кейсе в нашем профиле)

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

Общий срок разработки занял 2 месяца, включая оба этапа, и PWA-приложение, и CRM-систему. Такие быстрые сроки разработки стали возможны также благодаря выбранной архитектуре проекта.

В дальнейшем, мы предложили клиенту "обернуть" это PWA-приложение в код на Swift и Kotlin для публикации в App Store и Google Play соответственно. Мы делаем такую услугу для любого сайта или сервиса за 120 тыс. руб. Это обычно делает из имиджевых соображений и отстройки от конкурентов.

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

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

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

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

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

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

При первом входе и сканировании QR-кода купленной экскурсии пользователь попадает на экран онбординга, а далее на экран с описанием экскурсии.

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

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

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

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

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

На карте можно нажать на метку и начнется прослушивание выбранного экспоната.

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

Клиент запросил, чтобы окно обратной связи появлялось автоматически после прохождения 50% экскурсии, 75% экскурсии и по окончанию. Если же пользователь заполнил и отправил обратную связь, то она больше не появляется по этой экскурсии. Если же не заполнил, то окно окончания экскурсии становится двухшаговым, где первый экран - заключительное аудио и благодарность, а второй - то же самое окно обратной связи.

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

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

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

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

Для менеджмента экскурсий и пользователей была разработана отдельная CRM-система (смотри в другом кейсе в нашем профиле).