Дизайн и разработка приложения GorodPay
iOS
Android
HMS
Транспорт
Скрытый заголовок
Заботливо поддерживаем приложение: проектируем новые функции, создаем дизайн и разрабатываем сервис для жителей города
Экран, который главный
01
Интро
GorodPay — это многофункциональная платформа, которая упрощает взаимодействие жителей с городским транспортом. У заказчика уже была MVP-версия сервиса, нужно было бесшовно подключиться к проекту и в сжатые сроки расширить функциональность.
02
Задача
За пять месяцев доработать приложение до нужного уровня: внедрить новые функции и возможности для пользователей, самые важные из которых — подключение транспортных карт и отслеживание транспорта внутри сервиса.

Важно было не пересобирать проект с нуля и строить заново, а аккуратно подхватить то, что уже есть, и заботливо довести до нужного результата.
Экран, на котором видно карту города и историю поездок
03
Решение
В основе нашего решения лежит принцип предоставления релевантного контента пользователю.
Все, что нам нужно – знать, в каком регионе находится пользователь. На основе этой информации персонализируем предложения и контент.
Аналитика
Каждый проект начинаем с этого этапа, уделяем аналитике и данным большое внимание. Вот, что сделали на старте проекта.
Исследование транспортных карт
Анализ региональных транспортных решений
UX-аудит административной панели
Оптимизация пользовательских путей
Исследование транспортных карт
Изучили все существующие мировые практики и российские транспортные приложения, исследовали их особенности.
Их оказалось достаточно много. Например, одну карту можно пополнять безгранично и записать все пополнения разом, а другую только единожды. Или балансы: есть отложенные, а есть неучтенные. Глубоко погрузились в тему, разобрались в тонкостях и поддержали это в дизайне, проработали нужные сценарии.
Заголовок
Приложение много значит для нас, как для компании из Санкт-Петербурга. Мы разрабатываем продукт, которым будем пользоваться сами в реальной жизни: смотреть статусы своих карт, анализировать расходы на транспорт, удобно пополнять Подорожник, получать актуальную информацию о транспорте. Такой комплексный подход был только в Москве, но теперь и мы не отстаем.
Анализ региональных транспортных решений
Исследовали транспортные приложения в разных городах, проверили более десятка сервисов. Выявили несколько интересных фич, которые предложили заказчику — например, оплату по QR, которую планируем реализовать в следующих сериях.
UX-аудит административной панели
Провели UX-аудит административно панели, которая уже есть у заказчика.
Думали, как сделать админку более удобной и ускорить работу оператора. Предложили рекомендации по улучшению, часть из них уже внедрили: сократили количество переходов внутри интерфейса и пересмотрели методологию агрегации данных.
Оптимизация пользовательских путей
Заголовок
GorodPay стал интересным вызовом, так как необходимо было не только оптимизировать те пользовательские пути, которые уже были поддержаны в приложении, но и добавить новые, для чего пришлось погрузиться в удивительный мир транспортных карт РФ, где у каждой свои особенности, как с точки зрения основных принципов работы, так и с точки зрения возможностей, предоставляемых через API.
05
Дизайн
У нас не было задачи полностью изменить приложение. Скорее наоборот — нужно было бесшовно подключиться к проекту и продолжить его развитие.
Сохранили существующую стилистику, бережно добавляли новые разделы и улучшали старые.
Одним из самых больших изменений стал редизайн главного экрана, полностью переделали его логику. Теперь пользователь видит все транспортные карты сразу, может добавлять новые и пополнять старые.
Скрытый заголовок
Экран, на котором показываем запчасти
Дизайн-система
Аккуратно пересобрали элементы и создали новую дизайн-систему, которую легко развивать и поддерживать. Сумели сохранить визуальный стиль приложения и усовершенствовали сами элементы, чтобы ускорить дальнейшую разработку.
Заголовок
Приятно работать над социально-значимым проектом, которым пользуешься сам. Ах, вся эта реклама в маршрутках и автобусах. Как радостно видеть свои экраны на афишах и постерах.
Новые функции
Для этого добавили следующие разделы
Личный кабинет
Транспортные карты, добавление и пополнения
Аналитика по поездкам
Обновленный баланс, история поездок, статистика за месяц
Карты
Маршруты по городу, расписание транспорта, режим навигатора
Зависимый контент
Приложение подстраивается под выбранный пользователем регион
06
Разработка
Работа в условиях турбулентности.![]()
Планировали добавлять карты в Wallet – начали прорабатывать стратегию оплаты по QR, когда остались без кошельков. Отвалились Apple Pay и Google Pay – элегантно заместили их системой быстрых платежей.
Архитектура
Работали с новым для нас паттерном проектирования — MVI . Наши разработчики адепты Clean, но это не помешало им быстро разобраться в непривычном подходе и молниеносно начать работу над приложением. Не было цели переделывать проект под свои каноны, подстроились под существующие.
Скрытый заголовок
Интересной задачей было подружить все это, сделать интеграции незаметными для пользователя
NFC
Теперь на Android можно добавлять транспортную карту через NFC. Это намного удобнее, чем вводить большое количество символов вручную – когда цифр больше 20, легко ошибиться.
Перед тем, как это реализовать, наши разработчики сначала проверили, возможно ли это вообще сделать технически.![]()
Как бы смешно не звучала эта фраза, ключей для Подорожника у нас не было. Наш талантливый Android-разработчик Егор придумал, как выйти из положения – сделал демо-версию сервиса, с помощью которого мы узнали о Подорожнике больше и поняли, какие данные сможем оттуда получать. Спойлер: больше всего нам нужны были ID пользователей.
Заголовок
Сделали демо приложения и с помощью него смотрели, какие данные есть на Подорожнике и что из этого мы можем считать. На основе исследования и демо добавили эту функцию в приложение.
Разделение сборок
На этом проекте впервые стали разделять Android-сборки на Huawei и Google. Google Play не любит сборки с чужими сервисами и грозится удалить приложения, если обнаружит неопознанные объекты. Работает двоесборье так: если приложение установлено на досанкционном телефоне — сборка будет использовать Google-сервисы. Если смартфон послесанкционный, в ход пойдет сборка с HMS.
Интересный факт, операционная система Huawei называется Harmony.
Работает на основе Android.
Экран, на котором замечены приближающиеся автобусы
Сканирование штрих-кода
У транспортной карты есть номер, но он достаточно большой, около 20 символов. Вводить руками неудобно, поэтому сделали возможность внести карту в приложение с помощью штрихкода.
Заголовок
Когда у тебя появляется шанс поработать над приложением, которое в перспективе пригодится всем жителям страны, трудности перестают пугать. Непривычная архитектура, работа с редкими API и интеграция с сервисами партнеров — все эти вызовы стоили потраченных усилий. Увидел, как случайный человек в маршрутке пополняет Подорожник через GorodPay, и понял — это того стоило!
Push-уведомления
Подключили пуши для оповещения пользователей. Теперь они получают информацию по статусам карт, не заходя в приложение.
Разработка Backend
Backend делают наши партнеры, команда DEX. Выстроили с ними хорошие взаимоотношения и вместе вершим великие дела.
Используем современные практики вроде Backend-Driven UI — выводим иконки c сервера, чтобы быстрее обновлять контент. Еще ребята помогли нам реализовать возможность создания регионально-зависимого контента — например, отображение сторис в зависимости от региона.
Заголовок
Для нас, для DEX, это не просто проект — это наше детище. Мы его начали с нуля, заложили основу, преодолели много трудностей.
За время работы над продуктом мы прониклись идеей и задачами, которые стоят перед нами. Мы уже видим результаты нашей работы, аудитория растет и некоторые процессы уже стали проще для наших пользователей. И это мотивирует. Впереди еще много всего предстоит сделать, уверен, у нас получится сделать наш продукт по-настоящему полезным для людей.Еще хочу сказать спасибо нашим коллегам из MobileUp, руководству Инфосетей и множеству других партнеров, из нас получилась отличная команда.
07
Тестирование
Вместе с привычными методами использовали и нетрадиционные.

