Клиент

«Стальное дерево» — грантовый конкурс для поддержки социально значимых общественных инициатив, которые направлены на создание благоприятной среды проживания. Проект является инициативой Фонда «Милосердие» — социального партнера НЛМК.

Цель 

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

Задачи

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

2. Автоматизировать работу с заявками конкурсантов:

• подачу и сбор;
• прохождение по этапам;
• обработку и оценку;
• отчетность.

Решение

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

Публичная часть

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

2. Все повествование идет по единой центральной линии, пронизывающей главную страницу и олицетворяющей ствол дерева. Контент размещен подобно широко раскинутым ветвям — по обе стороны от ствола. 

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

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

5. Интерфейс построен по принципу mobile first. Блоки упрощены, ненужная информация скрыта — все управление осуществляется пальцем одной руки.

6. Для эффектных анимаций использовали библиотеки:

• gsap — для анимации всех элементов сайта;

• select2 — для реализации выпадающих списков (селектов);

• magnific popup — для реализации попапов (всплывающих окон);

• parsley.js — для валидации полей;

• swiper — для реализации слайдеров;

• lottie — для анимации дерева на первом экране.

Внутренний портал

1. Разработали четыре вида личных кабинетов для разных типов пользователей:

• участников (отправляют заявку на конкурс);

• кураторов (проверяют заявку на соответствие требованиям и назначают эксперта);

• экспертов (оценивают заявку по критериям);

• администраторов (управляют работой портала и имеют доступ ко всем видам ЛК).

• Все кабинеты внешне идентичны, отличаются функционалом.
  

2. Динамические прототипы ЛК разработаны на основе детально продуманных пользовательских путей и подробных сценариев работы с заявкой в зависимости от роли.

3. Все личные кабинеты собраны из элементов библиотеки vuetify и стилизованы под интерфейс публичной части сайта — дизайнеры, backend- и frontend-разработчики работали в тесной связке. Зачастую программисты готовили среду до подключения верстки, чтобы рисовать интерфейс на «живых»‎ данных и при необходимости гибко вносить изменения.

4. За основу онлайн-заявки для участников мы взяли презентации, которые раньше участники присылали в качестве заявки на конкурс.

5. Форма подачи заявки представлена в виде дорожной карты, разделенной на шесть шагов — перед заполнением можно ознакомиться с каждым этапом, подготовить материалы и оценить объем времени на заполнение.

6. На каждом этапе заполнения заявку можно сохранить и вернуться к заполнению позже. 

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

8. В ЛК эксперта автоматически формируется Рейтинг — таблица, в которой агрегируются данные о проектах: название, ФИО участника, контакты, регион, желаемая сумма гранта, средний балл. Для удобства таблицу можно фильтровать, сортировать и сохранять в виде Excel-файла. 

9. Для оперативного информирования участников о промежуточных результатах и комментариях экспертов предусмотрена автоотправка уведомлений в ЛК и на e-mail.

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

Результат 

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

Автоматизированная работа с заявками:

• экономит время специалистов на ведение сводной информационной базы и общение с конкурсантами;

• сокращает время оценивания — теперь не нужно заполнять таблицы вручную;

• привлекает релевантных конкурсантов.