BMG Release // Media

BMG Release Приложение для звукозаписывающей компании

#media #bmgrelease

О клиенте

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

Часть IT-продуктов компании, написанных на устаревших технологиях, было сложно поддерживать и развивать. Так, фронтенд одного из приложений под названием BMG Release был написан на AngularJS 1.6.

Неудобство пользования разделом «Поисковик» выражалось в:

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

Пользование «Страницы артиста» осложнялось:

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

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

Задача

Перенести музыкальное приложение звукозаписывающей компании с AngularJS 1.6 на современную  версию Angular с минимальными изменениями на бэкенде.

Для улучшения пользовательского опыта необходимо было:

актуализировать UI приложения
реализовать новый дизайн согласно дизайн-системе BMG
создать адаптивные версии музыкального приложения для мобильных устройств и планшетов

Решение

Команда LightTech выполнила бесшовный переход на платформу Angular 2+ и обновила дизайн музыкального приложения с фокусом на улучшении удобства пользования интерфейсом.

Этапы проекта

1

Этап 1

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

2

Этап 2

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

3

Этап 3

Составили план поэтапной миграции существующего web-приложения с AngularJS 1.6 на Angular 2+.

Функционал

Сервис поиска

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

Страница музыкального артиста

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

Вызовы

Для пользователей веб-сервиса необходимо было обеспечить возможность бесперебойной работы как на страницах нового приложения, разработанного на Angular 2+, так и на тех страницах, которые до сих пор остались на устаревшей версии AngularJS.

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

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

Важным аспектом при реализации стала поддержка существующей системы прав доступа в приложении без каких-либо изменений.

Эффект для бизнеса

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

Фронтенд

Angular MaterialTypeScriptRxJSNGXBootstrap

Бэкенд

PythonDjangoCeleryNginxPostgreSQLRedisRabbitMQ

Мобайл

AWS CloudElastic SearchPostgreSQLWebSocket