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

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. Отчитаться о расходовании средств грантополучателям поможет специальный раздел сайта, в котором размещен шаблон отчетности и рекомендации по ее составлению.

3. Результаты сотрудничества

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

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

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

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

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