Как мы построили дизайн-производство банка УБРиР

IT-Agency • Мера

mera.design

2023–2024

Команда проекта

Уральский банк реконструкции и развития

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

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

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

Заказчик

Процессы и управление

Редизайн
сайта

Иллюстрации

Один из 25 крупнейших банков России. Головной офис расположен в Екатеринбурге.

Наша команда работала в рамках комплексного проекта маркетингового агентства IT-Agency по продвижению банка

Области нашего влияния

Задачи и решения

12:34

Онлайн-заявка

Дебетовая карта «My Life»

10% кешбэк за покупки в категориях «дом и ремонт», «творчество и хобби», «АЗС»

Акции / Дебетовые карты

Кешбек до 35%

Кешбэк и скидки от партнёров, в мобильном приложении

До 9% годовых

Доходность по накопительному счёту

0 ₽

Обслуживание и доставка

Получить онлайн

Частным клиентам

Бизнесу

Инвесторам

О банке

Набережные Челны

Офисы и банкоматы

Интернет банк

Карты

Кредиты

Вклады

Ипотека

Сервисы

Бонусы

Страхование

Поддержка

Онлайн-заявка

Акции / Дебетовые карты

Дебетовая карта «My Life»

10% кешбэк за покупки в категориях дом и ремонт, творчество и хобби, АЗС

Получить онлайн

Кешбек

+15 ₽

+17 ₽

+9 ₽

+7 ₽

Кэшбек до 35%

В мобильном приложении

До 9% годовых

Доходность по накопительному счёту

0 ₽

Обслуживание и доставка

Рассчитайте выгоду по счёту

Сумма при открытии счёта

900 000 ₽

10 000 ₽

10 000 000 ₽

Срок

1 год

6 месяцев

25 лет

Ежемесячное пополнение

13 800 ₽

2 000 ₽

100 000 ₽

Ваш доход

Я накоплю к 23 ноября 2023

1 667 951 ₽

Доход

22 951 ₽

Ставка до 1 000 000 ₽

6,5 %

Ставка свыше 1 000 000 ₽

5 %

Открыть онлайн

Расчёт носит информационный характер и не является публичной офертой

Опция

Больше плюсов

99 ₽ в месяц

Покупаю по дебетовым и кредитным картам УБРиР ежемесячно

до 9 999 ₽

+0%

от 10 000 ₽

+1,5%

от 30 000 ₽

+2,5%

от 60 000 ₽

+3,5%

Получаю зарплату или пенсию на карту УБРиР

+0,5%

Акции по дебетовой карте с кешбэком

Бессрочно

Приведи друга

Рекомендуйте карту «My Life» и зарабатывайте вместе с друзьями

Бессрочно

Приведи друга

Рекомендуйте карту «My Life» и зарабатывайте вместе с друзьями

Бессрочно

Приведи друга

Рекомендуйте карту «My Life» и зарабатывайте вместе с друзьями

Новым клиентам

Бесплатно доставим карту уже завтра

Заказать карту

Для клиентов УБРиР

Виртуальная карта

Оплачивайте покупки виртуальной картой МИР

Узнайте, как платить картой МИР на Android

Есть вопрос?
Закажите звонок

Перезвоним и проконсультируем по продуктам банка

Мобильный телефон

