Vngrd. News&Blog

Как мы делали карты отделений банка

В один момент нам пришлось разрабатывать одну страницу для банка — отделения и банкоматы. Первая мысль - всего одна небольшая страница, переделать только 2 объекта — список и карту, работы вроде не много, но в процессе, оказалось совсем не так просто
.

Какие задачи были поставлены клиентом:


1. В частности, на данный момент масштабирование и группировка объектов на карте не нравится. По ощущениям группировку можно сделать более логичной.
2. Не очень хорошо продумана подача информации на карточке отделения (короткая версия в поп-апе и полной версии).
3. Не очень прозрачно реализован функционал фильтрации, требуется доработка сценария применения фильтров, возможно предложить другое отображение.
4. Отсутствует поиск отделений и банкоматов по схеме метро.
5. Хотелось бы добавить интересный функционал, как например «проложить маршрут» и т.д.
6. Плохо реализовано отображение банкоматов банков-партнеров.
7. Необходимо придумать решение, как отображать время работы одного отделения для физических и юридических лиц, если оно различно."


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


Какие задачи мы поставили перед собой:


1. Проанализировать страницу Банкоматов и Отделений и разработать оптимальный пользовательский сценарий по поиску ближайшего банкомата/отделения.
2. Провести исследование конкурентной среды. В выборку для анализа попали не только проекты банковского сектора, но так же почтовые сервисы, сервисы поиска недвижимости и другие, где использовались списки и карты..
3. На основе аудита и аналитики выделить целевую аудиторию в две персоны типового пользователя раздела.
4. Создать прототипы нового функционала.
5. Перенести прототипы в дизайн, руководствуясь общей стилистикой сайта raiffeisen.ru, сопроводить материалы небольшим текстовым обоснованием.


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


Как выглядел раздел, на момент начала работ


image


С какими проблемами мы столкнулись


-проблема с картой метро, заключалась в том, что есть привычные схемы метро (на примере схемы Москвы) которые не ложились на обычную карту, а значит надо было или разделять на 2 отдельные вкладки, или продумать кардинально другой принцип

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

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


Анализ


Опрос людей так же дал не очень радужную статистику, при том, что банковском продуктами пользовались более 90% опрошенных, все как в один голос заявили, что не пользуются разделом карты/списка отделений и банкоматов, только лишь про более глубоком анализе использования сайта банка, были выявлены случае, когда данный раздел был полезен (оказался в новом месте, привычное отделение закрыто, или не оказывает нужные услуги - все это экстренные или единичные случаи).

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

image

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

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

Для этих персон мы разработали сценарий — User Journey Map.


Техническая часть


Дальше мы начали знакомится с последними обновлениями Яндекс карт (так как именно этот сервис использует клиент), и что с помощью этих инструментов можно реализовать.

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

На тот момент я часто пользовался Яндекс картой, чтобы знать — схема метро там реализована и решаем минус поставленной задачи. Только по прошествии нескольких дней пришла идея реализации поставленной задачи (картинка) ставить отдельные метки станций метро непосредственно на основу Яндекс карты, и показывать метки банкоматов и отделений в заданном радиусе от станции метро.

image


Что ещё было реализовано:


Вместо кнопки определения местоположения по GPS на десктопной версии (которая не всегда корректно работает) мы решили сделать метку, которую можно перемещать по карте и вручную задавать свое местоположение и радиус поиска.

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

image


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

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

Карточки объектов поменяли положение с расположения поверх пина объекта, на выезжающую боковою зону. что позволило сделать её более информативной, добавить время работы, а на мобильной версии все это уместилось в карусели (услуги и время работы).

image


Добавили функцию построения маршрута и сохранения или передачи на мобильный телефон (в десктопной версии).

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