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

Решение

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

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

White Label SDK — набор библиотек SDK для встраивания отдельных функциональных модулей — поиска и покупки авиабилетов и бронирования отелей в уже готовые партнерские приложения. Используя наш конфигуратор, эти модули можно также подстраивать под стилистику интерфейса любого приложения.

Подготовка технического задания и изучения особенностей приложения

На этом моменте начинается этап проектирования, в котором нужно было предусмотреть:

• новое приложение-шаблон;
• конфигуратор для гибкой настройки стилистики приложения;
• функции поиска авиабилетов и бронирования отелей с удобной фильтрацией;
• возможность использования отдельных функций через SDK.

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

Для такого большого проекта мы решили остановиться на формате нативного приложения, то есть писали каждую из его версий отдельно для платформ Android и iOS. Мы выбрали именно такой тип приложения потому, что он имеет бóльшую жизнеспособность в долгосрочной перспективе и обеспечивает лучший пользовательский опыт, а еще у него выше производительность. Кроме того, в нативных приложениях быстрее, стабильнее и надежнее работают разные типы конфигурации, передача кода и сборка приложений на стороне заказчика, а также формат RTL (написание справа налево). UI в приложений White Label App соответствует гайдлайнам от Google и Apple, что помогает пользователю лучше взаимодействовать с приложением за счет привычного интерфейса.

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

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

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

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

Проектирование API

Этап создания технического задания и в целом проектной документации стал одним из самых сложных и объемных во всем цикле проекта. И вот почему.

В приложении есть функции для заказа авиабилетов и для бронирования отелей. Они разные по своей специфике, соответственно, и API для них разные. Вместе с командой заказчика мы написали масштабную документацию к API обеих функций практически с нуля. Плотно общались с командой Travelpayouts и «на ходу» описывали некоторые способы взаимодействия между приложением и серверами с базами данных. Приходилось импровизировать — иногда сами придумывали и проектировали запросы пользователей. Также мы полностью воссоздали и описали всю бизнес-логику продукта.

Дизайн интерфейса, подходящий любому тревел-приложению

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

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

Мы также предусмотрели локализацию интерфейса под формат RTL для жителей стран Ближнего Востока, где пишут и читают справа налево — поэтому тексты, инпуты, сервисные подсказки, слайдеры, иконки, имеющие направление движения, адаптированы под этот формат.

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

Спроектировали конфигуратор

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

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

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

Добавили в White Label App возможность вести подробную аналитику взаимодействия пользователя с приложением при подключении его к Firebase. Такая функция предоставляет возможность отслеживать насколько часто в приложении используется тот или иной блок, фильтр и какие разделы не используются совсем. И на основе собранной статистики трансформировать функции и настройки: убрать лишние фильтры, кнопки или же добавить те, что сконвертируют запрос клиента в покупку.