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