Новый сайт и дизайн-система ПСБ
Сделали глобальный редизайн и фронтенд сайта и мобильной версии, обновили коммуникации и тексты, создали и развиваем новую дизайн-систему ПСБ.О клиенте
ПСБ — универсальный банк в РФ. Входит в 10 крупнейших банков России и в список системно значимых кредитных организаций. Работает с 1995 года и является одним из самых надежных российских банков, который создает финансовые решения для частных клиентов и предпринимателей.Цели и задачи проекта
Глобальные цели проекта — помогать клиентам вести бюджет, защищать и приумножать доходы, решать бизнес-задачи и оптимизировать процессы, делиться опытом и знаниями.ПСБ хотели:
- обновить коммуникационный язык бренда;
- упростить пользовательские пути;
- улучшить пользовательский опыт и эффективность онлайн-ресурсов ПСБ;
- сделать сайт удобным путеводителем для клиентов по всем продуктам и услугам банка;
- систематизировать всё в единую дизайн-систему;
- стать более технологичными;
- сделать сайт более удобным и современным, в едином стиле;
- изменить голос бренда и сделать тексты более человечными и понятными для каждого пользователя.
Решение
Наша команда максимально погрузилась в каждое направление бизнеса и потребности пользователей ПСБ: от частных лиц до корпораций. Проанализировали пути пользователей, боли, лучшие практики финансового рынка. Продумали информационную архитектуру проекта и навигацию. Создали несколько концептуальных решений и начали работу над глобальными изменениями ПСБ в онлайн-пространстве.
![новый дизайн ПСБ.png новый дизайн ПСБ.png](/upload/medialibrary/866/z4p5njcish7yc9x0tlve6m0yfnq6zc9c.png)
Новый визуальный язык и коммуникации
Создали для бренда современный и технологичный визуальный язык. Визуальный язык — это набор элементов, с помощью которого формируется коммуникация интерфейса с пользователем и опыт взаимодействия. Ещё он передаёт ценности и характер бренда.
Сделали цветовое кодирование и стили под каждое из направлений бизнеса. Для премиальных направлений Orange Premium Club и Private Banking создали уникальные дизайн-решения. Объединили все решения в дизайн-систему.
Дизайн-система — это такая система, внутри которой визуальный язык, гайдлайны, UI-компоненты и их код. Дизайн-система помогает систематизировать все элементы визуального языка и интерфейсов, ускоряет скорость разработки и масштабирование проектов.
![визуальный язык банка ПСБ.png визуальный язык банка ПСБ.png](/upload/medialibrary/786/53bjcahgwx0p87iksecvr1xlcgupe60a.png)
Упростили пути пользователей
Упростили структуру и навигацию, сделали фокус на решении задач пользователей и улучшении пользовательского опыта.
![пользовательские пути ПСБ.png пользовательские пути ПСБ.png](/upload/medialibrary/ba3/g7orwd1flysexa06mo88kgg0g5r17qk1.png)
Удобный путеводитель для клиентов
Создали калькуляторы кредитных продуктов и ипотек, ёмкие описания услуг, хелперы, простые формы и другие инструменты, чтобы сайт был удобным путеводителем для всех групп клиентов ПСБ.
Сотни новых страниц
Сделали новый дизайн для 11 направлений внутри ПСБ и сделали весь фронтенд. Получилось более 300 продуктовых и информационных страниц.
![страницы для банка ПСБ.png страницы для банка ПСБ.png](/upload/medialibrary/dcd/brzs0kn1snbzkz9j590vu3oax0bvcbjo.png)
Обновили голос бренда и написали UX-тексты
Поменяли подход не только к дизайну, но и к коммуникациям. Теперь клиентам банка гораздо проще находить ответы на вопросы и разобраться в сложном.
![Сделали TOV и написали UX-тексты для ПСБ Сделали TOV и написали UX-тексты для ПСБ](/upload/medialibrary/1fb/dsboiwl1pdcm5cp23owfudle8uxgzywq.png)
Создали дизайн-систему для всех сайтов и адаптивов
Все типовые элементы и блоки находятся внутри дизайн-системы и переиспользуются для быстрого масштабирования проекта и создания новых страниц. Всё пролинковано и синхронизировано. Это гарантирует высокую скорость работы и производства нового контента, минимум ошибок. Все ключевые и продуктовые страницы сайта — в едином стиле.Конструктор 3D-иллюстраций
Сделали стандартные сцены и базовые наборы элементов для создания новых иллюстраций. Хороший инструмент для будущего масштабирования, стандартизации и подключения любых новых дизайнеров к проекту.
Всего создали 900 стильных иллюстраций для разных направлений ПСБ. Сейчас визуальный стиль иллюстраций используется и для офлайн-материалов.
![иллюстрации для банка ПСБ.png иллюстрации для банка ПСБ.png](/upload/medialibrary/407/0uvm1xj7rixplumqkftln2nj118w0uqy.png)
Удобно с мобильного
Сделали адаптивы всех дизайн-решений под мобильные устройства.
![адаптивный дизайн для ПСБ.png адаптивный дизайн для ПСБ.png](/upload/medialibrary/3e3/w23f3pbj6haeshz0o9f2g8r0lse55vrt.png)
Результаты проекта
Мы помогли ПСБ измениться и выйти на рынок с новым современным образом и визуальным языком. Сделали сайт ПСБ простым и удобным для пользователей. Построили и отладили все уникальные командные процессы.Проект в цифрах:
- 1 дизайн-система;
- 1 редакционная политика;
- 1 конструктор 3D-иллюстраций;
- 11 направлений бизнеса;
- 30 человек в команде aim digital;
- 300 новых страниц;
- 900 иллюстраций;
- 5000 страниц текстов;
- 3 000 000 пользователей в месяц.
- 1 место в номинации «Лучший сайт банка»
- 1 место в номинации «Финансовые сервисы и онлайн-банкинг»
- 2 место в номинации «Лучший сайт для потребителей».
![иллюстрации сайта банка ПСБ.png иллюстрации сайта банка ПСБ.png](/upload/medialibrary/e07/4bi13x11san9rh7gq93pte05cjlas9kj.png)