Интерактивный Атлас профессий для Сбера и НИУ ВШЭ

Разработать «живой» город будущего для атласа профессий

Сбер и НИУ ВШЭ запускают интерактивный веб-сайт, на котором студенты, школьники и молодые специалисты изучают востребованные профессии будущего по 12 направлениям. Здесь они могут пройти профориентацию, узнать, что им больше подходит и найти профильное обучение.

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

Спроектировали путь пользователя в интерактивном атласе

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

Подготовили и сверстали макеты для страниц кластеров и 50 профессий

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

Собрали карту города из готовых элементов и доработали их

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

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

Анимировали метафоричные образы кластеров

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

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

Написали сценарий для виртуального ассистента

У Сбера есть семейство виртуальных помощников «Салют», которые помогают пользователям на сайтах, в сервисах и продуктах компании. Интегрировать их в Атлас не планировали, и это не влезало в сроки. Поэтому мы сами прописали простой сценарий для навигации и ответов на вопросы. Так Атлас получился ещё более «живым».