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

1. Вводная задача от заказчика, проблематика, цели

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

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

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

Дизайн

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

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

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

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

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

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