Создаём b2b-портал для бьюти-индустрии

eAcademie — это цифровая платформа сервисов для бьюти-рынка. Она связывает бизнес-процессы для 1000 внутренних сотрудников и более 400 000 внешних пользователей. Вот как ее используют:

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

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

Главный вызов — не имея никакой документации, углубиться в архитектуру, понять специфические бизнес-процессы в системе и, не останавливая работу, переписывать и добавлять новые функции.

Решение — поддерживаем гибкую разработку и data-drivenподход

Команда Evrone включилась в проект в середине 2018, перевела его на новую инфраструктуру, покрыла тестами и продолжила разрабатывать по гибким методологиям. Новый фронтенд создали на Next.js, на бэкенде остался удобный для клиента Ruby on Rails. База данных — PostgreSQL+Redis, для асинхронных задач использовали Sidekiq.

Заказчику в лице Андрея Ожигина (руководитель направления B2B CRM L’Oreal) требовался быстрый запуск функций в минимальном жизнеспособном виде для тестирования гипотез и продуктовой ценности, получения обратной связи от пользователей. Такой гибкий подход сильно отличается от разработки enterprise-продуктов в крупных компаниях.

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

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

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

Погружение в проект и тестирование платформы

В начале нашей работы покрытие кода тестами было на уровне 50–55%, поэтому оперативно понять, что именно сломалось было сложно. Из-за этого на решение уходило больше времени, потому что сначала проблему искали, а только потом устраняли.

Мы сфокусировались на самых важных фичах из старых частей и увеличили покрытие старого кода тестами до 75% и поработали с документированием API. Новые фичи сразу тестировали на 90–100%, поэтому теперь отлавливаем любой баг быстрее.

Также внедрили параллельный запуск тестов. Раньше ждали 20–30 минут, прежде чем выполнятся все тесты, теперь всего 7–8 минут.

Переезд на новую инфраструктуру

Клиент решил переработать инфраструктуру и сменить дата центр, предстоял переезд. Мы реализовали схему Infrastructure-as-Code: написали новую логику развертывания системы на Ansible, теперь все работает с помощью Docker в Swarmed Mode.

Такое решение не подошло бы многоузловому приложению, но проекту нужно всего 2 сервера, поэтому обошлись без Kubernetes. За счет этого экономим ресурсы, а деплой происходит быстро, просто и предсказуемо.

Новый фронтенд

Старый фронтенд был написан на jQuery, но он больше не отвечал технологическим требованиям, которые задавали новые части сервиса. Новые функции решили выносить в отдельные модули с фронтендом на React. Это помогло избавиться от сложностей в дальнейшей переработке этих частей.

Но как только появилась возможность, переработали фронтенд полностью. Теперь это полностью независимое SPA на Next.js. Новые фичи теперь внедрять удобнее и быстрее, сам продукт работает для пользователя быстрее на всех устройствах. Также улучшились браузерные метрики, что улучшит работу с SEO.

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

Внедрение SEO-функций

В начале 2020 было решено усилить видимость eAcademie с точки зрения SEO, для чего потребовались доработки.

Сначала мы запустили быстрое решение — добавили sitemap, разметку schema.org, а также escaped-шаблоны для обхода ограничений фронтенда. Так сервис быстро появился в поисковиках без серьезных архитектурных изменений. Позже сделали пререндер на Node.js в отдельном контейнере, который обрабатывает запросы поисковых систем, и избавились от решения-заплатки в виде escaped-страниц.

А после внедрения Next.js можем использовать удобные механизмы серверного рендеринга, предоставляемые этим фреймворком. Результаты не заставили долго ждать:

Расширение функциональности платформы для beauty индустрии

Сервис eAcademie рассчитан на 3 целевые аудитории: мастера, салоны и клиенты.

• Мастера могут регистрироваться и участвовать в онлайн и оффлайн обучениях, подписываться на рассылки и уведомления, получать подтверждения об обучении от платформы и делиться своим профилем с клиентами.
• Владельцы бизнеса или будущие предприниматели могут получить помощь в открытии бизнеса или автоматизации салона красоты: быстрый доступ к сотрудничеству с брендами L’Oréal, бизнес-консультацию, обучение менеджеров и мастеров.
• Потенциальные клиенты могут найти себе салон или мастера парикмахера, навыки которого будут подтверждены платформой.

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

Разработали систему «салон-локатор». Она запрашивает у пользователя доступ к геопозиции и открывает карту салонов. Пользователь может фильтровать результаты поиска и сразу переходить на страницу нужного заведения, записываться на услуги. Локатор используется на сайтах брендов-партнеров, а нужная для поиска информация подтягивается по API геолокации.

Интегрировали API для распознавания штрихкодов. Это помогло решить проблему учета продукции, которая используется на семинарах технологами. Мы хотели сделать это с помощью небольшого мобильного приложения на React Native, но поняли, что создадим еще один продукт, требующий поддержки. Вместо этого использовали новую функцию распознавания образов в Google Chrome, что оказалось быстрее и дешевле.

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

Результат

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

Вот каких метрик удалось добиться сервису:

• Рост в 4 раза по количеству визитов в месяц.
• 25 место в РФ по видимости СалонЛокатора (на основании 120 000 поисковых запросов связанных с поиском салонов и услуг).
• в 2020 году eAcademie стали сайтом № 1 по обучению парикмахеров (по версии SalonBeauty. Tech, источник данных: трафик 50 крупнейших учебных площадок для парикмахеров в SimilarWeb).

Одним из показателей успешности нашей работы стал проведенный клиентом пентест (тест на защиту от хакерских проникновений). Проверка показала отсутствие брешей. Компании-аудитору удалось обнаружить лишь незначительные ошибки, которые в будущем могли повлиять на ухудшение защиты, но мы устранили их в течение 48 часов после проверки.

Большие энтерпрайз приложения как онлайн-платформа для парикмахеров eAcademie — это вызов для инженерных навыков и личных качеств участников команды. Это не запуск стартапа, а вдумчивая и кропотливая работа, которая отражается на бизнес-результатах клиента.