Разработка личного кабинета
- PM
- Analytics
- UX/UI
- Backend
- Frontend
- QA
- DevOps
- SecOps
- Kotlin
- Spring Boot
- Spring Data
- Hibernate
- Keycloak
- RabbitMQ
- Liquibase
- Postgresql
- Javascript
- React
- Redux Toolkit
- Kubernetes
- UML
- BPMN 2.0
- Camunda modeler
- Confluence
- Qase
- Swagger
- Postman
У вас есть задача?
Давайте обсудим?
О клиенте
Крупнейшая букмекерская компания России и СНГ, осуществляющая прием ставок на спортивные и киберспортивные события через сайт, приложение или пункты приема ставок, сеть которых насчитывает более 100 клубов в Москве и 1000 отделений в 82 регионах России. Ежедневная активная аудитория составляет более 500 тысяч пользователей.
О проекте
За 16 лет совместной работы с беттинговой компанией команда RedLab реализовала множество различных проектов в рамках развития сервиса, в том числе международных. Одна из таких задач заключалась в разработке нового личного кабинета (ЛК) для пользователей, т.к. текущая версия не удовлетворяла бизнес-требованиям букмекера.
Описание задачи
Руководствуясь современными тенденциями рынка ИТ в целом и букмекерской индустрии в частности, был необходим редизайн сервиса. Требовалось сделать его более легким, светлым и простым. Также, ввиду возросшей пользовательской нагрузки на ПО, помимо визуальной составляющей, было решено перестроить логику личного кабинета, добавить новые функциональности и ускорить скорость загрузки разделов.
Реализация
Для реализации задачи сформировали проектную команду, включающую специалистов в области аналитики, backend, frontend, тестирования, devops, secops, UI/UX дизайна и проектного менеджмента.
Чтобы не усложнять адаптацию к новому интерфейсу большому количеству постоянных игроков, решили не вносить кардинальных изменений в UX. Учли требования в UI-дизайне и сосредоточились на ускорении взаимодействия пользователя с ключевыми разделами и элементами. Для этого выполнили ряд задач:
- Пересмотрели экран депозитов/выплат, т.к. количество платежных систем существенно увеличилось: добавили фильтры по разделам, изменили размер и расположение иконок, неиспользуемые методы пополнения баланса ЛК фильтровали вниз, добавили кнопку "избранный метод пополнения". Автоматически ранжировали платежные системы в зависимости от частоты использования.
- Изменили расположение элементов интерфейса на страницах с помощью проверки гипотез на A/B тестах и тепловых карт.
- Ушли от технологий Backbone/Gulp в пользу связки React.js/Redux/React Router/Webpack, что позволило ускорить загрузку критично важного контента личного кабинета в 2,5 раза. На вебе подключили дизайн-систему AntDesign.
- Для корректной работы со сторонними сервисами разработали отдельный микрофронтенд-сервис интеграции сторонних виджетов.
- Ранее локализация выполнялась в бэк-офисе. В новой версии личного кабинета перешли на сервис локализации Localise. Это существенно облегчило выход на новые рынки, т.к. команде разработки не приходилось самостоятельно вносить дополнительные переводы.
- Т.к. выходили на несколько стран, реализовали возможность кастомизации личного кабинета в зависимости от домена.
- Шаблонизировали структуру сайта в коде для ускорения выхода на новые рынки, тем самым ускорили выход фронт-части на 50%.
Результат
A/B-тесты показали, что время присутствия пользователя на вспомогательных страницах уменьшилось, а среднее количество ставок в новом ЛК увеличилось. Путем опроса пользователей выяснилось, что переход на новый личный кабинет был максимально гладким, т.к. интерфейс принципиально не изменился. Благодаря новым технологиям удалось сократить время поставки ПО, ускорить выход на новые рынки. Личный кабинет стал более легким, функциональным и отзывчивым.
