Сайт для Национальной технологической олимпиады

Заказчик«Кружковое движение» — это ассоциация участников технологических кружков, основанная в 2017 году.Цель ее работы — активная поддержка и развитие образовательных инициатив в технической сфере.ЗадачаКлиент обратился к нам за помощью в обновлении уже существующего сайта проекта «Национальная технологическая олимпиада».Старая версия сайта нуждалась в свежем дизайне и в гибкой системе управления.

Решение:

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

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

a8ea7e4887db7a5bb4e5df5004350bb1.jpg

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

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

5ee43d02ecae42d1062a5713a21f817e.jpg

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

62ca33ad5eb07d1ffeb70659a2e0d6d7.jpg

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

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

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

2a54bb1e2af45251d26348d27587be70.jpg

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

Дизайн

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

b73d583681edec598f91f639a46f165d.jpg

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

66965d101b2cdd0002125a000cda0fc4.jpg

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

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

Результат

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

Перейти на сайт

Полный текст статьи читайте на CMS Magazine