«Меняли цветы на людей, галстуки на флаги»: создание дизайна Росбанка в картинках

Команда Red Collar рассказывает, как разработала дизайн сайта, а потом обновилась платформа бренда — и все началось заново. Урок сохранения эстетики при любых вводных.

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

Росбанк — один из крупнейших в России универсальных банков, входит в состав международной финансовой группы Societe Generale. На протяжении нескольких лет стабильно входит в тройку самых надежных российских банков по версии журнала Forbes. Включен ЦБ РФ в число 11 системно значимых кредитных организаций России.

Сайт Росбанка в 2020 стал лучшим банковским сайтом по версии всероссийского конкурса веб-разработки «Золотой сайт», выиграл первое место в «Корпоративных сайтах», третье в «b2b-сайтах» на крупнейшем Восточно-Европейском digital-конкурсе Tagline Awards 2019 и вошел в топ-3 по версии Google как самый удобный мобильный сайт из финансовой сферы.

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

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

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

Провели ресерч конкурентных сайтов и изучили недостатки старого дизайна Росбанка.

Минусы старого сайта Росбанка:

• интерфейс с непродуманной иерархией: много уровней меню и перегруженная сетка;

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

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

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

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

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

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

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

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

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

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

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

Или — баннер с кучей шариков и смысловым наполнением: в отпуск с бонусами от РЖД. Тогда помещаем продукт — банковскую партнерскую карту — в рекламный баннер и дублируем объект на баннер сайта.

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

Например, акция ОКЕЙ х Росбанк. В поиске решения изучили акцию в интернете, нашли лаконичные и броские варианты с персонажем — развили идею и перенесли его на главную страницу.

Кейс еще сложнее — цирк «Дю Солей»: нет фирменных цветов банка и их нельзя изменить. Разработали вариант-исключение: если красный цвет использовать невозможно, выбираем однотонный фон, черный, в случае Росбанка, или зеленый, цвет рекламной кампании. Сохранение дизайна происходит через монообъектность и моноцвет.

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

Когда работа была почти завершена, Societe Generale обновил платформу бренда. Поменялось все: в фирменные цвета добавился фиолетовый, изменился шрифт, стилистика и многое другое, а новый слоган теперь звучит так: «Росбанк. Будущее — это вы».

Начали перестраивать концепцию дизайна сайта Росбанка под обновленную платформу бренда: перестраивали финальный дизайн под новые элементы. Например, пробовали добавлять новые цвета, сохраняя задумку монообъектности.

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

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

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

Например, в обновленном логотипе появился слоган «Будущее — это вы», изменился шрифт, и линия «—» перешла в айдентинку, используясь как акцент в заголовках. Для главной страницы мы перебирали шрифты, пробовали с линией и без.

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

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

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

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

А вот что получилось в итоге.

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

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

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

Концепция с гербером осталась в сердцах обеих команд и ушла в мерч отделу разработки Росбанка.

#банк #сайт #росбанк #redcollar #дизайн