«Ценная практика — пойти в отделение и спросить у клиентов, что они думают о твоём интерфейсе» — Сессия вопросов и ответов с дизайн-командой «Сбербанка»

Внутренняя дизайн-команда департамента «Банк XXI» «Сбербанка», занимающаяся цифровыми продуктами для розничных клиентов, за последние годы сильно обновила мобильные приложения «Сбербанк Онлайн». Редакция рубрики «Интерфейсы» запустила сессию вопросов и ответов AMA (ask me anything) с арт-директором департамента «Банк XXI» «Сбербанка» Дмитрием Щегловым и другими членами команды.

Сбербанк — огромная организация с кучей подразделений. Как устроена ваша команда, над какими продуктами работает? Как вы связаны с другими командами — тем же »СберТехом»?

Дмитрий Щеглов: Я арт-директор департамента «Банк XXI» «Сбербанка». Большинству плоды нашей работы прекрасно знакомы. Наша команда дизайнеров работает как над мобильными приложениями «Сбербанк Онлайн» для всех платформ, так и над совершенно новыми сервисами, например, «Кошелёк от Сбербанка».

В нашей команде есть и ребята, которые формально числятся в «Сбербанк Технологии», но по факту бизнес и разработка у нас уже давно вместе и неразлучны. Помимо нас есть ещё и другие команды дизайнеров и в «Сбербанке», и «Сбертехе» (ребята занимаются международными, корпоративными и другими продуктами). Но сейчас рупор в руках у «Банка XXI», именно от лица нашей команды я и буду отвечать.

28950daa621734.jpg

Команда и рабочее пространство

А где можно посмотреть ваши работы

Дмитрий Щеглов: «Сбербанк Онлайн», «Мессенджер от Сбербанка», «Кошелек от Сбербанка».

Скриншоты продуктов

Как вы взаимодействуете с продуктовой командой? Сидят ли дизайнеры вместе или погружены в продукт?

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

Это здорово помогает горизонтальной синхронизации по дизайну, но есть один существенный минус: дизайнер выпадает из операционного ритма своей продуктовой команды. Отсюда последствия — едут сроки, ревью дизайна после верстки, но не в моменте и прочее.

Сейчас мы пробуем новый подход — все дизайнеры распределены по продуктовым командам и больше не находятся в «вакууме». Каждый сквод походит на небольшую команду страстных стартаперов, со своим генеральным директором, аналитиком, программистом, дизайнером и прочее.

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

Вы работаете по Agile, в маленьких командах. В постах выше вы сказали, что в сквод входит генеральный директор, аналитик, программист, дизайнер и прочее. Как вы определяете роль дизайнера? Какими скиллами он должен обладать? Аналитик — это бизнес-роль?

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

Дизайнеру нужно уметь рисовать макеты и пользоваться инструментами для дизайна, задавать вопросы аналитикам, если аналитика неполная, общаться с программистами, если что-то сразу не было передано, и отвечать на вопросы, презентовать дизайн. Мы уже давно не разделяем роли UX- и UI-дизайнеров — дабы не делать работу дважды.

Каждый дизайнер должен быть способен переварить документацию в визуальный язык. Благо, аналитики ведут «wiki» в конфлюенсе, избегают read-only документации во много страниц, приводят примеры и аналогии из индустрии.

Дизайнер здесь зачастую тоже подключается на ранних этапах формирования требований к back-end’у и так далее. Генеральный директор — это product owner, здесь просто аналогия со стартапом. У продукта есть владелец, есть производство. Product owner чувствует, переживает за свой продукт.

Аналитик в скводе — это тот, кто переводит бизнес-задачу на язык реализации. Если имеется в виду «бизнес vs разработка», то аналитик — это не бизнес-роль.

Получается, что дизайнер работает в связке со всеми специалистами своей команды, а дизайн-решения проверяются на тестировании, или сначала арт-директор «дает добро»? И просто, чтобы уточнить — в команде один дизайнер-проектировщик? То есть специалист умеет не только картинки рисовать, но и анализировать, проводить тестирования и прочее. Как вы смотрите на разделение этих ролей на несколько человек? Ведь это мешает качественному результату, или нет?

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

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

Как аналитика встроена в процесс создания продуктов? Какие количественные метрики у вас стоят? Какие качественные методы исследования вы используете? Как подбираете респондентов? Есть ли концепция будущего? Можно ли тестировать концепты и как? Куда стремитесь в диджитале? Соблюдаете ли преемственность каналов?

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

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

