Вебинар «Запуск сложного цифрового продукта» 10 декабря в 12:00 Зарегистрироваться

Провели редизайн и разрабатываем приложение для транспортной системы GorodPay

  • iOS

  • Android

  • HMS

  • Транспорт

Интро

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

Главный экран GorodPay

Экран, который главный

01

Интро

GorodPay — это многофункциональная платформа, которая упрощает взаимодействие жителей с городским транспортом. У заказчика уже была MVP-версия сервиса, нужно было бесшовно подключиться к проекту и в сжатые сроки расширить функциональность.

02

Задача

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

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

Экраны карты города и историю поездок GorodPay

Экран, на котором видно карту города и историю поездок

03

Решение

В основе нашего решения лежит принцип предоставления релевантного контента пользователю.

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

04

Аналитика

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

  • Исследование транспортных карт

  • Анализ региональных транспортных решений

  • UX-аудит административной панели

  • Оптимизация пользовательских путей

Исследование транспортных карт

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

Заголовок

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

Маргарита Вырвич

Руководитель проекта

Анализ региональных транспортных решений

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

UX-аудит административной панели

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

Оптимизация пользовательских путей

Пути пользователей очень даже исповедимы. На старте проекта заказчик провел нам презентацию, где рассказал про исследования и рекомендации внутренней UX-команды. Мы тоже провели собственный независимый аудит, по итогу которого создали обновленный и улучшенный дизайн главного экрана. Для отслеживания бизнес-показателей приложения добавили интеграцию с Яндекс. Метрикой. Создали события на основные действия клиента, чтобы анализировать пользовательские пути и понимать конверсию.

Заголовок

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

Тимофей Мостивенко

Аналитик

У вас есть похожая задача? Давайте обсудим!

05

Дизайн

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

Сохранили существующую стилистику, бережно добавляли новые разделы и улучшали старые.

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

Компоненты приложения ГородПэй

Экран, на котором показываем запчасти

Дизайн-система

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

Заголовок

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

Иван Андреев

Дизайнер интерфейсов

Новые функции

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

Для этого добавили следующие разделы

  • Личный кабинет

    Транспортные карты, добавление и пополнения

  • Аналитика по поездкам

    Обновленный баланс, история поездок, статистика за месяц

  • Карты

    Маршруты по городу, расписание транспорта, режим навигатора

  • Зависимый контент

    Приложение подстраивается под выбранный пользователем регион

06

Разработка

Фоновое изображение_ГородПэй

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

Планировали добавлять карты в Wallet — начали прорабатывать стратегию оплаты по QR, когда остались без кошельков. Отвалились Apple Pay и Google Pay — элегантно заместили их системой быстрых платежей.

Архитектура

Работали с новым для нас паттерном проектирования — MVI . Наши разработчики адепты Clean, но это не помешало им быстро разобраться в непривычном подходе и молниеносно начать работу над приложением. Не было цели переделывать проект под свои каноны, подстроились под существующие.

Интеграции приложения Gorodpay

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

NFC

Теперь на Android можно добавлять транспортную карту через NFC. Это намного удобнее, чем вводить большое количество символов вручную — когда цифр больше 20, легко ошибиться.

Перед тем, как это реализовать, наши разработчики сначала проверили, возможно ли это вообще сделать технически.

Как бы смешно не звучала эта фраза, ключей для Подорожника у нас не было. Наш талантливый Android-разработчик Егор придумал, как выйти из положения — сделал демо-версию сервиса, с помощью которого мы узнали о Подорожнике больше и поняли, какие данные сможем оттуда получать. Спойлер: больше всего нам нужны были ID пользователей.

Заголовок

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

Егор Белов

Android-разработчик

Разделение сборок

На этом проекте впервые стали разделять Android-сборки на Huawei и Google. Google Play не любит сборки с чужими сервисами и грозится удалить приложения, если обнаружит неопознанные объекты. Работает двоесборье так: если приложение установлено на досанкционном телефоне — сборка будет использовать Google-сервисы. Если смартфон послесанкционный, в ход пойдет сборка с HMS.

Интересный факт, операционная система Huawei называется Harmony. Работает на основе Android.

Экран c приближающимися автобусами

Экран, на котором замечены приближающиеся автобусы

Сканирование штрих-кода

У транспортной карты есть номер, но он достаточно большой, около 20 символов. Вводить руками неудобно, поэтому сделали возможность внести карту в приложение с помощью штрихкода.

Заголовок

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

Денис Сушков

iOS-разработчик

