От типографики до насмотренности: навыки UX-дизайнеров в финтехе
На этой странице

Чем занимаются UX-дизайнеры в Газпромбанке?

Как работают платформенные дизайнеры в Газпромбанке?

Из чего состоит дизайн-система?

Как работают продуктовые дизайнеры в Газпромбанке?

Как попасть в команду и какие навыки нужны?

Основы дизайна и насмотренность

UX/UI, или умение проектировать взаимодействие пользователя с продуктом

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

Самый важный soft skill дизайнера



Тэги
карьера дизайн финтех
От типографики до насмотренности: навыки UX-дизайнеров в финтехе

UX-дизайнеры в финтехе — это уже давно не просто исполнители, которые по техническому заданию создают картинки для рекламы, делают макеты лендингов и перекрашивают кнопки в приложении. В этой статье рассказываем о том, как устроена работа дизайнеров в Газпромбанке и какие скилы у них есть.

Чем занимаются UX-дизайнеры в Газпромбанке?

UX-дизайнеры делятся на две команды — платформенные и продуктовые.

Платформенные отвечают за дизайн-систему компании и работают над голосом бренда. Эта команда создает базу для дизайна в Газпромбанке, например набор кнопок определенных цветов и форм, шрифтовые пары или шаблоны для фотографий.

Дизайн-системой пользуются продуктовые дизайнеры. Раньше их делили по функциональности, например на веб и мобайл. Сейчас такое разграничение устарело. Дизайнеров не распределяют по каналам — они входят в команды, которые отвечают за продукты.

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

Екатерина Гостева

Главный дизайнер.

Команда дизайнеров в Газпромбанке считает, что любой дизайн — это язык коммуникации, у которого две цели:

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

Как работают платформенные дизайнеры в Газпромбанке?

Платформенные команды разрабатывают визуал интерфейса. Одно из направлений работы — создание дизайн-системы. О том, как она устроена у Газпромбанка, рассказала дизайнер Катерина Молявка.

Из чего состоит дизайн-система?

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

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

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

В дизайн-системе есть такие уровни:

Элементы

Это мельчайшие единицы дизайн-системы, например цвета, шрифты, скругление углов. Цвета собраны в палитру, стили шрифтов — в типографику. Еще в системе есть небольшие картинки, которые графически обозначают части интерфейса — иконки.

Компоненты

Здесь объединены базовые элементы, из которых продуктовый дизайнер может собрать свой сценарий. Он может скопировать готовый компонент из дизайн-системы и использовать в работе над интерфейсом.

Шаблоны

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

В дизайн-системе есть версионность. Это значит, что каждый участник процесса может посмотреть, какой статус при разработке у компонентов и элементов системы. Например, если разработка элемента идет полным ходом, дизайнер будет ставить статус «в работе». А если работа закончена, статус «завершено».

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

Катерина Молявка

Дизайнер.

Как работают продуктовые дизайнеры в Газпромбанке?

Дизайнеры вместе с маркетологами анализируют клиентский путь на действующих страницах и улучшают его. Главный дизайнер Олег Фогель рассказал о том, как команда Газпромбанка меняла страницу Умной дебетовой карты.

Как было? 

Раньше на странице Умной карты был блок с популярными вопросами и ответами на них. Задумывалось, что задача этого блока — помочь пользователю быстро найти нужную информацию. Со временем его начали использовать как набор аккордеонов, где размещали вообще все сведения о карте, с самыми мелкими подробностями. 

В разделе FAQ появились условия оформления, правила начисления кешбэка, доступные города доставки

Как показали респондентские исследования, пользователям на такой странице было сложно ориентироваться.

Как стало? 

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

Блок с вопросами и ответами на странице дебетовой Умной карты сохранили в виде аккордеона и выделили для него отдельный таб в структуре страницы

Какие результаты? 

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

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

Олег Фогель

Главный дизайнер.

Как попасть в команду и какие навыки нужны?

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

Важные навыки, без которых тестовое не выполнить: насмотренность, умение проектировать, навыки типографики.

Основы дизайна и насмотренность

Олег Фогель говорит, что дизайнер должен разбираться в азах. Например, понимать, что такое «разредить» или «добавить воздуха», знать всё о композиции и иерархии. Эту базу обычно получают на первых курсах вузов. Если у дизайнера нет профильного образования, можно найти литературу об основах дизайна.

UX быстро меняется, поэтому владеть только теорией и основой мало. Команда продуктовых дизайнеров Газпромбанка рекомендует развивать насмотренность и анализировать рынок.

