«Билет в будущее»

Рассказываем, как делали проект, который помогает миллиону школьников выбрать профессию мечты.

WorldSkills — некоммерческое международное движение, его цель — развитие профессионального мастерства. В 2018 году WorldSkills Russia по поручению президента России приступила к реализации «Билета в будущее» — всероссийского образовательного проекта по профориентации школьников 6–11 классов. Он помогает детям познакомиться с востребованными профессиями в теории и на практике.

К «Билету в будущее» мы присоединились в 2019 году для редизайна и разработки фронтенда на онлайн-платформе проекта, а в 2020 году переписали бэкенд. Вместе с WorldSkills Russia мы запустили новую версию «Билета в будущее».

Расскажем про устройство «Билета в будущее», создание дизайна для его онлайн-платформы, а также о том, какие три стадии прошла команда red_mad_robot и WorldSkills Russia, прежде чем наладить релиз фич.

Поделимся, как проектировали дизайн платформы и выстраивали работу команды. Почему нас чуть не погубил Scrum, а Kanban с дорожной картой, напротив — стал нашим спасением. И поделимся аналитикой по проекту за 2020 год.

Что такое «Билет в будущее» и как он устроен

Цель проекта — помочь школьникам осознанно выбрать будущую профессию. В рамках проекта они проходят тесты, участвуют в онлайн- и офлайн-мероприятиях от WorldSkills Russia. Дети получают советы от наставников и рекомендации по дальнейшим шагам в своей образовательной и профессиональной траектории:

  1. 1_Какие сильные стороны нужно развивать.
  2. 2_Какие профориентационные мероприятия в своём городе можно посетить.
  3. 3_Какой выбрать трек профессионального развития и где учиться выбранной специальности.

В проекте могут участвовать школьники из разных уголков России. Для этого ребёнку нужно пройти онлайн-диагностику (тестирование) на любую понравившуюся тему и после этого зарегистрироваться на платформе.

Главная страница сайта «Билета в будущее»

После регистрации ребёнок получает доступ к остальным интерактивным онлайн-диагностикам. Они помогают ему лучше понять себя — оценить вербальные и социально-эмоциональные способности, внимательность и другие особенности. Также есть тесты по направлениям: программирование, предпринимательство, 3D-моделирование и другим.

100

профессий доступно школьникам

59

тестов можно пройти в рамках профессий

650 000

детей прошли тесты за 2020 год

Вместе с доступом к тестам, ребёнок получает возможность записаться на практические мероприятия от WorldSkills Russia: в своём регионе в очном и онлайн-форматах, или по всей стране в онлайн-формате. Все мероприятия проходят под руководством опытных наставников: они анализируют успехи участников и дают обратную связь.

За 2020 год мы провели более 100 тысяч профориентационных мероприятий, а участие в них приняли более 160 тысяч учеников. Более 5 тысяч наставников прошли повышение квалификации.

Владислав Проскурин
директор департамента управления данными WorldSkills Russia

Чем больше тестов проходит ребёнок и чем чаще посещает профильные мероприятия, тем быстрее в его личном кабинете обновляется цифровой профиль. Он формируется по четырём направлениям: знания в определённой области, общие интересы, hard skills и soft skills. Со временем из графиков вырисовывается ясная картина сильных и слабых сторон участника.

Личный кабинет участника на сайте «Билета в будущее»

В рамках проекта можно посетить профориентационные мероприятия в колледжах, университетах, детских технопарках «Кванториум» и лабораториях вузов.

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

Работа над дизайном

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

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

Вся система должна была работать как швейцарские часы, где каждый подключается на определённом этапе и выполняет свою задачу. Чтобы оперативно вникать в процессы и разговаривать друг с другом на одном языке, мы решили построить Service Blueprint.

Ольга Саратакова
руководитель дизайн-практики red_mad_robot
Service Blueprint. Карта на борде в Miro, показывающая, как устроена программа профориентации учеников

Мы начали с проектирования UX и UI личных кабинетов организаторов на онлайн-платформе. Взаимодействовали в единой связке с методологами WorldSkills Russia. Коротко работа над дизайном одного личного кабинета выглядела так:

  1. 1_Первый день. Выбираем одну из ролей организаторов. Разбираемся в том, как именно он будет выполнять свою задачу, составляем список функций и одновременно прикидываем структуру кабинета. 
  2. 2_Второй день. Рисуем на бумаге вайрфреймы (условные макеты, отражающие структуру и содержание) основных разделов будущего кабинета. Тут же показываем WorldSkills Russia, получаем обратную связь, дорабатываем.
  3. 3_Третий и четвёртый день. Отрисовываем детальные макеты в Figma уже со всеми данными.
  4. 4_Пятый день. Смотрим итоговые макеты с методологами WorldSkills Russia и вносим исправления.

Затем ещё неделю разработчики адаптировали дизайн под нужные размеры экрана и продумывали краевые состояния: ошибки, экраны с нулевым контентом и так далее.

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

Версия сайта для слабовидящих

