Привет! Я Мария, продуктовый дизайнер в ОТП Банке. Мы верим, что хорошее взаимодействие с продуктом начинается с эмоций. В этой статье расскажу, как один маленький мем повысил вовлеченность пользователей и принёс нам волну позитива.
Место ли эмоциям в финтехе
Помимо повседневных задач по улучшению приложения, мы занимаемся глобальной миссией: сделать банк более приветливым и дружелюбным. Работа с эмоциями становится важной частью дизайна продукта, когда он уже стабильно решает задачи пользователя. В этот момент перед командой встаёт новая цель: удержать существующих клиентов и привлечь новых. Здесь на помощь приходят позитивный отклик, узнаваемость и вирусность.
Эмоциональный дизайн можно условно разделить на два направления:
управление существующими ощущениями — сглаживание раздражения от ошибок и ожидания, уместные подсказки, разбиение сложной информации на простые шаги и т.д.;
создание новых — эстетическое удовольствие от визуала, персонализация, неожиданные приятные сюрпризы и т.д.
Сегодня поговорим о втором, когда дизайн не только решает проблемы, но и радует пользователей.
С чего все начиналось
Однажды мы случайно убедились, что приколы в интерфейсе действительно работают: добавили на экран авторизации енота из мема «Педро-Педро» и эта мелочь ненадолго сделала приложение вирусным в соцсетях. Так мы пришли к истине, что иногда достаточно простой детали, чтобы сделать опыт клиентов заметно приятнее.
Педро-енот, конечно, навсегда остался в нашем сердце, но мы вовремя остановились — тренды быстро меняются, и не все мемы проходят проверку временем. Поэтому, когда в бэклоге появилась задача добавить в приложение новую пасхалку, для нас это стало логичным продолжением.
Это среда, мои чуваки
В ходе брейншторма мы решили в качестве новой эмоциональной изюминки добавить питомца на Dynamic Island. Отчасти на это повлиял тренд: с выходом iPhone 14 Pro многие приложения обзавелись милыми пиксельными существами. Помню в 2022, я сама скачивала несколько таких, чтобы посмотреть, как это работает. К моменту наших поисков идей ажиотаж уже спал, и идея не выглядела моветоном.
Первым кандидатом на питомца снова стал енот, но на крошечном островке он выглядел неубедительно (не то крыса, не то волк). Мы начали искать другое милое животное и в итоге остановились на лягушонке.
Почему именно лягушка?
Цвет. Лаймовый — один из главных и узнаваемых носителей бренда ОТП Банка. Его обычно трудно «привязать» к какому-то живому существу, зато лягушка подошла идеально.
Форма. Енот при упрощении терял не только узнаваемость, но и своё очарование. У лягушки форма проще, её детали легко упростить и подчеркнуть — то, что нужно для такого микроскопического формата.
Эмоциональный фактор. В наших рабочих чатах давно жила тихая любовь к лягушатам.
Позже выяснилось, что корни у этого феномена вполне понятны: в интернете уже много лет существует мем «It is Wednesday, my dudes». Огромное комьюнити по средам постит забавных лягушек и жаб не только среди наших коллег. Получилось, что персонаж уже имеет свою устойчивую фан-базу (не сопоставимую, конечно, с котиками, но всё же).
Как я стала «мамой»
Когда я приступила к задаче, опыта персонажной анимации у меня не было и пришлось действовать по наитию, опираясь на инструменты под рукой. После изучения вопроса был выбран путь покадровой анимации.
Да, можно возразить: «Есть же инструменты для скелетной анимации, зачем мучиться с кадрами?» Но любая продуктовая задача имеет ограничения: время, бюджет и технические возможности. От идеала с полноценным спрайтовым персонажем пришлось отказаться, так как на тот момент вкладываться (тратить время на дообучение команды, разработку и интеграцию в код) в фичу с непонятным выхлопом было слишком рискованно. Сначала нужен был MVP или даже MLP — minimum lovable product (минимально любимый продукт), чтобы собрать обратную связь и понять, стоит ли развивать идею.
Что касается инструментов: After Effects я сознательно отмела, а навыки создания простых анимаций подтолкнули к LottieLab — корпоративная подписка и возможность выгружать в JSON тогда были значительным преимуществом. Раскадровку и тестовые прогоны я собирала в родной Figma.
Поскольку персонаж был очень маленьким, стиль логично ушёл в пиксель-арт, а референсы пиксельных лягушек и других животных помогли в дизайне персонажа. Разные варианты жабки (внутри команды мы чаще называем её именно так) сначала тестировались в статике, потом в движении на реальном устройстве, так как динамика сильно влияет на восприятие.
Сценарий анимации придумался почти сразу: лягушка вылезает, немного прыгает туда‑сюда, в какой‑то момент останавливается, чтобы съесть муху, и цикл повторяется. Такой простой сценарий легко зациклить, он не раздражает и создаёт приятное чередование движения и пауз. А поскольку для кого‑то лягушка — символ среды, мы решили, что появляться она будет только по средам, чтобы поздравлять пользователей с маленькой пятницей. Это дополнительно защищало жабку от того, чтобы быстро надоесть, особенно когда возможности отключить её нет.
«Уберите этот хлам» vs «Хочу сменить банк из‑за лягушки»
Ещё на концептуальном этапе вокруг лягушки было немало споров. Кто-то относился к ней скептически, но мы настроились довести фичу до релиза. Дебют прошел не без форс-мажоров: возникли технические проблемы, и лягушку пришлось довольно быстро отключить. А потом началось самое интересное: в отзывы посыпались просьбы пользователей её вернуть. Руководство тоже тепло приняло питомца и попросило как можно скорее восстановить.
Кому-то нововведение не понравилось — отзывы были разными, как и пользователи. Но положительных реакций оказалось заметно больше. В сторис приложения мы провели опрос о лягушке и увидели подавляющее большинство одобрительных ответов и точно сформированный запрос: «А когда будет на Android?». После этого лягушка появилась и там. Постепенно о ней начали писать в соцсетях компании и иногда в интернете всплывают личные посты пользователей про «забавную лягушку из ОТП Банка».
Подняли ли мы лояльность благодаря лягушке? Точно сказать сложно. На общую удовлетворённость сильнее влияют функциональные факторы, над которыми мы работаем системно. Но как дополнительная деталь она явно сработала — раз вокруг неё столько шума, значит, свою задачу она выполняет и поселилась у нас не зря.
Что дальше?
В планах по развитию лягушки переработать анимацию и сделать ее скелетной. Это ускорит редактирование и упростит смену «скинов». Например, можно будет одевать жабку и добавлять аксессуары. Да, потребуются изменения в коде и процессах, но в контексте развития проверенной фичи и эмоциональности продукта такие вложения оправданы.
Выводы
В ОТП Банке маленькая лягушка на островке стала символом эмоционального подхода к дизайну. Ведь главное — не забавные элементы сами по себе, а то, как через них формируется ощущение человечности и близости бренда. Жабка доказала, что даже небольшая фича, сделанная с любовью, вызывает искренний отклик и диалог с пользователями. И пока функциональная часть остаётся базой пользовательского опыта, именно такие детали помогают сделать банк местом, где жаба не душит, а улыбается и клиенты вместе с ней.
А вы уже видели лягушку в при��ожении?
