Проекты
Агентство
Контакты
Все проекты
проект

Росбанк

Прежде всего

Росбанк — один из крупнейших российских банков, входит в состав международной финансовой группы Societe Generale.

Больше, чем банк

задача

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

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

Идея

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

Видео кейс
О банке

Росбанк обслуживает более 4 млн клиентов в 71 регионе России. Сеть банка насчитывает порядка 330 отделений и более 30 тыс. банкоматов партнерской сети, включая 2000 собственных. Росбанк включен Банком России в перечень 11 системно значимых кредитных организаций. Входит в топ-3 рейтинга самых надежных российских банков по версии журнала Forbes в 2019 году.

Образ через дизайн

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

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

Чистота Контраст Воздух Типографика Легкость
User experience

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

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

Скришоты состояний различных экранов, страниц, всплывающих окон
58 уникальных страниц 100+ состояний и поп-апов в 3 разрешениях
Mobile first

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

Образцы иконок и типографики
Премиум обслуживание
Премиум-раздел

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

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

Скришот главной страницы для юридческих лиц

Чтобы повысить скорость работы, параллельно с разработкой дизайна страницы вели её адаптацию под планшеты и смартфоны.

Скришот главной страницы для десктопа и телефона
Конструктор

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

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

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

Ежегодно на сайт заходит порядка 11,5 млн пользователей, из них больше 70% — новые.

Скриншот выбора типа карты
Банковские карты

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

Скриншот выбора типа карты для мобильной версии
Скриншоты страниц, посвещенных банковским картам
Скриншоты страниц, посвещенных банковским картам
Финансовые калькуляторы

Чистая функциональность и интуитивная механика: сделали калькуляторы со всеми процентными ставками и расчетом дохода во времени и точных суммах. Ипотечный и доходный калькуляторы — с любого устройства клиент банка может получить расчет банковского предложения.

Скришот калькулятора доходности
Скорость работы над сайтом

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

Скришоты сервисов
Недвижимость

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

Скришоты сервиса продажи недвижимости

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

Скришот оформления кредита
Бизнесу
Все в одном месте

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

На адаптивной версии пункты меню удобно убраны в выпадающий список.

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

Банк — универсальная финансовая структура для всех категорий клиентов. Его услугами может воспользоваться любой человек независимо от его особенностей. А значит и сайт должен быть удобен для каждого.

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

Скриншоты страниц для бизнеса
О банке
Доверие

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

Инфографика

Выделили ключевые факты и подали их в легком для восприятия формате. О каждой значимой цифре написали отдельно и подчеркнули широкую географию работы банка с помощью образа карты России. А таймлайн или хронологическая линия позволяет проследить историю развития Группы по ключевым событиям.

Скришоты страниц для бизнеса

Простые интерактивные элементы помогают пользователю изучать сайт с удовольствием.

Скриншоты страницы о банке
...и другие разделы
Скриншот страницы ивестиций
Иконки

Мы бережно относимся к пользователям: не перегружаем их контентом и помогаем с комфортом считывать информацию. Отрисовали 138 иконок и дозированно разместили их по разделам. Так взгляду проще перемещаться по странице, а символ поясняет смысл текста для быстрого понимания сообщения.

Образцы иконок
Скриншот страницы финансовым институтам
Формы заявок

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

Скриншот анкеты соискателя
UI-Kit, много-много контента
UI-kit

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

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

Скришот блока сервисов
Упражнения с персоналом банка

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

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

Фотографии
... и очень много любви!
следующий проект

Sally