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

В банке УБРиР дизайн-команда выполняла сервисные функции, новые макеты рисовали медленно, а сайт выглядел устаревшим. Рассказываем о том, как мы за год с нуля выстроили дизайн-процессы: сократили время на выполнение задач в два раза, улучшили качество дизайна и прокачали HR.

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

К нам обратился УБРиР (Уральский банк реконструкции и развития) — один из 25 крупнейших в России и один из 19 значимых банков по версии ЦБ. Существуют уже 34 года. Штаб-квартира — в Екатеринбурге.

Мы успели поработать с УБРиРом и как IT-Аgency (помогали банку с маркетингом, разработкой и дизайном), и как Мера — сделали из дизайн-команды банка проактивных спецов и оптимизировали работу над дизайн-задачами. Параллельно прокачивали эстетику сайта УБРиРа.

Предполагалось, что наше сотрудничество с банком будет конечным — на всё про всё у нас был год. Мы собирались наладить процессы и уйти, оставив после себя рабочую систему. Получилось иначе, но обо всём по порядку.

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

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

У нас не было цели стать непоколебимым авторитетом. Все новшества мы внедряли максимально мягко: подробно объясняли, как их применять и в чём польза. В итоге у нас получилось стать центром компетенций внутри банка.

Написали регламенты
Чтобы дизайнеры получали понятные и подробные ТЗ, мы разработали новый опросник для брифов, который учитывает задачи бизнеса. Объяснили, как правильно формулировать вопросы, и внедрили продуктовые артефакты, чтобы дизайнеры эффективнее общались с заказчиками.

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

Причесали дизайн-систему
Выяснили, что дизайнеры в основном работали не с готовыми компонентами, а с нарезанными на куски макетами.

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

На продуктовых семинарах мы объясняли дизайнерам, как заставить заказчиков прислушиваться к себе. Если коротко: делать два варианта дизайна — по ТЗ и собственный, если он лучше решает задачи бизнеса.

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

Например, придумали функцию «Друзья по покупкам», где нейросеть анализирует категории трат и находит людей с похожими вкусами. А совсем недавно отрисовали несуществующий мерч банка.

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

Как итог — подружились со всеми продуктовыми командами и начали работать сообща. Вот несколько вопросов, которые нам удалось решить в диалоге:

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

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

Ошибки в UX-текстах
Вместе с командой маркетинга перешли на новый процесс приёмки текстов. Сделали плакат-памятку с самыми распространёнными ошибками. Например, буквой «е» вместо «ё» или дефисами вместо тире.

Распечатали и повесили памятку в офисе. А чтобы привлечь внимание к проблеме с текстами, устроили конкурс на поиск ошибки в ней. В итоге победил и получил призовую тысячу рублей бэкенд-разработчик из УБРиРа.

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

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

Скептическое отношение к решениям дизайнеров
Наша дружба с отделом исследований помогала нам проверять гипотезы и защищать дизайн. Теперь, если заказчик не видит ценности в нашем решении и просит сделать по ТЗ, — мы идём к исследователям, чтобы они протестировали оба варианта — его и наш.

Сформировали культуру личных исследований

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

1. Проверять на себе
Например, наш основатель Игорь Герасимов заказал себе физическую карту УБРиРа, чтобы лично оценить её плюсы и минусы.

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

3. Много читать
Мы общались с чат-ботами, читали Сравни.ру и изучали pdf-файлы с описаниями тарифов — в общем, всё, что помогло бы ещё глубже погрузиться в продукт и контекст вокруг него.

Поработали с трёхмеркой

Примерно за 40 дней мы сделали 30 трёхмерных изображений для раздела «Кредиты бизнесу».

Параллельно запустили настоящий 3D-цех. Перестроили процесс под работу в несколько потоков:

Доработали брендинг

Отрисовали новые фирменные иллюстрации с учётом придуманных нами целевых эмоций. Сделали все иллюстрации и баннеры в едином стиле.

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

Также разработали кодирование продуктов по категориям «Скорость», «Бонусность» и «Премиальность».

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

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

Мы всё ещё сотрудничаем с УБРиРом. За время нашей работы над проектом многое поменялось. Например, значительно сократился бюджет — и большинство из дизайнеров, с которыми мы сотрудничали, ушли. Появилось много новых задач, которые требуют нашей экспертизы. Так что пока остаёмся с УБРиРом, чтобы и дальше помогать банку развиваться в новых условиях.

Подготовлено совместно с Пиаркой Цедры