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

Благотвори-тельный фонд «Милосердие»
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-специалисты
Елена Ильченко
Алена Емельянова

Блог

27 марта 2024

Сайты аэропортов: как дизайн преображает пассажирский опыт и расширяет источники доходов владельцев

26 марта 2024

Взаимодействие человека и компьютера: как улучшить UX в 2024 году

28 февраля 2024

Авторское право и нейросети: кто владеет результатами ИИ-творчества

Кейсы

Аналитика UX/UI дизайн

No-code

Data Sapience

Промо-сайт российского вендора IT-решений для бизнеса

Аналитика UX/UI дизайн Frontend Backend SEO
110+ лет

на мировом рынке

2 место

в мире занимает филиал РФ по объему продаж

Merz

Социальный проект фармацевтической компании о сиалорее

Аналитика UX/UI дизайн Frontend Backend SEO
3+

млн участников

89

региональных отделений

Движение первых

Методический портал Российского движения детей и молодежи

Аналитика UX/UI дизайн Frontend Backend SEO
50+

лет на рынке

4000+

сотрудников

Элара

Сайт ведущего приборостроительного предприятия страны

Аналитика UX/UI дизайн Frontend Backend SEO
12%

доля в общем объеме перевозок сети РЖД

3000+

сотрудников

ПГК

Сайт крупнейшего частного оператора грузовых ж/д перевозок в России

Скоро

А ГРУПП

Сайт металлотрейдинговой компании

Расскажите
о вашем проекте