Наземное
На проекте практикуем функциональные виды тестирования: регрессионное и смоук. На специальном терминале тестировали, корректно ли работают стоп-листы. Также написали тест-кейсы, чтобы прогонять по ним новые сборки. Из‑за санкций они периодически менялись, поэтому не забывали руководствоваться и здравым смыслом.
Самым главным правилом было не нажимать на кнопку закрытия смены
Скрытый заголовок
Такой терминал приехал к нам в офис, чтобы приблизить условия тестирования к полевым, точнее, к автобусным.
Заголовок
Это один из проектов, где мы смогли построить четкий и слаженный механизм взаимодействия между всеми командами-участниками, стерли все границы. Никто уже не разделяет кто есть кто, мы все — команда проекта GorodPay.
Подземное
В тестировании принимал участие не только QA-отдел, но и вся команда MobileUp. В аккаунте у руководителя проекта Марго есть все наши Подорожники. Для того, чтобы проверить пополнение транспортных карт в реальном времени, она несколько раз в день ходила в метро.
Записывала пополнения карты вручную, чтобы убедиться, что у пользователей все работает четко.
Экран, к которому приложили Подорожник
08
Развитие
Уложились в пять месяцев и вместе с командой GorodPay запустили новую версию продукта. Будем и дальше работать над развитием сервиса. Продолжим развивать историю с персонализацией контента для пользователя, чтобы GorodPay стал еще более полезным.
Слово заказчика
Алексей Скогорев отмечает: «Если говорить о будущем, то наша миссия — через GorodPay сделать удобной и бесшовной оплату всех поездок, не только на общественном транспорте. Вместе с тем, мы понимаем, что в ряде регионов есть свои транспортные привычки, транспортные карты — например, „Подорожник“ в Санкт-Петербурге или „ЕКАРТА“ в Екатеринбурге. И теперь в GorodPay появилась возможность пополнять эти карты. Не секрет, что „Подорожником“ пользуются около 90% жителей Санкт-Петербурга и конечно „звёзды сошлись“: ребята из команды МobileUp были просто пользователями Подорожника, а стали еще непосредственными участниками улучшения и развития сервиса пополнения этой транспортной карты.
Наша цель — повышение качества транспортных проектов ГПБ (АО) во всех регионах нашего присутствия и даже шире. Первые шаги сделаны, видим позитивные отклики от Пользователей и готовы к следующим шагам.»
Заголовок
Отмечу, что мы все: и ребята из DEX, и ребята МobileUp, все участники проекта GorodPay, это слаженный оркестр профессионалов высокого уровня, а это значит, что достижение поставленных целей, это поход по проторенной дороге.
09
Команда
Команда MobileUp
- Аналитик
Тим Мостивенко
- Технический директор
Евгений Валеев
- Арт-директор
Александр Юдин
- Дизайнер
Иван Андреев
- Разработчики iOS
Павел Петрович, Максим Алиев, Денис Сушков, Николай Чаусов, Виталий Вишняков
- Разработчики Android
Артур Артиков, Артем Скопинцев, Егор Белов, Денис Фадеев
- Тестировщики
Илья Зеленский, Дарья Куркина, Ирина Моисеенко, Евгения Лозовская
- Руководитель проекта
Маргарита Вырвич
Команда DEX
- Аналитик
Брязу Михаил
- Дизайн-лид
Панфилова Таня
- Разработчики Backend
Сергей Фетеско, Анатолий Сирик, Виталий Чабан, Алексей Моспан
- Разработчик Frontend
Александр Граневский
- DevOps
Дмитрий Игнатьев, Вадим Сабадышин
- Тестировщики
Антон Волошин, Жанна Анган
- Руководитель проекта / архитектор
Максим Тонкоглас
10
Похожие проекты
11
Сотрудничество
Санкт-Петербург
+7 (812) 648–81–25ул.
Б. Московская 1–3, офис 9
Москва
+7 (495) 008–81–25ул. Планерная 7, офис 5.6
Мы всегда рады сотрудничеству и новым проектам.
Опишите задачу, и мы с вами свяжемся.
Или напишите в Телеграм.
Давайте знакомиться!
Как вас зовут
Из какой вы компании
Опишите вашу задачу
Почта
Телефон
Бюджет
Загрузить файл, но не больше 10мб
Нажимая «Отправить», вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Ваша заявка успешно отправлена
Мы все изучим и скоро выйдем на связь
Как мы разработали сайт театра «Подорожник»
Результат Процесс
Театр «Подорожник» — с удовольствием и пользой проведенное время
Театр «Подорожник» носит звание «психологического» — здесь вашему ребенку (да и вам тоже, при надобности) помогут освободиться от комплексов, поупражняться в ораторском или актерском мастерстве.
Сибирикс
Людям, как ни странно, приходится жить в мире других людей — подстраиваться под правила жизни, впитывать в себя опыт, собственный и книжный, ошибаться и находить верные решения. Этот процесс психологи называют «социализацией» и длится он всю жизнь.
Поэтому одно из условий успешности — уметь находить контакт с другими, общаться, постепенно избавляясь от комплексов и нерешительности. Социализация начинается с самого рождения человека и миссия родителей — помочь ребенку найти себя в мире, развить задатки способностей и преодолеть страхи.
Театр «Подорожник» не зря носит звание «психологического» — здесь вашему ребенку (да и вам тоже, при надобности) помогут не просто освободиться от комплексов, поупражняться в ораторском или актерском мастерстве. Всё это будет сопровождаться беседами с доброжелательным психологом.
Задача: Разработать сайт для психологического театра «Подорожник».
Дизайнерскую часть немного облегчало активное участие самого заказчика в разработке концепции (мы получили документ с подробным описанием иллюстрации на главной странице).
Решение: В нашем случае задача была достаточно нетривиальной — скетч нужно было проработать до степени готовой иллюстрации. Таким был отправлен заказчику на рассмотрение первый вариант:
Иллюстрация выполняла еще и роль меню — при наведении на определенный заголовок должны были всплывать пояснения к нему, а картинка вокруг — окрашиваться.
Набросок был одобрен, приступаем к детальной проработке:
Три группы — подростки, дети в песочнице и родители на лавочке — театр предусмотрел «культурную программу» для всех возрастов. Усложняем композицию: добавляем фонтан, фотографа, девочку с мыльными пузырями:
Почти готово. Делаем последние «завершающие» штрихи, раскрашиваем нашу иллюстрацию.
После этого можно приступать к внутренним:
Важный момент в разработке: иногда бывают заказчики, не предоставляющие контент. Объясняются они тем, что «мы только планируем запускать производство, еще нет материала». Бывают менеджеры, которые забывают выудить из забывчивого заказчика этот контент. А бывают хорошие заказчики, которые сами снабдят студию контентом — не только текстовыми материалами, но и целым альбомом фотографий с видео.
Но в таком случае часто возникает проблема: фото-материалы оказываются не очень качественными, но уникальными — а это значит, что заменить их похожей картинкой с фотостока не получится.
Как быть студии?
Или соглашаться использовать добросовестно отснятые непрофессионалом фото, либо выезжать на фотосессию самим. Расстояние в несколько тысяч километров не должно смущать разработчика :)
Эти снимки сделал хороший московский фотограф Константин Грибов, благодаря его усилиям контент сайта значительно прибавил в качестве.
На сайт было решено прикрутить удобный элемент — календарь грядущих событий, синхронизированный с гугл-календарем заказчика. Такая фича позволила менять расписание занятий самым простым образом.
Добавляем опросник под новостной лентой (кстати, она разделена тегами по целевым аудиториям), дорабатываем мелочи, прорисовываем внутренние странички.
Полностью готовую анимированную иллюстрацию главной страницы, а также все подробности о деятельности театра смотрим на сайте www.psyteatr.ru.
Для сборки использовался 1С-Битрикс редакции «Стандарт».
Все фото-материалы предоставлены заказчиком
изображений подорожника | Скачать бесплатные картинки на Unsplash
Картинки подорожника | Скачать бесплатные изображения на Unsplash- A Photophotos 41
- Степка фотосколков 332
- Группа людей 4
Banana
Nature
.
Matt Bango
Unsplash+
Unlock
Птицы фотодикая птицадикая природа
CHUTTERSNAP
банан, глубина поля, бананы
–––– –––– –––– – –––– ––––– –– – –– –––– – – –– ––– –– –––– – –.
Eva Blue
abidjanivory coastadjamé market
Photoholgic
thailandpheko samet
Victor Kwashie
ghanabanana inn cita hiring servicesaccra
Scott Webb
Food images & picturescanadaontario
Lotte Löhr
Fruits images & picturesnutritionorganic
Henry Doe
produceHd pattern wallpaperscrop
Chris Ralston
bowlbreakfastminimal
Esperanza Doronila
Nature imagesTree images & picturesunripe
Christina Deravedisian
Leaf backgroundsHd black wallpapersTexture backgrounds
Abhijith S Nair
bugsvegetable
Théotim THORON
charentefranceinsect
Ralph (Ravi) Kayden
бананы транспорт на дорогебананы
Sandip Kalal
Hd pattern wallpapersstackplant
Sandip Kalal
Hd green wallpapersbunch of bananasbean
Daniel Mensah Boafo
Hd grey wallpapersHd white wallpaperseditorial
Leo Chane
textures&patternsHd wallpapersveins
Kelly Sikkema
mealWomen images & picturesappetizer
Nicolás Varela
водопад игуасумианиатюраHd тропические обои
Птицы фотодикая птицадикая природа
abidjanivory coastadjamé market
Fruits images & picturesnutritionorganic
bowlbreakfastminimal
Leaf backgroundsHd black wallpapersTexture backgrounds
charentefranceinsect
Hd pattern wallpapersstackplant
Hd grey wallpapersHd white wallpaperseditorial
textures&patternsHd wallpapersveins
iguazu fallsmianiatureHd tropical wallpapers
–– –– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.
bananadepth of fieldplantains
thailandpheko samet
ghanabanana inn cita hiring servicesaccra
Food images & picturescanadaontario
produceHd pattern wallpaperscrop
Nature imagesTree images & picturesunripe
bugsvegetable
plantains transporton the roadbananas
Hd green wallpapersbunch of bananasbean
Связанные коллекции
Бананы
180 фотографий · Куратор Брет КаваноFruitilicious
68 photos · Curated by Angelique WBreakfast
47 photos · Curated by Steph FlynnmealWomen images & picturesappetizer
Birds imageswild birdwildlife
thailandpheko samet
Food images & picturescanadaontario
bowlbreakfastminimal
Обои с рисунком Hd0010 FoodWomen Images & PictureAppetizer
Bananadepth of Fieldplantaines
Ghanabanana Inn Cita Servicesccra
Fruits Images & PicturesNutritionorgic
Nature Imagestree Images & PicturesUnripe
WarenteFranceInsct Nature
.
– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.
абиджанское побережье слоновой кости рынок аджаме
производитьобои с рисунком HDурожай
Листовые фоны. by Steph Flynn
Зеленые обои Hdbunch of бананыbean
Водопады ИгуасуmianiatureHd тропические обои
Просмотр премиальных изображений на iStock | Скидка 20% на iStock
Unsplash logoСделайте что-нибудь потрясающее
ПОЛОСКИ ПОМАХНИКА | Артисан Тропик
Сертифицированный Палео
Сертифицированный без глютена
Сертифицированный RSPO
100% беззерновой
Семейное владение и управление
Подтвержденный проект без ГМО
веган
Сертифицированное отсутствие остатков глифосата
Сертифицированный Палео
Сертифицированный без глютена
Сертифицированный RSPO
100% беззерновой
Семейное владение и управление
Подтвержденный проект без ГМО
веган
Сертифицированное отсутствие остатков глифосата
Вкус тропиков
Наши полоски подорожника на 100 % поставляются и производятся в Колумбии, Южная Америка!
Все закуски Artisan Tropic не содержат ГМО, палео, глютена, веганские продукты, не содержат остатков глифосата и сертифицированы RSPO (Круглый стол по экологичному пальмовому маслу).
БЕСПЛАТНАЯ ДОСТАВКА ПРИ ЗАКАЗЕ ОТ 100 $!
При распродаже или при использовании кода купона в вашей корзине может быть не более 6 товаров.
Artisan Tropic обрабатывает и отправляет заказы в течение 3 рабочих дней с даты покупки.
Любая дата поставки, указанная здесь, является приблизительной. Доставка осуществляется сторонними перевозчиками, и Artisan Tropic не несет ответственности за повреждение или утерю товара таким сторонним перевозчиком.
Artisan Tropic отправляет только товары со сроком годности не менее 45 дней.
ПРОДУКТЫ ARTISAN TROPIC, ПРИОБРЕТЕННЫЕ НА ЭТОМ САЙТЕ, НЕ ПРЕДНАЗНАЧЕНЫ ДЛЯ ПЕРЕПРОДАЖИ. НЕСОБЛЮДЕНИЕ СОБЛЮДЕНИЯ МОЖЕТ ПРИВЕСТИ К ЮРИДИЧЕСКОЙ ОТВЕТСТВЕННОСТИ.
Жители Калифорнии: Нажмите здесь, чтобы ознакомиться с Предложением 65
Что такое бананы?
Плантаны являются основным продуктом питания в Латинской Америке и Африке, и их часто путают с бананами.
Хотя они похожи, бананы крупнее и должны быть полностью приготовлены. Бананы могут быть солеными или, если их оставить дозревать, естественно сладкими.
Каковы преимущества закусок Artisan Tropic с подорожником и маниокой?
Все снеки Artisan Tropic не содержат ГМО, палео, глютена, веганские продукты, не содержат остатков глифосата и сертифицированы RSPO (Круглый стол по экологичному пальмовому маслу). Подорожник и маниока — вкусная и питательная альтернатива лепешке и картофельным чипсам.
Зачем использовать пальмовое масло?
Пальмовое масло на самом деле является самым эффективным растительным маслом, которое люди могут собирать. Пальмы могут производить в 4-10 раз больше масла, чем другие культуры на единицу площади. В отличие от других высокоочищенных растительных масел, пальмовое масло отлично подходит для приготовления пищи, так как его структура жирных кислот делает его чрезвычайно стабильным при высоких температурах.
Мягкий вкус и отсутствие запаха делают его идеальным ингредиентом для многих рецептов, а пальмовое масло обладает естественным консервирующим эффектом, что помогает продлить срок хранения пищевых продуктов.
Почему полоски, а не чипсы?
Наши длинные полоски делают эту закуску идеальной для окунания в гуакамоле или другую сальсу.
Посмотреть полный список часто задаваемых вопросов
Предложение 65 штата Калифорния (Предложение 65)
Предложение 65 – это уникальный закон штата Калифорния, требующий от предприятий предостерегать потребителей от продуктов, которые могут содержать поддающиеся количественному измерению количества более девятисот возможных химических веществ, включая свинец. Пределы Предложения 65 для свинца в некоторых случаях почти в 1000 раз ниже, чем «Нет значительных уровней риска» Агентства по охране окружающей среды. Из-за присутствия свинца в почве растения всех типов могут естественным образом содержать свинец и другие металлы в следовых количествах без каких-либо фальсификаций.
Хотя первоначально Предложение 65 имело хорошие намерения, оно было написано расплывчато и непродуманно, что теперь позволяет множеству оппортунистических юристов использовать в своих интересах ничего не подозревающих розничных продавцов и производителей, отправляя шквал уведомлений о содержании свинца в пищевых продуктах и стремясь получить денежную прибыль в виде очень дорогостоящее урегулирование (более 26 миллионов долларов в расчетах только в 2015 году). Большинство компаний могут доказать, что уровень бессмысленно низкий, но делать это в суде очень дорого. Таким образом, большинство компаний в конечном итоге соглашаются, даже если они не несут ответственности, чтобы избежать судебных издержек.
Компания Artisan Tropic недавно узнала, что в соответствии с Предложением 65 плантаны и маниока были добавлены в их список продуктов, которые могут содержать поддающиеся количественному измерению количества более девятисот возможных химических веществ, включая свинец. Хотя мы считаем, что наши продукты соответствуют Предложению 65, мы не в состоянии нести финансовое бремя, чтобы вести эту судебную тяжбу в суде.
