Frontend-разработка главных спецпроектов Mail.ru Group

В течение двух лет мы занимаемся frontend-разработкой ключевых спецпроектов Mail.ru Group, промосайтов сервисов и новых продуктов. Мы разработали страницу и виджет голосового помощника «Маруси» и интернет-магазин Капсулы — умной колонки Mail.ru Group.

Клиент

Контекст

Mail.ru Group — крупнейший IT-холдинг в России, развивающий электронную торговлю, русскоязычные социальные сети и мессенджеры, портфолио популярных игр и другие проекты.

«Лица победы» — проект, который компания развивает в течение двух лет.

В 2019 году совместно с Mail.ru Group мы запустили сервис по реставрации архивных фото. В 2020 году холдинг решил расширить функционал проекта и его социальную значимость и создать самый большой цифровой архив фотографий героев Великой Отечественной войны.

Решение

Для реализации проекта мы разработали сайт и интегрировали по API технологию Vision. Функциональность обработки фото основывается на технологическом стеке Mail Cloud Solution. Нейросети определяют совпадения на фотографиях разных пользователей и помогают найти героев семьи на снимках других людей.

800 тысяч человек поучаствовали в проекте «Лица Победы». Они загрузили 430 тысяч фотографий времен войны.

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

На платформе сошлись самые последние разработки Mail.ru в области искусственного интеллекта и нейросетей.

Решение

Мы выполнили работы по frontend-разработке проекта: верстку, все взаимодействия на фронтенде, отрисовку превью-ролика, включая все элементы: картинка, видео, аудио, титры, которые добавляет пользователь.

Настроили анимацию для этих элементов и взаимодействие с бэкендом.

За два месяца работы сервиса пользователи сгенерировали более 65 тысяч видео.

Мы разработали страницу и виджет голосового помощника «Маруси» и интернет-магазин Капсулы — умной колонки Mail.ru Group со встроенным голосовым ассистентом.

Решение

В интерфейсе мы использовали интерактивные анимационные элементы. Дизайн адаптирован под девять разрешений экранов. Пользователи могут узнать о всех возможностях колонки, поселившихся внутри Капсулы вместе с «Марусей», и оформить покупку. Предчувствуя спрос на уникальную разработку Mail.ru Group, мы разработали сайт с учетом высокой нагрузки.

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

В 2019 году к 8 марта совместно с Mail.ru мы запустили сервис именных поздравлений, а в 2020-ом дали возможность женщинам рассказать о своих истинных желаниях — для этого компания сняла социальный ролик, в котором шесть совершенно разных героинь рассказывают, какие слова хотели бы услышать в Международный женский день.

Решение

Мы взяли на себя техническую часть проекта: для участия в акции мы разработали страницу, на которой пользователи могли выбрать фон и написать свои пожелания. Созданная картинка автоматически преобразовывалась из HTML в PNG, после чего пользователь мог расшарить карточку в своих социальных сетях с помощью Open Graph.

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

Два года совместно с сервисом Mail.ru мы разрабатываем новогодний спецпроект «Поздравление Дедушки Мороза» — сайт, на котором можно создать уникальное видеопоздравление.

Решение

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

В новогоднем ролике к 2020 году Mail.ru Group впервые показали капсулу — умную колонку с голосовым помощником Марусей. Специально для проекта Маруся выучила более 2000 имен.

Сайт разработан с учетом высокой нагрузки — в предпраздничный период на сервис заходит более миллиона уникальных пользователей в день.

К выпускным в школах и вузах Mail.ru Group запустили акцию «Письмо во взрослую жизнь» — каждый пользователь, авторизовавшись через почту Mail.ru мог записать свои цели на год.

Решение

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

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

Frontend-разработчики
Владислав Спирин
Антон Иващенко
Елизавета Каторгина
Константин Вандерер

Команда проектов

Backend-разработчики
Алексей Локтионов