Тамара Немировская: Из качественных исследований у нас в основном присутствуют юзабилити-тестирования. Тестирования проходят в трех форматах: коридорные, фундаментальные и с «экспертами».

a7c67bc6ae7907.jpg

Сессии тестирования

Коридорные тестирования помогают при тестировании небольших сценариев или незначительных модернизациях интерфейса, когда ответ нужен срочно. Тестируем в столовой, в фойе основного офиса, в заведениях. Очень помогает наличие на территории офиса отделения «Сбербанка», аптеки и магазина с сувенирами — там быстро можно найти пользователей не из банковской сферы.

Когда накапливается несколько сценариев, которые надо тестировать уже более глобально и фундаментально, то мы обращаемся к рекрутинговому агентству, которое помогает нам с подбором респондентов. И тогда на сторонних людях тестируем интересующие нас сценарии уже более тщательно.

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

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

Таким образом находятся не все проблемы интерфейса, но наиболее критичные, а также получаются интересные инсайты и идеи для текущего решения. Такие респонденты относятся к продвинутым пользователям, но если у них где-то возникают затруднения, то и у обычных пользователей в этих местах точно возникнут проблемы. В основном такой вид тестирования применяется не для мобильного приложения, а когда к нам для тестирования обращаются ребята, делающие веб-СБОЛ.

Во-первых: «На входе мы уточняем, на каких пользователей мы ориентируемся» — у кого уточняем? Во-вторых: «И в этом нам очень помогает аналитика» — какая? В-третьих: «Пойти в отделение банка и спросить у реальных клиентов» —, а если они не ваша целевая аудитория?

Екатерина Чистякова: Во первых, у аналитика, Product Owner-а, бизнеса. Нам важно понимать, на какую аудиторию направлены задачи бизнеса в том числе. Во-вторых, продуктовая аналитика. В третьих, мы делаем цифровые продукты для розничных клиентов, которые и приходят в наши отделения. Кого именно мы спрашиваем — это зависит от задач.

Где вы собираете фидбек пользователей — по обновлениям, фичам? Как его обрабатываете? У вас есть какая-то специальная «копилка» идей от пользователей?

Тамара Немировская: Мы постоянно мониторим комментарии в сторах: смотрим, что нравится пользователям, что не нравится. Таким образом скорее получается отследить то, что пользователей не устраивает, так как положительными эмоциями делятся реже. Смотрим сравнительные отчеты различных агентств, чтобы понимать, что лучше у нас, а что у наших конкурентов. Хорошие идеи из всех этих источников уходят в бэклог, откуда позже они достаются и попадают в разработку.

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

Екатерина Чистякова: «Сбербанк», несомненно, меняется. Сейчас мы уходим от сложной иерархии в сторону плоской структуры, кросс-функциональности команд, быстрой разработке MVP и получению быстрой обратной связи от клиентов.

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

На демо (презентацию результатов работы за спринт) каждого продукта в любой момент может прийти любой человек — от председателя правления до программиста из соседней команды и дать свои комментарии.

Что происходит, если вы не согласны с их комментариями? Может быть, опишете пару типовых сценариев?

Екатерина Чистякова: По разному, зависит от конкретной ситуации. Многое берём на заметку. По сути комментарии — те же гипотезы, которые мы обдумываем, обсуждаем, проверяем.

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

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

Есть ли место в разработке интерфейсов креативу, трендам и wow-эффекту или всё четко и по полочкам?

Дмитрий Марков: Порой мы рисуем смело то, что в голову придёт, и случается, что это становится основой для будущих интерфейсных решений. А иногда какой-то смелый макет нравится дизайнерам и product-owner’у, но после презентации бизнес-заказчикам этот вариант начинают перерабатывать, приземлять.

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

Примеры нестандартных решений, экспериментов

Имеет ли влияние на бизнес-процесс проектировщик? Если да, приведите пример. Как оцените работу над этим?

Анна Кучуганова: Если под влиянием на бизнес-процесс понимать то, может ли дизайнер (он же у нас и проектировщик) повлиять на то, каким будет конечный продукт, то да, конечно, иначе зачем мы здесь? Сразу оговорюсь, что процесс этот, конечно, не быстрый, но с переходом на Agile изменения и импрувменты стали проходить проще.

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

Решения проходят UX-тестирование (о нём ребята уже писали выше), затем дорабатываются. Есть регулярные встречи с продакт-оунерами от бизнеса, и в интересах дизайнера самостоятельно их назначать, чтобы презентовать и защищать свои идеи для синхронизации.Вообще мы за доверие внутри команды, и идём к тому, чтобы сделать согласования максимально короткими по времени. Сейчас этот процесс ещё идёт.

