Как мы за месяц запустили VK Mini App для профориентации подростков EASY

Профориентация подростков часто выглядит скучно: длинные тесты, сухая теория и абстрактные советы, которые не помогают почувствовать профессию на практике. У команды Easy была другая идея: познакомить школьников с современными профессиями через кейсы-симуляции внутри привычной для них среды VK.

К нам пришли с задачей не просто запустить еще одно образовательное приложение, а сделать понятный и живой digital-продукт, который будет легко проходить подросткам и так же легко развивать самой команде проекта. Важно было уложиться в минимальные ресурсы, быстро выйти в релиз и при этом не закрыть себе дорогу к дальнейшему росту.

Перед нами стояло сразу несколько задач:

– упростить уже существующий дизайн и сделать интерфейс более интуитивным;

– разработать приложение на платформе VK;

– предусмотреть архитектуру, которая позволит в будущем с минимальными вложениями развить проект в полноценный мобильный или веб-продукт;

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

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

Приложение «Easy» доступно в VK mini app с 20+ кейсами из различных миров профессий. Задачи внутри каждого кейса могут представлять собой: выбор правильного ответа, проектирование схемы или создание модели.

Этапы реализации проекта:

1. Изучение технического задания и анализ дизайна приложения.

2. Внесение корректировок в макеты для упрощения будущего интерфейса. Согласование с заказчиком.

3. Изучение площадки VK для создания приложений и кейсов коллег на рынке.

4. Backend (программирование функциональной части проекта): приступили к разработке административной панели (Orchid) и онбординга (вступительных экранов).

5. Frontend (вёрстка визуальной части проекта) реализовывался параллельно Backend.

6. Интеграция Frontend и Backend.

7. Тестирование.

8. Дебаг (исправление найденных ошибок).

9. Релиз (размещение приложения на аккаунте заказчика в VK).

Онбординг показывается только 1 раз при запуске приложения и служит помощником для знакомства с его миссией. Далее пользователь попадает на экран со списком кейсов по направлениям: AI, кинопродюсер, PM, робототехника и другие.

В аннотации указано: автор кейса, длительность его прохождения, описание области деятельности и возможность сделать донат. Задания представляют собой вопросы с вариантами ответов, итог с пояснением выдается сразу.

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

В приложении есть три статуса кейсов:

1. «В разработке» — если в админ-панели добавлен и опубликован кейс без заданий.

2. «В процессе» — если пользователь начал отвечать на вопросы из кейса, но прервался.

3. «Пройден» — если пользователь ответил на все вопросы из кейса.

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

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

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

Экран с результатами показывает, успешно был пройден кейс или нет. Также на этом экране находится подборка фильмов и книг и кнопка «Вступить в чат».

Каталог кейсов с аннотацией, в каждом из которых пул вопросов для профориентации подростков.

Фоновое видео или иллюстрация на детальной странице кейса для визуализации темы.

Тест (механизм опроса). Слайдер с вопросами и ответы в виде кнопок «Да»/«Нет» или список с вариантами ответов. Результат с пояснением выдается сразу после сделанного выбора.

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

Загрузка видео в приложение

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

Для решения проблемы мы использовали популярную библиотеку Video.js. и с помощью плагина (расширения), специально предназначенного для работы с YouTube, внесли необходимые модификации.

Теперь администраторы приложения могут добавлять видео с Youtube или загружать контент на сервер, а в приложении они будут выглядеть одинаково эстетично.

Современные технологии

Мы стремились запустить проект на основе современных технологий (Vite и TypeScript), чтобы в будущем заказчик мог трансформировать VK-приложение в полноценную мобильную и веб версии при минимальных вложениях.

Стилизация нативных функций телефона

При верстке дизайна проекта мы столкнулись с проблемой стилизации фона онбординга на iPhone.

Образовалась белая полоса снизу, которая «ломала» дизайн-концепцию и восприятие интерфейса в целом. Для устранения проблемы мы использовали VK Bridge — это встроенный инструмент VK, который позволяет задавать определенные параметры элементам управления мобильных устройств (iOS и Android).

Административная панель

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

Мы кастомизировали Orchid (Laravel Admin Panel) под требования заказчика. Получилась административная панель, с которой приятно и нативно понятно взаимодействовать человеку без опыта в программировании.

Проект Easy был реализован всего за 1 месяц.

За это время мы не просто выпустили VK Mini App, а собрали рабочий образовательный продукт с понятной логикой, контентной гибкостью и заделом на дальнейшее масштабирование. Клиент получил приложение, которое уже решает задачу профориентации подростков внутри привычной платформы VK, и при этом может быть относительно легко развито в самостоятельный мобильный или веб-сервис.

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