Портал грантового конкурса «Стальное дерево»

Главное о кейсе

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

Как проект изменил жизнь пользователей

Автоматизированная работа с заявками:
- экономит время специалистов на ведение сводной информационной базы и общение с конкурсантами;
- сокращает время оценивания — теперь не нужно заполнять таблицы вручную;
- привлекает релевантных конкурсантов.

Бизнес-задача и ее решение

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

Задачи:
1. Проинформировать пользователей о задачах, условиях и этапах благотворительного проекта.
2. Автоматизировать работу с заявками конкурсантов:
подачу и сбор;
- прохождение по этапам;
- обработку и оценку;
- отчетность.

Решение:

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

Внутренний портал:
1. Разработали четыре вида личных кабинетов для разных типов пользователей:
-участников (отправляют заявку на конкурс);
-кураторов (проверяют заявку на соответствие требованиям и назначают эксперта);
-экспертов (оценивают заявку по критериям);
-администраторов (управляют работой портала и имеют доступ ко всем видам ЛК).
Все кабинеты внешне идентичны, отличаются функционалом.
2. Динамические прототипы ЛК разработаны на основе детально продуманных пользовательских путей и подробных сценариев работы с заявкой в зависимости от роли.
3. Все личные кабинеты собраны из элементов библиотеки vuetify и стилизованы под интерфейс публичной части сайта — дизайнеры, backend- и frontend-разработчики работали в тесной связке. Зачастую программисты готовили среду до подключения верстки, чтобы рисовать интерфейс на «живых»‎ данных и при необходимости гибко вносить изменения.
4. За основу онлайн-заявки для участников мы взяли презентации, которые раньше участники присылали в качестве заявки на конкурс.
5. Форма подачи заявки представлена в виде дорожной карты, разделенной на шесть шагов — перед заполнением можно ознакомиться с каждым этапом, подготовить материалы и оценить объем времени на заполнение.
6. На каждом этапе заполнения заявку можно сохранить и вернуться к заполнению позже.
7. Если в ходе проверки заявки куратор оставит комментарий в заявке участника, этап выделится цветом на дорожной карте — так участник быстро увидит блок, который нужно доработать.
8. В ЛК эксперта автоматически формируется Рейтинг — таблица, в которой агрегируются данные о проектах: название, ФИО участника, контакты, регион, желаемая сумма гранта, средний балл. Для удобства таблицу можно фильтровать, сортировать и сохранять в виде Excel-файла.
9. Для оперативного информирования участников о промежуточных результатах и комментариях экспертов предусмотрена автоотправка уведомлений в ЛК и на e-mail.
10. Отчитаться о расходовании средств грантополучателям поможет специальный раздел сайта, в котором размещен шаблон отчетности и рекомендации по ее составлению.

Публичная часть:
1. Погружаем пользователя в проект с первого экрана — уникальная графика в виде дерева с пышной кроной в фирменных брендовых цветах: мягком зеленом и «стальном».
2. Все повествование идет по единой центральной линии, пронизывающей главную страницу и олицетворяющей ствол дерева. Контент размещен подобно широко раскинутым ветвям — по обе стороны от ствола.
3. Таймлайн с подсветкой текущего этапа конкурса позволяет участникам быстро ориентироваться в процессе.
4. Внизу главной страницы разместили форму регистрации на конкурс, чтобы после ознакомления с деталями пользователь мог сразу отправить заявку.
5. Интерфейс построен по принципу mobile first. Блоки упрощены, ненужная информация скрыта — все управление осуществляется пальцем одной руки.

Крафт (мастерство), реализация, технические детали

Для эффектных анимаций использовали библиотеки:
-gsap — для анимации всех элементов сайта;
-select2 — для реализации выпадающих списков (селектов);
-magnific popup — для реализации попапов (всплывающих окон);
-parsley.js — для валидации полей;
-swiper — для реализации слайдеров;
-lottie — для анимации дерева на первом экране.

Скриншоты