Как мы разработали сайт для Финзачета, а ~1 500 000 человек прошли его за 2,5 недели

Рассказываем, как мы в ДАЛЕЕ вместе с Банком России запустили за 1,5 месяца самый массовый зачет по финансовой грамотности для россиян.

Финзачет — это ежегодный онлайн-зачет, который проводится по инициативе Банка России с 2017 года. Он нужен, чтобы привлекать внимание населения к теме финансовой грамотности. Зачет помогает понять, насколько хорошо человек управляет личным или семейным бюджетом, ориентируется ли он в финансовых продуктах и услугах, сможет ли распознать мошеннические схемы.

Мы в ДАЛЕЕ работаем с проектом с 2021 года. Сначала с нуля разработали сайт для Финзачета — от user journey до рекламного продвижения. В 2021 году меньше чем за три недели в нем приняли участие 600 000 человек, а на сайт зашли более 900 000 уникальных посетителей. В этом году переделывали дизайн и привлекали новые сегменты аудитории, а также работали над отказоустойчивостью сайта. В итоге добились почти трехкратного роста прохождений зачета. И все это — за полтора месяца.

Как мы утверждали требования к проекту

Как показывает статистика за 5 лет, аудитория у Финзачета большая. Он популярен у разных категорий пользователей — от школьников и студентов до начинающих инвесторов, бизнесменов и пользователей финансовых приложений. В 2022 году Банк России еще и решил привлечь новые аудитории:

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

Отсюда вытекает первое требование к дизайну:

Дизайн Финзачета должен быть универсальным: привлекательным и понятным и школьнику, и студенту, и взрослому, и пенсионеру

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

Дизайн и юзабилити должны побуждать пользователя делиться ссылкой со знакомыми

Интерфейс должен «общаться» с пользователем на одном языке и понимать его потребности с полуклика.

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

Дизайн должен вписываться в общий визуальный язык Банка России, но при этом быть оригинальным

Так родилась идея, которая сочетает строгие шрифты и яркую палитру, характерную для продуктов ЦБ, с иллюстрациями. Яркая подача стимулирует вовлеченность и продолжительную коммуникацию. Дизайн захватывает внимание пользователя за счет контрастов. Оба года мы не отходили от общей концепции, хотя дизайн 2021 и 2022 годов сильно отличается.

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

Дизайн 2021 года

В этом году мы отказались от 3D, сделав акцент на графичности и флэтовых иллюстрациях, которые подсвечивают важную информацию. Помимо этого использовали цветовое кодирование на сайте. Каждый лендинг имеет свой акцент — желтый для личного, розовый — для семейного.

Дизайн 2022 года
Главная страница

Структура сайта и разделение аудитории

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

В 2022 году Финзачет предполагал несколько типов заданий:

  • Для школьников (с разбивкой по 4 категориям);

  • Для взрослых (18-60 лет, плюс два типа вопросов в зависимости от уровня: базовый и продвинутый);

  • Для пенсионеров (60+ лет).

Возраст участника определялся на этапе регистрации и при входе в ЛК пользователь автоматически получает доступ к зачету своей возрастной категории. Таким образом, user flow не перекрещивался, структура сайта упростилась.

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

Информационная подача

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

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

Страница с результатами

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

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

Вот некоторые персонажи из тех, что присваивались пользователям

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

Сертификаты по итогам прохождения теста

Как мы готовили сайт к суточным нагрузкам 200 000+ пользователей

А теперь самое интересное. Финзачет — инициатива федерального уровня и не только на словах. После запуска Банк России задействовал множество ресурсов для привлечения аудитории: миллионные базы рассылок, собственные ресурсы, а также рекламных специалистов агентства СКОТЧ. Такие нагрузки требуют соответствующей подготовки платформы.

Суточная посещаемость сайта Финзачета на момент проведения составила порядка 230 000 пользователей. В час на сайте находилось ~20 000 пользователей. При этом логика сайта такова, что один пользователь генерирует сразу много запросов к бэкенду. Например, при выполнении зачета сохраняется каждый шаг.

В этом проекте мы использовали методологию 12-факторного приложения. Это значит, что база данных (БД), кэш и пользовательские сессии представляют собой подключаемые к бэкенду ресурсы. Балансировщики нагрузки распределяют пользовательский трафик на пул бэкендов. Его можно расширять добавлением новых серверов для обработки большего числа запросов.

Помимо этого мы использовали SPA с CDN и с кешированием частоиспользуемых элементов сайта. Это помогло:

  • Снизить нагрузку на бекенд, увеличивая эффективность обработки бизнес-логики;
  • Масштабировать все слои архитектуры независимо друг от друга, добавляя ресурсы по мере надобности;

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