Кто, как и кому защищает дизайн новый фишек?

Дмитрий Марков: Смотря что имеется ввиду под фишками.

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

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

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

Как продуктовая команда работает с теми, кто отвечает за бренд? Есть ли визуальный язык Сбербанка, который связывает бренд и продукт?

Дмитрий Марков: У нас есть отдел маркетинга — с ним мы согласовываем свои действия, которые потенциально могут отходить в сторону от основного бренда. Сами мобильные продукты «Сбербанк Онлайн«или, например, «Кошелёк» имеют свои собственные бренды, которые словно наследуют характерные черты у основного бренда «Сбербанка».

43fa97a976a959.jpgРазные бренды «Сбербанка»

Ваша работа влияет на бренд? Меняется ли он, исходя из потребностей продукта?

Дмитрий Марков: На бренд в целом — конечно, ещё как влияет. Если понимать бренд в самом общем смысле. Мы делаем мобильное приложение «Сбербанка», пользователям оно нравится, и это положительно выстраивает их отношение к «Сбербанку» как к бренду, даже если до этого о «Сбербанке» у них было плохое впечатление из-за каких-то дурацких ситуаций с переводами или, скажем, в отделении.

c0ba9ea89fa498.jpgПровязка бренда с интерфейсом

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

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

Можете ли назвать ключевые моменты в интерфейсах «Сбербанка», через которые вы транслируете язык или создаете ощущения от бренда в продуктах? Есть ли важный компонент бренда в продуктах, помимо логотипа, цвета и шрифта, который является отличительной особенностью «Сбербанка», на ваш взгляд?

Дмитрий Щеглов: Я бы не назвал какой-то один компонент ключевым. Это комплекс решений, которые создают уникальный для бренда стилистический тон. Самая очевидная связка «логотип = бренд» не совсем работает в интерфейсах. Важен контекст.

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

Излишне навязывать себя мы не хотим, напротив — максимально адаптируем интерфейс и кастомизируем его автоматически в зависимости от контента клиента. Логотип при этом присутствует лишь в тех местах, где необходим гарант финансовой надежности и безопасности — одно из главных качеств «Сбербанка».

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

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

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

Хорошее проверочное упражнение: взять несколько популярных программ, полностью «обезвожить» интерфейс, оставив лишь геометрию и начать играть в «угадай app». Вы наверняка угадаете и Uber, и Facebook, и «Сбербанк».

Как вы экспериментируете с трендами — те же боты в мессенджерах, носимая электроника? Как они попадают в основные продукты?

Дмитрий Марков: В общем, ничего удивительного, создание этих продуктов — это желания пользователей и воля бизнеса. Мессенджеры популярны? Рынок носимой электроники стремительно растёт? Значит, нужно делать!

Может быть, есть какие-то конкретные примеры?

Максим Рыжов: Всегда, когда мы говорим о трендах, мне приходит на ум выражение Льюиса Кэрролла: «Нужно бежать со всех ног, чтобы только оставаться на месте, а чтобы куда-то попасть, надо бежать как минимум вдвое быстрее». Очевидно, если мы не проверяем наши гипотезы, не ставим эксперименты, не ошибаемся как можно раньше и не делаем всё вышеперечисленное очень быстро — мы становимся заложниками своей скорости.

И до недавнего времени нашей небольшой команде не удавалось в полной мере продемонстрировать индустрии весь наш потенциал. Об этом свидетельствует и довольно поздний запуск «Сбербанк Онлайн» для Apple Watch относительно других банков, и на данный момент отсутствие отдельной версии нашего приложения для Android Wear.

f60bf082a14899.jpgПриложения для часов

Но всё меняется благодаря трансформации самого «Сбербанка» и появлению большого количества отдельных небольших и независимых команд внутри компании. Мы станем более гибкими и быстрыми. Так, до конца этого года команда под кодовым названием «Новые Форм-Факторы» значительно доработает текущую версию «Сбербанк Онлайн» для Apple Watch, а позже создаст отдельную версию нашего приложения и для Android Wear.

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

Юрий Герасименко: Мы создали бота для Telegram. Помимо базовых информационных сервисов (курс валют, банкоматы и так далее), бот умел продавать букеты цветов, отправлять открытки на 14 февраля (2500 штуки в день) и помогал учитывать пользователям свои доходы и расходы.