Push-уведомления

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

Разработка Backend

Backend делают наши партнеры, команда DEX. Выстроили с ними хорошие взаимоотношения и вместе вершим великие дела. Используем современные практики вроде Backend-Driven UI — выводим иконки c сервера, чтобы быстрее обновлять контент. Еще ребята помогли нам реализовать возможность создания регионально-зависимого контента — например, отображение сторис в зависимости от региона.

Заголовок

Для нас, для DEX, это не просто проект — это наше детище. Мы его начали с нуля, заложили основу, преодолели много трудностей.

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

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

Макс Тонкоглас

Руководитель Backend-команды

07

Тестирование

Вместе с привычными методами использовали и нетрадиционные.

Наземное

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

Терминал оплаты транспорта

Самым главным правилом было не нажимать на кнопку закрытия смены

Такой терминал приехал к нам в офис, чтобы приблизить условия тестирования к полевым, точнее, к автобусным.

Заголовок

Это один из проектов, где мы смогли построить четкий и слаженный механизм взаимодействия между всеми командами-участниками, стерли все границы. Никто уже не разделяет кто есть кто, мы все — команда проекта GorodPay.

Маргарита Вырвич

Руководитель проекта

Подземное

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

Экран оплаты Подорожник

Экран, к которому приложили Подорожник

08

Развитие

Уложились в пять месяцев и вместе с командой GorodPay запустили новую версию продукта. Будем и дальше работать над развитием сервиса. Продолжим развивать историю с персонализацией контента для пользователя, чтобы GorodPay стал еще более полезным.

Слово заказчика

Михаил Кашников отмечает: «Если говорить о будущем, то наша миссия — через GorodPay сделать удобной и бесшовной оплату всех поездок, не только на общественном транспорте. Вместе с тем, мчы понимаем, что в ряде регионов есть свои транспортные привычки, транспортные карты — например, „Подорожник“ в Санкт-Петербурге или „ЕКАРТА“ в Екатеринбурге. И теперь в GorodPay появилась возможность пополнять эти карты. Не секрет, что „Подорожником“ пользуются около 90% жителей Санкт-Петербурга и конечно „звёзды сошлись“: ребята из команды МobileUp были просто пользователями Подорожника, а стали еще непосредственными участниками улучшения и развития сервиса пополнения этой транспортной карты.

Наша цель — повышение качества транспортных проектов ГПБ (АО) во всех регионах нашего присутствия и даже шире. Первые шаги сделаны, видим позитивные отклики от Пользователей и готовы к следующим шагам.»

Заголовок

Отмечу, что мы все: и ребята из DEX, и ребята МobileUp, все участники проекта GorodPay, это слаженный оркестр профессионалов высокого уровня, а это значит, что достижение поставленных целей, это поход по проторенной дороге.

Полина Коваленко

CPO GorodPay

09

Команда

Команда MobileUp

  • Аналитик

    Тим Мостивенко

  • Технический директор

    Евгений Валеев

  • Арт-директор

    Александр Юдин

  • Дизайнер

    Иван Андреев

  • Разработчики iOS

    Павел Петрович, Максим Алиев, Денис Сушков, Николай Чаусов, Виталий Вишняков

  • Разработчики Android

    Артур Артиков, Артем Скопинцев, Егор Белов, Денис Фадеев

  • Тестировщики

    Илья Зеленский, Дарья Куркина, Ирина Моисеенко, Евгения Лозовская

  • Руководитель проекта

    Маргарита Вырвич

Команда DEX

  • Аналитик

    Брязу Михаил

  • Дизайн-лид

    Панфилова Таня

  • Разработчики Backend

    Сергей Фетеско, Анатолий Сирик, Виталий Чабан, Алексей Моспан

  • Разработчик Frontend

    Александр Граневский

  • DevOps

    Дмитрий Игнатьев, Вадим Сабадышин

  • Тестировщики

    Антон Волошин, Жанна Анган

  • Руководитель проекта / архитектор

    Максим Тонкоглас

01

Похожие проекты

02

Сотрудничество

Контакты

0

Мы всегда рады сотрудничеству и новым проектам.

Опишите задачу, и мы с вами свяжемся.
Или напишите в Телеграм.

Давайте знакомиться!

ВыбратьОткуда вы о нас узнали
  • Рейтинги
  • Рекомендации
  • Конференции
  • Публикации
  • Соцсети
  • Другое

Нажимая «Отправить», вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности

Ваша заявка успешно отправлена

Мы все изучим и скоро выйдем на связь