У нас была ещё одна важная задача — сделать версию сайта для людей с ограниченными возможностями здоровья. Основные моменты, которые мы учли при его создании:

  1. 1_Чтобы обеспечить контраст, использовали рекомендуемые цветовые схемы: белый текст на чёрном фоне, чёрный текст на белом фоне и тёмно-синий текст на голубом фоне. Схему можно настроить в меню.
  2. 2_Предусмотрели возможность включения и отключения изображения.
  3. 3_Добавили возможность увеличить размер шрифта без вспомогательных технологий.
Экраны версии сайта «Билета в будущее» для слабовидящих, версия 2020 года

Я посмотрела требования ГОСТ, прочитала несколько полезных статей, просмотрела огромное количество сайтов для слабовидящих, изучила их, чтобы понять основные принципы и найти верный подход.

Даша Князева
дизайнер red_mad_robot

В работе я использовала плагин Color Blind в Figma. С помощью симуляции он помогает понять, как меняются цвета в зависимости от особенностей зрения. Это помогло нам расставить правильные визуальные акценты и фокусы для пользователя.

Юлия Тё
старший дизайнер red_mad_robot
Пример работы плагина Color Blind в Figma

В общей сложности мы:

  1. 1_Сделали адаптивный сайт, рассказывающий о сути программы.
  2. 2_Создали его версию для слабовидящих.
  3. 3_Создали личный кабинет ученика, с возможностью проходить тестирование и отслеживать прогресс в режиме геймификации, «прокачивая» свои навыки как в RPG.
  4. 4_Запустили рабочие кабинеты для наставников, региональных операторов, площадок и партнёров.

А ещё была концепция сайта, которая не вошла в релизную версию, и она нам тоже очень нравится :)

Настройка команды и налаживание релиза фич

С точки зрения выстраивания работы, команда red_mad_robot и WorldSkills Russia прошла три больших стадии. Первая — организационная. На ней мы делали всё возможное (и невозможное) для создания первого релиза и занимались сетапом базовых вещей.

Первым делом мы выпустили административное веб-приложение. Это была самая базовая версия админок, где региональные операторы (отвечают за проект в своем регионе), площадки и наставники могли регистрироваться. После этого мы сделали первую версию пользовательского приложения, в которой ученик мог зарегистрироваться и пройти четыре стартовых теста.

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

Игорь Иванов
менеджер проектов red_mad_robot

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

Также у нас были отдельные доски в Jira под каждый спринт, на которых мы двигали задачи в зависимости от их выполнения. Как только двигать было нечего — релизили. Всё чётко и прозрачно. Это была привычная модель для гибких команд и она нам отлично подходила до поры до времени, но потом мы поняли, что у нас страдает поток создания ценности.

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

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

Игорь Иванов
менеджер проектов red_mad_robot

К счастью, нашей железной команде не страшна гибкость, поэтому мы перешли на Kanban и road map — это третья стадия. Такое решение помогло ускорить выпуск фичей — мы не зависели от конкретных сроков и готовили параллельно несколько релизов независимых друг от друга.

Как только всё было готово — релизили, если прилетала какая-то новая горящая фича — двигали что-то менее значимое и ставили её вперёд. Теперь у нас был гибкий план, который мы вели в таблице.

Во время планирования загрузки на следующую неделю мы распределяли задачи между инженерами и ясно понимали, когда и какую фичу выкатывать на тестовый стенд, а когда релизить в продакшн. Чаще всего у нас получалось 2–3 фичи в неделю.

Игорь Иванов
менеджер проектов red_mad_robot
Планирование загрузки инженеров при параллельной разработке фичей, один цвет = один стрим работ

С начала ноября 2020 года мы вернулись к релизным циклам, но сократили спринт до одной недели. Это позволяет выдержать баланс между скоростью выпуска фичей, соблюдением процессов и работоспособностью команды.

Что в итоге

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

Такие компании, как «Ростелеком» и «Университет Иннополис», стали партнёрами WorldSkills Russia, просто зарегистрировавшись на платформе через отдельное административное веб-приложение. С помощью него они могут подключать своих наставников, проводить онлайн- и офлайн-мероприятия.

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

Слева направо: аналитический дашборд с рефлексией; портрет пользователя за период с 29 сентября до 26 октября 2020 года; воронка от регистрации ученика до прохождения профпробы за период с 1 января до 30 ноября 2020 года.

В пиковые моменты онлайн-платформу проекта посещают более 100 тысяч пользователей, а общее количество новых регистраций в 2020 году превысило миллион человек. Такое платформенное решение с мобильной версией сайта и мобильным приложением, позволило сделать доступным участие в проекте для школьников из разноудалённых населённых пунктов субъектов Российской Федерации. Так в 2020 году участие в проекте приняли школьники из 5000 населенных пунктов из 82 субъектов Российской Федерации. Всего за прошлый год платформу посетили более 3 млн уникальных пользователей. Мы надеемся, что «Билет в будущее» дал возможность каждому участнику найти профессию мечты.

Евгения Кожевникова
директор департамента по реализации проектов развития детей и молодёжи WorldSkills Russia