Смотрите, что делают конкуренты или крупные игроки на рынке. Например, мне нравилось следить за тем, как менялся интерфейс Notion: еще пару лет назад о компании мало кто знал, а теперь это привычный рабочий инструмент для многих диджитал-специалистов. Здесь важную роль сыграли перемены в интерфейсе.

Екатерина Гостева

Главный дизайнер.

Когда смотрите сайты конкурентов, важно не просто пробежаться по экранам прокрутки глазами и закрыть сайт или приложение. Постарайтесь проанализировать решения. Найдите плюсы и прикиньте, как этот дизайн можно адаптировать под продукт вашей компании. Выявите минусы и подумайте, как их избежать.

Чтобы тренировать насмотренность, Олег Фогель рекомендует такой алгоритм:

  1. Откройте Dribbble, Behance, Awwwards или The FWA.
  2. Отсортируйте выдачу по популярному или лучшему.
  3. Выберите работы, которые больше всего понравились.
  4. Проанализируйте их — оцените расположение объектов, шрифты, цвета, графические элементы и прочие детали.
  5. Сделайте это рутиной. Почистили зубы — посмотрели Dribbble.

UX/UI, или умение проектировать взаимодействие пользователя с продуктом

Этот навык складывается из понимания трех вещей:

  • Что такое пользовательский путь, какие у него есть слабые и сильные места.
  • Какие потребности клиент пытается решить, когда находится на сайте или в приложении компании.
  • Какой интерфейс для таких клиентов окажется понятным и дружелюбным.

Смысл работы дизайнера — решить задачу клиента. В первую очередь важно думать о том, как сделать просто и понятно. Если попутно получится сделать красиво — здорово, если не получится — не так страшно. Главное, чтобы клиент мог пройти путь от начала до конца и ни на чем не запнуться.

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

Дизайнеру в Газпромбанке нужно разбираться в типографике. Например, знать про совместимость шрифтов.

Дизайнер, который занимается продуктовыми интерфейсами, должен понимать, что в 90% случаев коммуникация с клиентом происходит через слово и цифры.

Быстро разобраться в этом можно по книгам:

«Пиши, сокращай» Максима Ильяхова и Людмилы Сарычевой;

«Ясно, понятно» Максима Ильяхова;

«Этой кнопке нужен текст. O UX-писательстве коротко и понятно» Кирилла Егерева.

Олег Фогель

Главный дизайнер.

Самый важный soft skill дизайнера

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

1. Чтобы не переделывать.

Дизайнерам важно создавать интерфейс с оглядкой на технические возможности: не все удобные, красивые и современные решения можно реализовать. Причины могут быть разными, среди них — ограничения платформ или внутрибанковские правила. Например, блюр — эффект размытия — можно реализовать на всех айфонах, но не на всех смартфонах на Android.

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

2. Чтобы работать продуктивно.

Команда считает, что дизайнерам нужно быть открытыми и искренними:

  • если не понял задачу, задать вопросы;
  • если не разобрался в теме, попросить помощи у коллег.

Бывает, что вопрос кажется совсем глупым, поэтому задавать его неловко. Но обычно глупые вопросы — самые верные и нужные.

3. Чтобы не конфликтовать с командой.

Продуктовые команды работают сообща. С одной стороны, дизайнерам нужно быть готовыми к критике коллег, с другой — уметь отстаивать свои решения.

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

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

Другие статьи по теме

27 Апреля, 2022

Геоплатформа: как в Газпромбанке работают с пространственными данными

Рассказываем, как в Газпромбанке работают с пространственными данными.

Читать

29 Марта, 2022

Нейросеть в деле: как в Газпромбанке устроен мониторинг финансовых учреждений

Рассказываем, как система мониторинга финансовых учреждений экономит время сотрудников Газпромбанка

Читать

11 Февраля, 2022

Чем занимаются UX-редакторы и зачем они нужны в банке

Рассказываем о специфике профессии и о том, чем такие специалисты занимаются в Газпромбанке.

Читать

28 Января, 2022

Что такое технология распределенных реестров и как она применяется в финтехе

Рассказываем, как и зачем используют технологию распределенных реестров в финтехе.

Читать

26 Января, 2022

Как открытые API используются в финтехе: опыт Газпромбанка

Рассказываем, что такое открытые API и как они упрощают жизнь банку, его партнерам и клиентам.

Читать

30 Декабря, 2021

Три истории — три пути развития: как стать IT-партнером

Нет одного пути, чтобы стать IT-партнером. Опыт сотрудников Газпромбанка это доказывает.

Читать