Представляем кейс по обновлению сайта для проекта “Национальная техническая олимпиада”.

Клиент

“Кружковое движение” – это ассоциация участников технологических кружков, основанная в 2017 году. Цель ее работы – активная поддержка и развитие образовательных инициатив в технической сфере. Ассоциация работает в нескольких направлениях. Один из проектов – это Национальная технологическая олимпиада, организованная для всех школьников и студентов, которые хотят стать востребованными специалистами и не боятся учиться новому.

Задача

Клиент обратился к нам за помощью в обновлении уже существующего сайта проекта “Национальная технологическая олимпиада”. Старая версия сайта нуждалась не только в свежем дизайне, но и в гибкой системе управления, которая бы позволяла быстро и удобно вносить изменения под новые форматы и активности олимпиады. 

Решение

Разработка новой концепции сайта

Сайт разрабатывался для двух целевых аудиторий – “Ученики” и “Наставники”, поэтому важно было изначально продумать качественный UX дизайн и интуитивно понятную структуру для обеих категорий пользователей.

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

Мы сделали навигацию на сайте максимально простой и удобной для пользователей. Проработали разделы сайта. Для каждого направления олимпиады создали раздел “Профиль”. На странице профиля можно найти всю важную информацию о событии: расписание, требования к участникам, необходимую контактную информацию, подробное описание этапов олимпиады. Каждый профиль содержит теги, позволяющие легко перейти в список мероприятий на схожие темы.

Также реализовали систему умной фильтрации для разделов “Площадки для подготовки” и “Материалы подготовки”. Теперь пользователи могут легко находить все необходимое для эффективных занятий в рамках подготовки к мероприятиям: пройти нужный видеокурс, скачать данные или найти ближайшую офлайн-площадку. 

Работа над календарем олимпиад

Поскольку в рамках проекта проводится множество мероприятий, на сайт необходимо было добавить удобную и понятную схему, отображающую актуальные и предстоящие события. 

Основываясь на цветовом кодировании (условном обозначении отдельных направлений/сфер мероприятий), которое уже использовалось клиентом, мы разработали и отрисовали календарь олимпиад. Основные цвета стали обозначать этапы и статусы мероприятий.

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

Готовый календарь мы интегрировали во все страницы профилей мероприятий, при этом набор событий, отраженных в календаре, будет соотнесен с выбранным профилем. Таким образом, пользователь сможет увидеть все мероприятия по интересующей его теме.

Дизайн

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

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

Адаптация административной панели

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

Кроме того, мы создали возможность подтягивать визуализацию из Data Studio, что тоже значительно упрощает работу с сайтом.

Результат

Нам удалось создать удобный и современный сайт, целиком и полностью отражающий тематику проекта – инновации и технический прогресс. Клиент получил возможность легко управлять обновленным сайтом с помощью интуитивно понятной административной панели. У пользователей появилась возможность без труда находить всю нужную информацию за считанные минуты, ориентироваться в расписании мероприятий и присоединяться к проекту.