«Билет в будущее»: как делали проект, который помогает миллиону школьников выбрать профессию мечты
Рассказываем про устройство «Билета в будущее», создание дизайна для его онлайн-платформы, а также о том, какие три стадии прошла команда red_mad_robot и WorldSkills Russia, прежде чем наладить релиз фич.
WorldSkills — некоммерческое международное движение, его цель — развитие профессионального мастерства. В 2018 году WorldSkills Russia по поручению президента России приступила к реализации «Билета в будущее» — всероссийского образовательного проекта по профориентации школьников 6–11 классов. Он помогает детям познакомиться с востребованными профессиями в теории и на практике.
К «Билету в будущее» мы присоединились в 2019 году для редизайна и разработки фронтенда на онлайн-платформе проекта, а в 2020 году переписали бэкенд. Вместе с WorldSkills Russia мы запустили новую версию «Билета в будущее».
Расскажем, как проектировали дизайн платформы и выстраивали работу команды. Почему нас чуть не погубил Scrum, а Kanban с дорожной картой, напротив — стал нашим спасением. И поделимся аналитикой по проекту за 2020 год.
Что такое «Билет в будущее» и как он устроен
Цель проекта — помочь школьникам осознанно выбрать будущую профессию. В рамках проекта они проходят тесты, участвуют в онлайн- и офлайн-мероприятиях от WorldSkills Russia. Дети получают советы от наставников и рекомендации по дальнейшим шагам в своей образовательной и профессиональной траектории:
- Какие сильные стороны нужно развивать.
- Какие профориентационные мероприятия в своём городе можно посетить.
- Какой выбрать трек профессионального развития и где учиться выбранной специальности.
В проекте могут участвовать школьники из разных уголков России. Для этого ребёнку нужно пройти онлайн-диагностику (тестирование) на любую понравившуюся тему и после этого зарегистрироваться на платформе.
После регистрации ребёнок получает доступ к остальным интерактивным онлайн-диагностикам. Они помогают ему лучше понять себя — оценить вербальные и социально-эмоциональные способности, внимательность и другие особенности. Также есть тесты по направлениям: программирование, предпринимательство, 3D-моделирование и другим.
Школьникам доступно 100 профессий, по которым они могут пройти 59 тестов. За 2020 год тесты прошли 650 тысяч детей.
Вместе с доступом к тестам, ребёнок получает возможность записаться на практические мероприятия от WorldSkills Russia: в своём регионе в очном и онлайн-форматах, или по всей стране в онлайн-формате. Все мероприятия проходят под руководством опытных наставников: они анализируют успехи участников и дают обратную связь.
За 2020 год мы провели более 100 тысяч профориентационных мероприятий, а участие в них приняли более 160 тысяч учеников. Более 5 тысяч наставников прошли повышение квалификации.
Чем больше тестов проходит ребёнок и чем чаще посещает профильные мероприятия, тем быстрее в его личном кабинете обновляется цифровой профиль. Он формируется по четырём направлениям: знания в определённой области, общие интересы, hard skills и soft skills. Со временем из графиков вырисовывается ясная картина сильных и слабых сторон участника.
В рамках проекта можно посетить профориентационные мероприятия в колледжах, университетах, детских технопарках «Кванториум» и лабораториях вузов.
Также участникам доступны ярмарки профессий, чемпионаты профмастерства и мастер-классы. На них школьники могут выполнять разные задания по выбранной профессии и погружаться в её особенности.
Работа над дизайном
На первый релиз новой версии платформы у нас было всего три месяца. Наша работа на проекте в 2019 году началась с проектирования дизайна. Нужно было сделать интерфейс удобным для взрослых и интересным для детей.
Первым делом мы в деталях разобрались, что должны сделать все участники проекта, чтобы в итоге школьник получил правильную и полезную рекомендацию, и визуализировали этот процесс в виде Service Blueprint.
Вся система должна была работать как швейцарские часы, где каждый подключается на определённом этапе и выполняет свою задачу. Чтобы оперативно вникать в процессы и разговаривать друг с другом на одном языке, мы решили построить Service Blueprint.
Мы начали с проектирования UX и UI личных кабинетов организаторов на онлайн-платформе. Взаимодействовали в единой связке с методологами WorldSkills Russia. Коротко работа над дизайном одного личного кабинета выглядела так:
- Первый день. Выбираем одну из ролей организаторов. Разбираемся в том, как именно он будет выполнять свою задачу, составляем список функций и одновременно прикидываем структуру кабинета.
- Второй день. Рисуем на бумаге вайрфреймы (условные макеты, отражающие структуру и содержание) основных разделов будущего кабинета. Тут же показываем WorldSkills Russia, получаем обратную связь, дорабатываем.
- Третий и четвёртый день. Отрисовываем детальные макеты в Figma уже со всеми данными.
- Пятый день. Смотрим итоговые макеты с методологами WorldSkills Russia и вносим исправления.
Затем ещё неделю разработчики адаптировали дизайн под нужные размеры экрана и продумывали краевые состояния: ошибки, экраны с нулевым контентом и так далее.
На дизайн и разработку личного кабинета для одной роли организатора у нас уходило не больше двух недель. Параллельно мы начали работу над сайтом, рассказывающим о проекте детям и их родителям, и личным кабинетом школьника.
Версия сайта для слабовидящих
У нас была ещё одна важная задача — сделать версию сайта для людей с ограниченными возможностями здоровья. Основные моменты, которые мы учли при его создании:
- Чтобы обеспечить контраст, использовали рекомендуемые цветовые схемы: белый текст на чёрном фоне, чёрный текст на белом фоне и тёмно-синий текст на голубом фоне. Схему можно настроить в меню.
- Предусмотрели возможность включения и отключения изображения.
- Добавили возможность увеличить размер шрифта без вспомогательных технологий.
Я посмотрела требования ГОСТ, прочитала несколько полезных статей, просмотрела огромное количество сайтов для слабовидящих, изучила их, чтобы понять основные принципы и найти верный подход.
В работе я использовала плагин Color Blind в Figma. С помощью симуляции он помогает понять, как меняются цвета в зависимости от особенностей зрения. Это помогло нам расставить правильные визуальные акценты и фокусы для пользователя.
В общей сложности мы:
- Сделали адаптивный сайт, рассказывающий о сути программы.
- Создали его версию для слабовидящих.
- Создали личный кабинет ученика, с возможностью проходить тестирование и отслеживать прогресс в режиме геймификации, «прокачивая» свои навыки как в RPG.
- Запустили рабочие кабинеты для наставников, региональных операторов, площадок и партнёров.
А ещё была концепция сайта, которая не вошла в релизную версию, и она нам тоже очень нравится :)
Настройка команды и налаживание релиза фич
С точки зрения выстраивания работы, команда red_mad_robot и WorldSkills Russia прошла три больших стадии. Первая — организационная. На ней мы делали всё возможное (и невозможное) для создания первого релиза и занимались сетапом базовых вещей.
Первым делом мы выпустили административное веб-приложение. Это была самая базовая версия админок, где региональные операторы (отвечают за проект в своем регионе), площадки и наставники могли регистрироваться. После этого мы сделали первую версию пользовательского приложения, в которой ученик мог зарегистрироваться и пройти четыре стартовых теста.
Это были такие большие блоки функциональности, которые мы постепенно тащили к релизу. Первые релизы были сложные, потому что на тот момент мы ещё разбирались с процессами развёртывания, со всей нашей инфраструктурой, базовыми сценариями, ещё у нас были затыки с доменами. Всё это, конечно, выматывало и требовало долгой стабилизации.
После создания фундамента наступила вторая стадия — наша команда начала перестраиваться на классическую двухнедельную модель, чем-то похожую на Scrum. Мы брали в спринты столько фичей, сколько можем переварить — не больше и не меньше, и это выглядело хорошей идеей.
Также у нас были отдельные доски в Jira под каждый спринт, на которых мы двигали задачи в зависимости от их выполнения. Как только двигать было нечего — релизили. Всё чётко и прозрачно. Это была привычная модель для гибких команд и она нам отлично подходила до поры до времени, но потом мы поняли, что у нас страдает поток создания ценности.
Многие фичи мы делали в начале спринта, но из-за релизов раз в две недели пользователи их получали только в конце. Такая трата времени была непозволительной роскошью: активная фаза проекта начиналась в июле и заканчивалась в ноябре. За этот период нужно было успеть провести детей по всем этапам проекта, иначе всё зря.
Был случай, когда релиз, который нельзя было сдвинуть по срокам, мы делали в три часа ночи. После такого эксперимента выгорание команды было уже не за горами. Было ясно, что в нашей работе явно что-то требовало перестройки. С двухнедельными спринтами мы пожили где-то пару-тройку месяцев и поняли, что так больше нельзя.
К счастью, нашей железной команде не страшна гибкость, поэтому мы перешли на Kanban и road map — это третья стадия. Такое решение помогло ускорить выпуск фичей — мы не зависели от конкретных сроков и готовили параллельно несколько релизов независимых друг от друга.
Как только всё было готово — релизили, если прилетала какая-то новая горящая фича — двигали что-то менее значимое и ставили её вперёд. Теперь у нас был гибкий план, который мы вели в таблице.
Во время планирования загрузки на следующую неделю мы распределяли задачи между инженерами и ясно понимали, когда и какую фичу выкатывать на тестовый стенд, а когда релизить в продакшн. Чаще всего у нас получалось 2–3 фичи в неделю.
С начала ноября 2020 года мы вернулись к релизным циклам, но сократили спринт до одной недели. Это позволяет выдержать баланс между скоростью выпуска фичей, соблюдением процессов и работоспособностью команды.
Что в итоге
Кроме проектирования дизайна, мы написали фронтенд и бэкенд платформы и сделали платформу «Билет в будущее» открытой. Она не замкнута сама в себе, поэтому к ней могут присоединиться любые другие площадки.
Такие компании, как «Ростелеком» и «Университет Иннополис», стали партнёрами WorldSkills Russia, просто зарегистрировавшись на платформе через отдельное административное веб-приложение. С помощью него они могут подключать своих наставников, проводить онлайн- и офлайн-мероприятия.
Мы разработали спецификацию API и правила подключения к платформе. Таким образом, мы дали возможность другим разработчикам диагностик, которые, например, разрабатывают тесты, подключаться к нам на платформу.
В пиковые моменты онлайн-платформу проекта посещают более 100 тысяч пользователей, а общее количество новых регистраций в 2020 году превысило миллион человек. Такое платформенное решение с мобильной версией сайта и мобильным приложением, позволило сделать доступным участие в проекте для школьников из разноудалённых населённых пунктов субъектов Российской Федерации. Так в 2020 году участие в проекте приняли школьники из 5000 населенных пунктов из 82 субъектов Российской Федерации. Всего за прошлый год платформу посетили более 3 млн уникальных пользователей. Мы надеемся, что «Билет в будущее» дал возможность каждому участнику найти профессию мечты.
Не совсем понятно, почему, если многие фичи были готовы в начале спринта, вам приходилось заканчивать в три часа ночи, чтобы успеть к релизу?
Попробую объяснить) Для релиза мы готовили сборку из нескольких фичей. Какие-то из них могли быть готовы раньше других, но всё равно дожидались стабилизации всей сборки в целом. В третьей стадии как раз описано, как мы попробовали сильно сократить объем релизов и готовить фичи параллельно и независимо друг от друга. Скажу честно, у нового подхода тоже были свои минусы, но в моменте такое решение нам сильно помогло и ускорило.
Практически все программы профориентации копируют друг друга (тесты, востребованные профессии и т.д.) как например Проектория (спасибо государству за то, что профинансировали). Как насчёт помочь подросткам найти себя и разобраться в своих желаниях? Как эта программа поможет им в будущем, если у них поменяются желания или кон'юнктура рынка? Как насчёт 40 000 профессий, какие элементы их учитываются или это снова 2-3 десятка тех же избитых профессий? Как насчёт новизны, как игры?
В контексте Worldskills Russia, здесь не только профориентация, здесь имеется возможность ознакомиться с профессиями на реальной практике.
Впечатляющая история!
.
что по 2к разрешению? http://prntscr.com/y0j8if