Портал грантового конкурса «Стальное дерево»
Благотвори-тельный фонд «Милосердие»
2022
Аналитика
UX/UI дизайн
Frontend
Backend
SEO
«Стальное дерево» — грантовый конкурс для поддержки социально значимых общественных инициатив, которые направлены на создание благоприятной среды проживания. Проект является инициативой Фонда «Милосердие» — социального партнера НЛМК.
280+ реализованных проектов
5 регионов участия
•
•
Цель
Создать единую платформу с исчерпывающей информацией о конкурсе и полностью автоматизировать процесс работы с заявками участников.
Задачи
•
Проинформировать пользователей о задачах, условиях и этапах благотворительного проекта.
•
Автоматизировать работу с заявками конкурсантов:
–
подачу и сбор;
–
прохождение по этапам;
–
обработку и оценку;
–
отчетность.
Решение
Портал разделен на две части — публичную с информацией о концепции конкурса и деталях его проведения, и внутреннюю — в виде личных кабинетов участников, кураторов и экспертов.
Публичная часть
Погружаем пользователя в проект с первого экрана — уникальная графика в виде дерева с пышной кроной в фирменных брендовых цветах: мягком зеленом и «стальном».
01
Все повествование идет по единой центральной линии, пронизывающей главную страницу и олицетворяющей ствол дерева. Контент размещен подобно широко раскинутым ветвям — по обе стороны от ствола.
02
Внизу главной страницы разместили форму регистрации на конкурс, чтобы после ознакомления с деталями пользователь мог сразу отправить заявку.
03
Таймлайн с подсветкой текущего этапа конкурса позволяет участникам быстро ориентироваться в процессе.
04
Интерфейс построен по принципу mobile first. Блоки упрощены, ненужная информация скрыта — все управление осуществляется пальцем одной руки.
05
Для эффектных анимаций использовали библиотеки:
06
•
gsap — для анимации всех элементов сайта;
•
select2 — для реализации выпадающих списков (селектов);
•
magnific popup — для реализации попапов (всплывающих окон);
•
parsley.js — для валидации полей;
•
swiper — для реализации слайдеров;
•
lottie — для анимации дерева на первом экране.
Внутренний портал
Разработали четыре вида личных кабинетов для разных типов пользователей:
01
–
участников (отправляют заявку на конкурс);
–
кураторов (проверяют заявку на соответствие требованиям и назначают эксперта);
–
экспертов (оценивают заявку по критериям);
–
администраторов (управляют работой портала и имеют доступ ко всем видам ЛК).
Все кабинеты внешне идентичны, отличаются функционалом.
Динамические прототипы ЛК разработаны на основе детально продуманных пользовательских путей и подробных сценариев работы с заявкой в зависимости от роли.
02
Все личные кабинеты собраны из элементов библиотеки vuetify и стилизованы под интерфейс публичной части сайта — дизайнеры, backend- и frontend-разработчики работали в тесной связке. Зачастую программисты готовили среду до подключения верстки, чтобы рисовать интерфейс на «живых» данных и при необходимости гибко вносить изменения.
03
За основу онлайн-заявки для участников мы взяли презентации, которые раньше участники присылали в качестве заявки на конкурс.
04
Форма подачи заявки представлена в виде дорожной карты, разделенной на шесть шагов — перед заполнением можно ознакомиться с каждым этапом, подготовить материалы и оценить объем времени на заполнение.
05
На каждом этапе заполнения заявку можно сохранить и вернуться к заполнению позже.
06
Если в ходе проверки заявки куратор оставит комментарий в заявке участника, этап выделится цветом на дорожной карте — так участник быстро увидит блок, который нужно доработать.
07
В ЛК эксперта автоматически формируется Рейтинг — таблица, в которой агрегируются данные о проектах: название, ФИО участника, контакты, регион, желаемая сумма гранта, средний балл. Для удобства таблицу можно фильтровать, сортировать и сохранять в виде Excel-файла.
08
Для оперативного информирования участников о промежуточных результатах и комментариях экспертов предусмотрена автоотправка уведомлений в ЛК и на e-mail.
09
Отчитаться о расходовании средств грантополучателям поможет специальный раздел сайта, в котором размещен шаблон отчетности и рекомендации по ее составлению.
10
Результат
Онлайн-платформа стала новым удобным инструментом для участников грантовой программы «Стальное дерево» 2023 года. Она дает полное представление о конкурсном отборе и упрощает процедуру подачи заявки и отслеживания всех этапов ее прохождения.
Автоматизированная работа с заявками:
Автоматизированная работа с заявками:
•
экономит время специалистов на ведение сводной информационной базы и общение с конкурсантами;
•
сокращает время оценивания — теперь не нужно заполнять таблицы вручную;
•
привлекает релевантных конкурсантов.
Команда
Диана Олейник
Руководитель проекта
Петр Мострюков
Арт-директор
Виктория Денис
Ведущий дизайнер
Дмитрий Мекеров
Эмиль Тухватуллин
Анастасия Рябикова
Эмиль Тухватуллин
Анастасия Рябикова
Frontend-разработчики
Мария Шестерякова
Аналитик
Анастасия Луканова
Редактор
Янина Юллинен
Дизайнер
Backend-разработчик
Олег Викторов
QA-специалисты
Олеся Федорова
Станислав Анисимов
Анастасия Чернухина
Станислав Анисимов
Анастасия Чернухина
Контент-менеджеры
Иван Петров
Евгений Николаев
Евгений Николаев
SEO-специалисты
Елена Ильченко
Алена Емельянова
Алена Емельянова
Кейсы
Фасадные решения
Корпоративный сайт поставщика строительных услуг
ГИС «Энергоэффективность»
Система отчетности по выбросу парниковых газов
Merz
Социальный проект фармацевтической компании о сиалорее
Fleet Finance
Промо-сайт компании по лизингу спецтехники
Комментарии к статье
Комментарии: 0