Карта для поиска банкоматов
Как я с нуля спроектировал функцию поиска банкоматов в мобильном приложении
О проекте
Контекст
ATM Locator ищет банкоматы по всему миру прямо в приложении. VRL Locator показывает, где держатель предоплаченной карты VISA может пополнить счёт через терминал кассира в магазинах-партнёрах.
Продукт строился в стартапе. Ни времени, ни людей на отдельное исследование не было, функции собирали с нуля. Поэтому каждое решение я проверял одним вопросом: снимает ли оно риск для разработки?
Продукт строился в стартапе. Ни времени, ни людей на отдельное исследование не было, функции собирали с нуля. Поэтому каждое решение я проверял одним вопросом: снимает ли оно риск для разработки?
Проблемы
Запрос пришёл от бизнеса и описывал конкретную дыру. Приложение не позволяло ни пополнить счёт, ни снять деньги
Цели проекта
Перед стартом сверились с бизнесом и зафиксировали, что приложение должно закрыть в первую очередь
Пополнение и снятие средств
Держатель карты должен находить место, где можно пополнить счёт или снять деньги
Охват 200+ стран
Поиск ATM и VRL точек в 200+ странах
Детальная информация о точке
По каждой точке пользователь должен видеть ключевые данные, чтобы выбирать осознанно
Исследования
Встреча со стейкхолдерами
Провёл рабочую встречу. Разобрали проблему и определили роадмап фичи
Написание URD (User Requirement Document)
Документ писал отдельной задачей. Изучил Google Maps API, VISA API и требования бизнеса. Из них собрал данные, функциональность и элементы карты. Отдельно описал фильтры и точки входа
Данные по точкам решил брать напрямую из Visa API, без собственной базы. Информация обновляется сразу, а команде не нужно строить и поддерживать хранилище точек
Разделил функциональность на текущую и будущую версию. Сейчас VRL только пополняет, банкоматы только выдают деньги. Пополнение через банкоматы, поиск по адресу, кластеризацию пинов и часы работы отложил
Данные по точкам решил брать напрямую из Visa API, без собственной базы. Информация обновляется сразу, а команде не нужно строить и поддерживать хранилище точек
Разделил функциональность на текущую и будущую версию. Сейчас VRL только пополняет, банкоматы только выдают деньги. Пополнение через банкоматы, поиск по адресу, кластеризацию пинов и часы работы отложил
User Requirement Document
Google API
Анализ конкурентов
Разобрал конкурентов и записал, где их решения не подходят нашему продукту. Паттерны поведения карты собрал отдельно: на них опирался в проектировании
Анализ конкурентов
Что по метрикам
Продуктовой аналитики в стартапе не было, целевых показателей у фичи тоже. Критерием готовности стали цели из брифа: пополнение, снятие, охват 200+ стран и данные по точке
Проектирование
JTBD
Выделил четыре ситуации, в которых человек открывает приложение, и проектировал фичу под них
Когда я в незнакомой стране
Мне нужны наличные. Хочу быстро найти ближайший банкомат, который принимает мою карту
Когда мне нужно пополнить счёт
Хочу видеть на карте точки VRL рядом со мной
Когда я нашёл нужный банкомат
Хочу сразу увидеть, как добраться до него пешком или на машине
Когда я выбираю между несколькими банкоматами
Хочу видеть процент комиссии и типы операций
User flow
Определил точки входа в функционал и построил по ним user flow для реализации
User flow
Главный экран
Спроектировал главный экран. Каждый его элемент либо помогает найти банкомат, либо упрощает работу с картой. Все элементы собираются средствами Google Maps, без отдельной фронтенд-разработки в клиентских приложениях
Карта
Основа экрана. На ней пользователь видит свою геолокацию, ближайшие банкоматы и точки VRL
Шторка
Список найденных банкоматов и точек VRL с ключевой информацией
Переключатель
Разводит пополнение и снятие по разным флоу
ATM pins
Отмечают на карте точки ATM и VRL и выделяются среди других объектов. Стандартные пины Google сэкономили бы время. Но на карте будут бизнесы и достопримечательности, и банкоматы должны от них отличаться. Выбрал кастомные
Какие были сложности
Вопросов по поведению карты накопилось много. Ответы искал в быстрых интервью с пользователями и в разборе похожих приложений
Какой уровень зума по умолчанию
От него зависело, увидит ли пользователь себя и точки рядом сразу при открытии, без лишнего скролла
Как ведёт себя карта при зуме и свайпе
Нужно было выбрать: подгружать точки на лету или только после остановки жеста
Как ведёт себя карта при повороте устройства
Пин пользователя должен оставаться понятным ориентиром и не терять направление
Как меняется зум при двойном тапе
Двойной тап привычно приближает карту. Я определил, до какого уровня
Количество точек в шторке
Длинный список перегружает экран. Короткий прячет нужные точки
Поведение без разрешения на геолокацию
Карта не может центрироваться на пользователе, и экран не должен выглядеть пустым или сломанным
Что ушло в прод
Итоги проекта
Дизайн прошёл несколько итераций. Визуальное решение утвердили и запустили в прод
Написал спецификацию для разработки
Подготовил спецификацию для команды разработки: все флоу, состояния экрана и логика взаимодействия элементов
Спецификация
Что было дальше
Стартап закрылся, прежде чем удалось собрать данные по эффективности фичи