8f75a930ab2cbb.jpgСкриншот Telegram-бота от «Сбербанка»

В том числе на ранних стадиях мы запускали исследования, используя только концепт продукта. Всё это показало неплохие результаты и помогло нам экспериментировать как с UX, так и получить опыт подключения поставщиков услуг в чат.

Года три-четыре назад было модно внутри интернет-банков запускать PFM-сервисы. Сейчас мода, кажется, пошла на спад. Что вы думаете о будущем таких сервисов? Нужны ли они реально людям? Как сделать, чтобы ими пользовались? Будут ли востребованы более сложные функции, чем учёт денег, если многие клиенты имеют низкую финансовую грамотность?

Дмитрий Щеглов: Отличный вопрос. Тут понятие, скорее, не моды, а потребностей пользователей. Хотя некоторые точно погнались скорее за модой. Это вопрос зрелости продукта, навыка работы с данными. Будущее у этих сервисов определенно есть, и оно крайне интересное.

c3383df10b518a.jpgСкриншот PFM «Сбербанка»

Всё, что есть сейчас на рынке, — констатация факта: вот как ты тратишь. Точка. Никто не отвечает на вопросы «Что я делаю не так?», «Как мне стать лучше, чем вчера?», «Как мне, не меняя привычек, перестать тратить зарплату в ноль?». То есть не про вчера, а про вчера, сегодня, сейчас и завтра. Не ругай меня красным цветом «low budget», мне и так грустно. Лучше подскажи, как быть конкретно в моем случае.

Я наблюдал поведение банков, оно было похоже на моду, все как будто одновременно побежали делать эти сервисы. «Альфа-Банк», «Сбербанк», «Промсвязьбанк», «СДМ» заявил тоже, ещё кто-то. И как будто никто не задумывался, а как в реальности клиент будет ими пользоваться.

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

Екатерина Чистякова: Это начало пути. Мы стремимся к тому, чтобы PFM-сервис воспринимался как друг, который всегда на связи и может оказать поддержку, когда нужно. Это направление мы активно развиваем, используя последние технологии работы с данными. Какие новые фичи появятся в нашем PFM — пока секрет, но о некоторых вы скоро узнаете.

Вы делаете весь дизайн и проектирование полностью внутри или что-то заказываете снаружи, у агентств?

Дмитрий Щеглов: Весь цикл разработки продукта (аналитика, дизайн, код) полностью внутри. Тестирование — частично. Когда у нас готова полноценная сборка, которой предшествовало внутреннее UX-тестирование, периодически отправляем её на растерзание внешним вендорам.

Как попасть к вам в команду?

Дмитрий Марков: Всё просто. Тут в комментариях неоднократно отметился наш арт-директор Дмитрий Щеглов, отправьте ему своё резюме на почту или напишите в Facebook.

Анна Кучуганова: Чтобы попасть к нам, нужно выполнить довольно нетривиальное, но интересное тестовое задание.

Что у вас происходит помимо работы? Как думаете, надо ли сплочать команду вне рабочих отношений? Как развиваете своих дизайнеров? Как передаете best practice? Как не потерять общие правила, единый концепт и вектор? Надо ли это?

Дмитрий Щеглов: «Здоровье» команды, особенно творческой — это важнейший фактор. Если говорить про рабочие будни, то я призываю команду пользоваться суперсилой друг друга. Очень важно вовремя поднять флаг, если есть где-то ступор или прокрастинация. На помощь в решении задачи придёт команда. Мы вместе дадим фидбэк по текущему направлению отдельного дизайнера, и вместе наметим вижн. Таким образом, у нас никто не «буксует».

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

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

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

Творческое здоровье, хорошее выражение — как не унываете в буднях банковских сотрудников?

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

Вы знакомы или как-то пересекаетесь с Германом Оскаровичем?

Дмитрий Марков: А как же. Герман Оскарович является нашим главным бизнес-заказчиком. Он такой же живой человек и иногда проводит общие очные встречи-выступления для сотрудников, в том числе с нашим департаментом. В выступлениях он часто мотивирует нас и других сотрудников делится своими идеалами, призывает нас мыслить более глобально. Мы недавно переехали в новый офис, и он приезжал нас с этим поздравить и дать своё напутствие.

Анна Кучуганова: Знакомы. Иногда он может внезапно появиться в офисе и даже сесть к кому-то из нас за компьютер и попросить показать макеты.

3fe1b4a59e31ef.jpg

©  vc.ru