Digital thinkers conf.
Яркий сайт для конференции Awwwards — престижного конкурса веб-дизайна
кейс
Росбанк
Редизайн основного сайта и UI-кит для одного из крупнейших российских банков.
Видеоотзыв о работе смотрите на YouTube
задача
Создать дизайн нового сайта — одного из ключевых цифровых инструментов банка для привлечения новых клиентов. Предстояло обновить все: от креативной и визуальной идеи, до архитектуры и функциональной составляющей сайта.
клиент
Росбанк
отрасль
Банки
год запуска
2019
что сделали
Дизайн сайта
UI-kit
награды
Золотой сайт
Золото, 14 февраля 2020
Tagline Awards
Золото, «Корпоративные сайты», 2 декабря 2019
Tagline Awards
Бронза, «B2B проект», 2 декабря 2019
О банке
Росбанк обслуживает более 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
Сайт банка огромный: множество разделов и подразделов, калькуляторов, форм заявок, изображений и текста. Чтобы все типы кнопок и заголовков, принципы построения блоков и размещения фотографий были едины — разработали визуальную структуру, словарь дизайн-языка сайта.
Прописали все условия создания элементов в едином сводном реестре, доступном для всех участников разработки. Так мы смогли не только представить цельный продукт, то и увеличить скорость создания сайта.
Упражнения с персоналом банка
Глобальная проблема любого крупного сайта — не утратить изначальную задумку и эстетику при дальнейшем наполнении. Когда контент-менеджер не профессиональный веб-дизайнер, он может не почувствовать разницы и не понять, какое изображение впишется в дизайн страницы и будет соответствовать требованиям визуальной стратегии бренда.
Чтобы в будущем поддерживать единый стиль, сделали гайдлайн с упражнением, как из любой подходящей новости и картинки сделать эстетичный баннер в единой концепции сайта.
отзыв
Алексей Лола
Директор департамента цифрового розничного бизнеса
Росбанк
Мы выбрали команду Red Collar среди многих и остались довольны результатом: это была вдохновляющая совместная работа над нашим общим проектом — новым сайтом Росбанка.
Считаем, что в решении сложных структурных задач они обладают очень глубокой экспертизой. Они знают, как работать с имиджевой стороной проекта, и при этом учитывают прямые коммерческие цели. Для нас особо ценно было то, что для команды агентства на первом месте стоит удобство пользователя, они уделяют особое внимание UX. При этом они умеют работать с большими объемами данных, приводить все к единой, цельной системе.
Red Collar — это партнеры, которые умеют слушать, отвечают за результат и всегда находятся на стороне проекта.
смотрите также
связаться