+7 (

Я соглашаюсь сусловиямипередачи моих персональных данных

Заказать звонок

Частным лицам

8 (800) 1000-200

Бизнесу

8 (800) 700-59-59

Частным клиентам

Кредитные карты

Дебетовые карты

Кредиты

Вклады

Ипотека

Сервисы

Бонусы

Страхование

Поддержка

Акции

Бизнесу

Расчетный счет

Регистрация

Эквайринг

Бизнес-карта

Кредиты

Сервисы

Депозиты

Гарантии

Онлайн оплата сервисов

Поддержка бизнеса

Инвесторам

Брокерский счет

ИИС

Доверительное управление

Депозитарные услуги

Финансовым институтам

Документы

Тарифы

Общая информация

О банке

Благотворительность

Жизнь в УБРиР

Пресс-центр

Залоговое имущество

Раскрытие информации

Информационно-справочный центр

Официальная информация

Партнёрство с банком

Контакты

Мобильный банк УБРиР

Совершайте любые банковские операции за пару кликов

Мобильный банк Бизнес Лайт 2.0

Новый дизайн и расширенный функционал. Управляйте финансами компании 24/7.

Карта сайта

Специальная оценка условий труда

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

Раскрытие информации на странице информационного агенства ООО «ИНТЕРФАКС-ЦРКИ». Раскрытие информации профессиональным участником рынка ценных бумаг. Информация о максимальных процентных ставках по вкладам физических лиц. Список лиц, под контролем либо значительным влиянием которых находится кредитная организация. ПАО КБ «УБРИР» использует на сайте файлы cookie с целью улучшения клиентских сервисов. Подробнее об использовании файлов в разделе о политики конфиденциальности. Если вы не хотите, чтобы сайт использовал файлы cookie, необходимо изменить настройки вашего браузера.

Новая концепция сайта

Иллюстрация к продукту
«Расчётный счёт без скрытых условий»

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

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

Процессы и управление

Игорь Герасимов

Семинар по нейросетям

0:24— соображающие нейросети

28:59— рисующие нейросети

Презентация

Нейросети для дизайнера

8:22 AM

0:05

Дизайн-процесс

Подготовительный этап

Поиск референсов по блокам, цветам и визуалам

Аня

Отбор готовых визуалов для использования на странице

Аня

Согласование визуала на смотринах с худруком

Аня

Ангелина

Согласование технических требований с фронтами

Лёня

Заказ визуала на главный баннер

Лёня

Согласование на смотринах с худруком

Лёня

Игорь

Согласование сроков получения текстов для продуктовых блоков.Должны отдать всё к 23.01

Нина

Интервью с заказчиком по структуре

Лёня

Юзерфлоу первая итерация

Лёня

Обсудить 1-ю итерацию Юзерфлоу

Лёня

Аня

Переработка текстов

Лёня

Юзерфлоу и прототип

Лёня

Выбор механики отображения продуктового блока

Лёня

Аня

ТЗ на визуалы для страницы

Лёня

Аня

Показ прототипа бизнесу

Показ дизайна десктопа бизнесу

Отдать окончательный дизайн.01.02

Редизайн разводной страницы «КРЕДИТЫ»

Вводные

Необходимо сделать редизайн страницы

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

Из-за этого пользователь не находит нужный ему продукт и уходит с сайта. В результате снижается конверсия в заявку

Миссия бизнес + дизайн

Упрощение получения пользователем информации по продуктам банка

Страница должна помочь пользователю понять, какой кредит подойдёт под его задачи

Цель бизнеса

За счет компактной подачи информации о продуктах мы сконвертируем большее количество пользователей в клиентов, чем сейчас

Аудитория

Физические лица, которые подбирают кредит для решения своих финансовых вопросов

Критерии успеха

Дизайнерские:

Повышение глубины просмотра
Повышение кол-ва отправленных с сайта заявок на кредит

Критерий

Новый дизайн

Старый дизайн

Дизайн
в целом

91,25%

82,50%

Удобство ознакомнения с информацией

95,00%

87,50%

Актуальность дизайна

95,00%

85,00%

Нина Чемерис

Все вводные теперь собираем в паспорт проекта

6:07 AM

Провели мозгоштурм и выявили целевые ощущения от дизайна и правила их проявления в макетах

Параллельно налаживали коммуникацию между командами банка

Нам хотелось уйти от субъективных оценок дизайна. Мы согласовали со всеми командами исполнителей ощущения, которые должен передавать сайт банка. Каждое ощущение закрепили примерами. Визуальные правила масштаби-ровали для продуктов маркетинга, интернет и мобильного банка

Мы —

центр компетенций

Мера

Мобильный и интернет банк

Сайт

Маркетинг

Помогли банку сделать дизайн единообразным для бесшовного опыта пользователя

Редизайн сайта

На основе целевых ощущений сделали новую концепцию сайта

Частным клиентам

Бизнесу

Инвесторам

О банке

Набережные Челны

Офисы и банкоматы

Интернет банк

Карты

Кредиты

Вклады

Ипотека

Сервисы

Бонусы

Страхование

Поддержка

Онлайн-заявка

Акции / Дебетовые карты

Дебетовая карта «My Life»

10% кешбэк за покупки в категориях дом и ремонт, творчество и хобби, АЗС

Получить онлайн

Кешбек

+15 ₽

+17 ₽

+9 ₽

+7 ₽

Кэшбек до 35%

В мобильном приложении

До 9% годовых

Доходность по накопительному счёту

0 ₽

Обслуживание и доставка

До

После

Обновили дизайн-систему

Выработали принцип: используем текущие ресурсы дизайна и разработки на постепенное упорядочивание и создание серийных компонентов вместо разовых

Default

Кнопка L Ruby

Desktop L/Mobile L

Кнопка L White

Desktop L/Mobile L

Кнопка L Outline

Desktop L/Mobile L

Кнопка S Ruby

Desktop S/Mobile S

Кнопка S White

Desktop S/Mobile S

Кнопка S Outlie

Desktop S/Mobile S

Кнопка S White/ on hover (RKO)

Desktop S/Mobile S

Active

Hover

Focus

Disabled

Button

Отправить заявку

Онлайн-заявка

Button

Онлайн-заявка

Button

Онлайн-заявка

Button

Онлайн-заявка

Открыть счёт

Онлайн-заявка

Закрыть

Кредит на любые цели

Снижаем ставки для всех

Ставка

от 5,9 %

Сумма

до 5 млн ₽

Срок

до 10 лет

Документы

паспорт, справка о доходах или выписка из ПФР

Можно получить онлайн

в мобильном банке

Бесплатная доставка

Подробнее о кредите

Получить онлайн

24px

40px

24px

200px

368px

262px

760px

Апрель

Май

Июнь

ПН

ВТ

СР

ЧТ

ПТ

СБ

ВС

12:34

Выберите сумму и срок кредита

Label

3 000 000 ₽

от 15 000 ₽

до 700 000 ₽

Срок кредита

6 месяцев

12 месяцев

3 года

5 лет

7 лет

10 лет

Вы выбрали кредит на сумму:

3 000 000 ₽

Срок

3 года

Ежемесячный платёж

90 452 ₽

Ставка

5,4%

Предварительный расчет.
Не является публичной офертой.

Телефон

Шаг 1 из 5

+25% к одобрению за 1й шаг

Авторизуйтесь через Госуслуги

Мобильный телефон

+7 (

Япринимаю условия и даю согласиена обработкуи использованиемоих персональных данных, и разрешаю сделать запрос в бюро кредитных историй

Шаг 3.

Работа

Текущие поступления на счёт,

в месяц

495 786 ₽

Текущие платежи контрагентам в другие банки, в месяц

11 шт

Переводы физлицам

Платежи внутри банка, в месяц

23 000 ₽

Платежи в другие банки, в месяц

50 000 ₽

Снятие и внесение наличных в банкомате

Снятие наличных, в месяц

23 000 ₽

Внесение наличных, в месяц

50 000 ₽

Стоимость ведения счёта в УБРиР

2 283 ₽ в месяц

Варианты оплаты тарифа

за 3 месяца

за 6 месяцев

за 12 месяцев

Самый подходящий тариф

Бизнес-класс

Переводы юрлицам в УБРиР

Бесплатно

Переводы юрлицам в другие банки

0 ₽.с 51 платежа — 30 ₽ за шт.

Переводы физлицам в УБРиР

Бесплатно

Переводы физлицам в другие банки

Бесплатнодо 300 000 ₽

Внесение наличных в банкомате

Бесплатнодо 200 000 ₽

Снятие наличных в банкомате

345 ₽.1,5% до 200 000 ₽

Тариф «Бизнес-класс»

1 908 ₽

Услуги сверх тарифа

30 ₽

Полные условия тарифа

«Бизнес-класс»

Открыть счёт

Новый дизайн проверили на исследованиях. Выросла оценка актуальности дизайна:

85 % →

95 %

Вывели иллюстрации на новый уровень

На сайте не было системы иллюстраций. Трёхмерные изображения — это уже стандарт финтеха и рабочее решение

Сформировали концепцию иллюстраций: ощущения и визуальные принципы

Лёгкий

Чистота композиции, нет шума из элементов

Вокруг элементов достаточно воздуха

Доступный

Крупные объекты

Чёткие, узнаваемые формы

Метафора легко считывается

Понятен в малом масштабе

Настоящий

Фотореалистичные объекты, не игрушки

Реалистичные и современные материалы

Устойчивая композиция

Красивый

Сочетание матовых и глянцевых материалов

Реалистичный свет и тени

Неоднородный, глубокий фон с лёгкими переливами

Уникальный

Используются цвета бренда

Узнаваемый набор элементов

Локальные уральские образы

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

Блики света

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

Платформа

Используем для объединения мелких предметов, устойчивой композиции или выделения элемента

Фирменные цвета

На небольших элементах используем фирменный рубиновый цвет

Достоверные объекты

Именно так выглядит 5 000 000 ₽
в пачках пятитысячных купюр

Проработали процесс создания иллюстраций

Концепция иллюстраций

/ Первоосновы

/ Композиция

/ Метафоры

/ Реалистичность

/ Ресайзы

Сделали систему кодирования разных продуктов банка: линии — экспресс акции, конфети — бонусные продукты, темный фон — премиальные

Дизайн система иллюстраций: правила для создания брендовых изображений и повышения качества визуалов

Бонусность

Скорость

Премиальность

Красный автомобиль на платформе с конфетти

Настроили процесс производства иллюстраций с нуля до выхода на сайт

В новой концепции реализовали промо-страницу зарплатного проекта УБРиР

Графика на сайте

12:34

Улучшенный зарплатный проект для сотрудников РМК

Кешбэк до 10% на 5 категорий

Переводы по СБП без комиссии

до 200 000 ₽ в месяц

Скидки до 1% на ставку по ипотеке

Доступ ко всем продуктам банкана особых условиях

Возврат денег за покупки по карте

категории на выбор

за все остальные покупки

Одежда и обувь

за ЖКУ

аптеки

Супермаркеты

Общественный

транспорт

ЖКУ

Одобрение кредитной карты

за 10 минут

Кредитная карта одобрена

Мы получили вашу заявку на кредитную карту

Карта одобрена

Начните пользоваться кредитной картой в один клик

Акции и кешбэк

до 35% от партнёров

Увеличенные ставки по вкладам

+0,8%

к ставке по вкладам от 5 млн ₽

+0,5%

к ставке по накопительному счёту

Снятие и внесение наличных

до 300 000 ₽ в сутки и 1 000 000 ₽ в месяц

Заранее одобренные лимиты по кредитам

12:34

Улучшенный зарплатный проект для сотрудников РМК

Кешбэк до 10% на 5 категорий

Переводы по СБП без комиссии

до 200 000 ₽ в месяц

Скидки до 1% на ставку по ипотеке

Доступ ко всем продуктам банкана особых условиях

Возврат денег за покупки по карте

категории на выбор

за все остальные покупки

Одежда и обувь

за ЖКУ

аптеки

Супермаркеты

Общественный

транспорт

ЖКУ

Одобрение кредитной карты

за 10 минут

Кредитная карта одобрена

Мы получили вашу заявку на кредитную карту

Карта одобрена

Начните пользоваться кредитной картой в один клик

Акции и кешбэк

до 35% от партнёров

Увеличенные ставки по вкладам

+0,8%

к ставке по вкладам от 5 млн ₽

+0,5%

к ставке по накопительному счёту

Снятие и внесение наличных

до 300 000 ₽ в сутки и 1 000 000 ₽ в месяц

Заранее одобренные лимиты по кредитам

12:34

Улучшенный зарплатный проект для сотрудников РМК

Кешбэк до 10% на 5 категорий

Переводы по СБП без комиссии

до 200 000 ₽ в месяц

Скидки до 1% на ставку по ипотеке

Доступ ко всем продуктам банкана особых условиях

Возврат денег за покупки по карте

категории на выбор

за все остальные покупки

Одежда и обувь

за ЖКУ

аптеки

Супермаркеты

Общественный

транспорт

ЖКУ

Одобрение кредитной карты

за 10 минут

Кредитная карта одобрена

Мы получили вашу заявку на кредитную карту

Карта одобрена

Начните пользоваться кредитной картой в один клик

Акции и кешбэк

до 35% от партнёров

Увеличенные ставки по вкладам

+0,8%

к ставке по вкладам от 5 млн ₽

+0,5%

к ставке по накопительному счёту

Снятие и внесение наличных

до 300 000 ₽ в сутки и 1 000 000 ₽ в месяц

Заранее одобренные лимиты по кредитам

Приоритетное обслуживание

Горячая линия

Ответим на звонок

за 30 секунд

Ваш номер в приоритетном списке. Это значит, что вы не будете ждать в очереди даже при перегрузке

колл-центра

Чат в приложении

Поможем в любое время суток

Специалисты в чате ответят на ваш вопрос даже глубокой ночью

Продукты УБРиР

Вклады от 1000 ₽с повышенной ставкой

до

16,2%

по срочному вкладу новым клиентам

до

16%

по «Накопительному счёту» на минимальный остаток

Привилегии для вкладов от 5 млн ₽

—

До +0,5% годовых к ставке вклада

—

Свободное пополнение

—

Сохранение % дохода при досрочном изъятии вклада

Открыть вклад

Кредиты соскидкой на платежи до 5%

до

лет

максимальный срок

минут

на одобрение кредита

Суммы кредитов

—

До 700 000 ₽ без подтверждения дохода

—

До 2 млн ₽ по справке 2-НДФЛ

—

До 5 млн ₽ по запросу в ПФР

Оформить карту

Показать ещё 3 продукта

Оставить заявку

Вклады

Кредит наличными

Кредитная карта

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

Выберите сумму и срок кредита

Label

3 000 000 ₽

от 15 000 ₽

до 700 000 ₽

Срок кредита

3 года

5 лет

7 лет

10 лет

Получаю зарплату на счет УБРиР

Сумма кредита

3 000 000 ₽

Срок

3 года

Ежемесячный платёж

90 452 ₽

Предварительный расчет.
Не является публичной офертой.

Общие данные

Шаг 1 из 5

+25% к одобрению за 1й шаг

Авторизуйтесь через Госуслуги

Мобильный телефон

+7 (

Фамилия Имя Отчество

Отметьте, если меняли ФИО

Дата рождения

Город обслуживания:

Выбрать

Шаг 2

Личные данные

Мобильное

приложение

—

Отслеживайте расходы и поступления средств

—

Накапливайте сбережения на вкладах

—

Оформляйте продукты без очередей и бумажной волокиты

Скачать приложение

Документы

Тарифный план зарплатной карты

PDF, 173 KB

8 (800) 1000-200

звонок по России бесплатный

12:34

Ипотекасо сниженной базовой ставкой

Мобильное

приложение

—

Отслеживайте расходы и поступления средств

—

Накапливайте сбережения на вкладах

—

Оформляйте продукты без очередей и бумажной волокиты

Скачать приложение

Стали выпускать больше трехмерных изображений за квартал

38 →

Обновлённый сайт банка УБРиР на ноутбуке

Оптимизировали процессы и дизайн в банке

УБРиР имеет современный и узнаваемый стиль. Сайт в процессе обновления без больших затрат. Есть собственная система трёхмерных иллюстраций

Штатный дизайнер — полноценный участник продуктового процесса и растёт в тимлида

Выросло удобство ознакомления с информацией по результатам тестирования

82 % →

91 %

Совместно с командой джедаев IT-Agency подняли конверсию целевого действия на 5,77%

Выросло количество запущенных А/В-тестов за квартал

Команда

Дизайн

Ирина
Колотилина

Даша
Калинина

Анна
Талапова

Дизайн-система

Алёна
Мазур

Худруководство

Игорь
Герасимов

Ангелина
Артюшина

Управление

Нина
Чемерис

Сергей
Коннов

Коммуникационный дизайн

Аня
Черепанова

Трёхмерка

Андрей
Белов

+4 специалиста

Подробнее о проекте основатель студии Игорь Герасимов и руководитель продукта Мадиной Мельник рассказали на Дизайн-выходных в Нижнем Новгороде