Результаты

Финзачет проходил с 1 по 18 декабря 2022 года. Вот результаты в цифрах:

  • Среднесуточная посещаемость — 230 000 человек

  • Пиковая посещаемость — 425 000 пользователей за день

  • Общее количество посещений за все время работы проекта — ~ 3 525 000 пользователей

  • Общее количество прошедших зачет — почти 1 500 000 человек.

ДАЛЕЕ — диджитал-агентство с командой из 200+ специалистов, на рынке с 2005 года. Занимаемся разработкой больших корпоративных проектов разной сложности для гигантов рынка: Банк России, Nestle, МЕДСИ, Sandoz, Haier.

0
25 комментариев
Написать комментарий...
Слегка Придурковатый

Стыдоба.

Ответить
Развернуть ветку
ДАЛЕЕ
Автор

Стыдоба из-за опечатки в макете для статьи? Забавно. Но исправили, вы весьма внимательны)

Ответить
Развернуть ветку
Энрике Рафа

Это ваша профессиональная деятельность вообще-то. Парень выше хоть и слегка придурковатый, но верно подметил.

Ответить
Развернуть ветку
ДАЛЕЕ
Автор

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

Ответить
Развернуть ветку
Слегка Придурковатый

Щетаю, в данном случае нужно именно стыдить. Потому что: 1) вы сотрудничаете с ЦБ, а не с конторой "Рога и копыта"; 2) сайт о грамотности (пусть и финансовой). Должны вылизывать каждую буковку, каждый пробел.

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

Ответить
Развернуть ветку
King Savage

Правильно щетаешь )

Ответить
Развернуть ветку
Ольга Плиева

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

Ответить
Развернуть ветку
Энрике Рафа

Ольга, отрадно, что наши с Придурковатым комментарии побудили вас написать первые комментарии на VC, но иногда лучше промолчать, чем врубать обиженку. Агентство ваше от этого только выиграет.

Ответить
Развернуть ветку
Ольга Плиева

Отрадно, что вы не видите, что аккаунт у меня зареган аж с 2018 года

Ответить
Развернуть ветку
Энрике Рафа

Ольга, вы вроде и прочитали мой комментарий, но сути не увидели. К тому же я написал: побудили НАПИСАТЬ ПЕРВЫЕ КОММЕНТАРИИ. Это ведь первые ваши комментарии здесь? Тогда причем тут дата регистрации?

Ответить
Развернуть ветку
Alexey

Граммар-наци совсем мимо, но раз вы не видите то для вас это прям событие...

Ответить
Развернуть ветку
Ольга Плиева

В целом, ваш комментарий тоже мимо...

Ответить
Развернуть ветку
Alexey

Ну вам виднее..

Ответить
Развернуть ветку
Alexey

Да, стыдоба.
Нет?

Ответить
Развернуть ветку
Антон

Банк России задействовал множество ресурсов для привлечения аудитории

Ответить
Развернуть ветку
Алексей Маевский

"После запуска Банк России задействовал множество ресурсов для привлечения аудитории" - как работник бюджетной сферы небольшого городка на 50к могу точно сказать о каналах: требования были от руководства района для работников бюджета 100℅, для членов семей 1 человек на работника. И всё с отчётами и скринами. А это школы, ЦСО, культура, медицина, училища, администрация и т. д. А задело меня потому, что нужно было проходить за десятки людей эти тесты ввиду отсутствия у них смартфонов и компов, а кроме этого желания и самое главное времени на изучение.

Ответить
Развернуть ветку
ДАЛЕЕ
Автор

Что вас смутило в этой фразе? Или шеринг бесплатного образовательного проекта по чатам — это плохо?

Ответить
Развернуть ветку
Антон

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

Ответить
Развернуть ветку
Ахимас Вельде

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

Ответить
Развернуть ветку
ДАЛЕЕ
Автор

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

Ответить
Развернуть ветку
Viacheslav Panev

1,5 млн это вы перегнули мне кажется

Ответить
Развернуть ветку
Alex Gunt

Вам только кажется. Сегодня 1,5 млн - это особо ни о чем.

Ответить
Развернуть ветку
ДАЛЕЕ
Автор

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

Ответить
Развернуть ветку
Ахимас Вельде

Не такая космическая цифра, как кажется. Вполне реально добиться.

Ответить
Развернуть ветку
King Savage

За какую цену вы сделали данный сайт и его раскрутку ?

Ответить
Развернуть ветку
22 комментария
Раскрывать всегда