Поиск банкоматов
Спроектировал с нуля фичу пополнения счёта и снятия наличных через банкоматы
Моя роль
Продуктовый дизайнер
За что отвечал
In-depth Research, UI/UX/IxD, User Testing
Аудитория
Пользователи приложения
Платформа
IOS, Android
О проекте
Контекст
ATM Locator позволяет держателям карты находить банкоматы по всему миру внутри приложения. VRL Locator расширяет функциональность: держатель предоплаченной карты VISA может пополнить счёт через терминал продавца
Проблемы
Задача пришла со стороны бизнеса и формулировалась через конкретный пробел в продукте: текущая версия приложения не позволяла держателю карты ни пополнить счёт, ни снять с него деньги
Цели проекта
Требовалось спроектировать функциональность, решающую сразу несколько задач
Пополнение и снятие средств
Обеспечить держателю карты возможность пополнять счёт и снимать средства напрямую через приложение.
Охват 200+ стран
Обеспечить поиск ATM и VRL точек в более чем 200 странах
Детальная информация о точке
Предоставить пользователю ключевые данные по каждой точке для принятия обоснованного решения
Построение маршрута
Дать возможность построить маршрут пешком или на автомобиле до выбранной точки
Исследования
Встреча со стейкхолдерами
Провёл рабочую встречу со стейкхолдерами, на которой обсуждалась проблема, формулировались задачи и определялся роадмап фичи
URD writing
Разработка User Requirement Document легла на меня отдельной задачей. На основе изучения Google Maps API, VISA API и бизнес-требований были определены ключевые данные, функциональность, элементы карты, фильтры и точки входа
Анализ конкурентов
Проведён конкурентный анализ в каждом из которых выявлены недостатки реализации с точки зрения нашего продукта. Дополнительно собраны основные паттерны поведения карты для дальнейшего проектирования
Договорились по метрикам
???
Проектирование
JTBD
За каждым заходом в приложение стоит конкретная ситуация. Мы выделили четыре основных сценариев и проектировали под них новую фичу
Когда я в незнакомой стране
Мне нужны наличные и я хочу быстро найти ближайший банкомат, поддерживающий мою карту, чтобы не тратить время на поиск через сторонние сервисы
Когда мне нужно пополнить счёт
Я хочу видеть на карте точки VRL рядом со мной, чтобы не искать банк или салон связи наугад
Когда я нашёл нужный банкомат
Я хочу сразу увидеть, как до него добраться пешком или на машине, чтобы не переключаться в другое приложение для построения маршрута
Когда я выбираю между несколькими банкоматами
Я хочу видеть ключевую информацию по каждому, комиссию, тип операции, часы работы, чтобы выбрать точку осознанно, а не методом проб.
User flow
Определены точки входа в функционал, на основе которых сформирован user flow по реализации
Артефакты экрана
Следующим этапом стало проектирование главного экрана включающего в себя множество артефактов, помогающих взаимодействие с картой и искать банкоматы
Google map
Основа экрана, на которой пользователь видит своё положение и все точки поблизости
Sheet
Список найденных точек с ключевой информацией и переходом в детали по каждой
Switcher
Переключатель между пополнением и снятием средств, разводит два сценария по разным поискам
Geolocation button
Возвращает карту к текущему положению пользователя в один тап
ATM pins
Отмечают точки ATM и VRL на карте, визуально отличаются от других объектов
User’s pin
Показывает, где сейчас находится сам пользователь, с учётом поворота телефона.
Карта
В процессе проектирования возникло множество вопросов, ответы на которые искались через пользовательские интервью и анализ аналогичных приложений
Какой уровень зума по умолчанию
От этого зависело, увидит ли пользователь себя и точки рядом сразу при открытии экрана, без лишнего скролла
Как ведет себя карта при зуме и свайпе
Нужно было решить, подгружаются ли новые точки на лету или только после остановки жеста
Как ведет себя карта при повороте устройства
Пин пользователя должен оставаться понятным ориентиром, а не терять направление при смене положения телефона
Как меняется зум при двойном тапе
Двойной тап типичный жест для приближения, и нужно было решить, до какого уровня он ведёт карту
Количество точек в шторке
Слишком длинный список перегружал бы экран, слишком короткий скрывал бы нужные точки
Поведение при отсутствии разрешения на геолокацию
Без разрешения карта не может центрироваться на пользователе, и экран не должен выглядеть пустым или сломанным
Sheet
Данные банкомата приоритизированы на основе пользовательских интервью и структурированы в карточке с сортировкой и фильтрами. Для отдельной точки спроектирована расширенная шторка с двумя ключевыми действиями: поделиться геолокацией и построить маршрут через нативную навигацию
Switcher
Основная функция свитчера, разделение сценариев пополнения и снятия средств.
Atm PINS
Стандартные пины Google сэкономили бы время. Выбрал кастомные, потому что на карте кроме банкоматов появятся бизнесы и достопримечательности, а пины должны отличаться друг от друга
Geolocation button and user pin
Данные элементы и паттерны взаимодействия реализованы средствами Google, что позволило сэкономить время всей команде на этапе разработки
Результаты
Итоги проекта
По итогам нескольких итераций визуальный дизайн фичи был утверждён, ниже представлена первая версия на момент завершения работы. Для разработчиков подготовлена спецификация, включающая все флоу и необходимую для реализации информацию
Написал спецификацию для разработки
Подготовил спецификацию для команды разработки, включающую все флоу, состояния экрана и логику взаимодействия элементов, необходимую для реализации фичи
Что было дальше
Стартап закрылся до того, как удалось собрать данные по эффективности фичи. Проект в первую очередь дал опыт работы с большими массивами данных и геолокацией, который применяю в следующих задачах.
Phone
Email