Краткое описание проекта
50funnels — это интерактивная доска для проектирования воронок продаж. Мы сделали «бесконечный» канвас, который позволяет маркетологам, менеджерам и другим специалистам визуально строить и анализировать цепочки взаимодействия с клиентами.
Ключевой упор сделан на простоту и наглядность: пользователь может добавлять блоки (шаги воронки), соединять их связями, рассчитывать конверсию и быстро вносить изменения в модель. Это помогает оперативно тестировать гипотезы, выявлять узкие места и улучшать результаты бизнеса.
Кейс
Проблема
Маркетологи и менеджеры сталкивались с трудностями в визуализации и анализе цепочек продаж. Клиент хотел создать продукт, который бы:
- Упростил проектирование воронок.
- Обеспечивал расчёт метрик в реальном времени.
- Поддерживал совместную работу нескольких пользователей.
Решение
Было предложено реализовать платформу на основе «бесконечной» доски. Ключевые особенности:
- Визуальное проектирование: добавление, соединение и редактирование элементов.
- Расчёт метрик и аналитика.
- Мультиплеерный режим для работы в командах.
Процесс
- Разработка началась с анализа аналогов и создания подробного технического задания (ТЗ).
- Дизайн был предоставлен клиентом, а наша команда сосредоточилась на реализации.
- Проект был разбит на итерации. Мы использовали Miro для визуализации идей и Todoist для управления задачами.
- В ходе работы применялись гибкие подходы к изменениям ТЗ и внедрению новых функций.
Результаты
- Платформа успешно проходит тестирование.
- Отзывы тестовых пользователей отметили удобство интерфейса и точность аналитики.
Основные возможности
Для пользователей:
- Интуитивный интерфейс: чтобы любой член команды, даже без специальных технических навыков, мог с лёгкостью разобраться и начать работу.
- Шаблоны воронок: позволяют быстро включиться в работу и подобрать под себя нужный сценарий, при необходимости модифицируя его.
- Мгновенная коллаборация: несколько пользователей могут одновременно редактировать, комментировать и вносить правки в один проект (в тарифе с командной работой).
Для администраторов:
- Кастомные элементы воронок: мы разработали подробную систему описания элементов воронок, чтобы быстро добавлять новые виды и расширять функциональность проекта.
- Админ панель: позволяет управлять проектом, подписками и другими настройками.
- Система поддержки: администраторы могут удобно отслеживать заявки от пользователей и помогать им.
Особенности
«Бесконечная» канвас-доска
Основной функционал:
- Размещение элементов воронки, заполнение форм для расчёта симуляции и соединение блоков.
- Текстовые блоки и фигуры.
- Картинки.
- Группы, которые могут объединять остальные блоки, чтобы лучше формировать структуру проекта.
- Иконки, которые позволяют лучше визуализировать воронки.
- У всех блоков есть настройки их визуала, например изменение текста, цвета фона и контура и т.д.
Расчёт конверсии и аналитика
Для расчёта метрик мы разработали специальный модуль:
- Автоматический сбор данных по каждому шагу воронки.
- Возможность задавать контрольные точки (KPI) и видеть моментальную динамику по изменению конверсии.
- Интерактивные графики, позволяющие быстро оценить эффективность сегментов.
- Визуализация коннекторов и потоков расчёта.
Совместная работа в реальном времени
Мультиплеерный режим открывает возможность нескольким пользователям редактировать проект одновременно:
- Синхронная расстановка элементов и связей.
- Цветовая идентификация действий каждого участника в виде курсоров с именами.
- Удобная система контроля доступа.
Это помогает командам быстро обмениваться идеями, а руководителям — в реальном времени видеть прогресс в построении воронки.
Оплата
- Реализована интеграция с Робокассой для обработки платежей.
Процессы разработки
- Поставленная задача: создать легковесную и быструю платформу для расчета воронок.
- Дизайн предоставлен заказчиком, верстка выполнена на фронтенде.
- Проект разбит нами на итерации и предварительно оценен.
- Используем Todoist, где распределяем задачи по группам, устанавливаем дедлайны и приоритеты.
- Контроль времени происходит через Tracking Time.
- Работаем через GitHub с CI/CD пайплайнами:
- Docker-образы для каждого сервиса.
- Автоматический деплой через Docker Compose.
- Мониторинг и логирование в реальном времени.
- Постоянная связь с заказчиком: видеозвонки, обсуждение фич и доработок.
- Гибкость в выборе технологий и подходов, исходя из потребностей проекта.
Фронтенд
Мы выбрали библиотеку VueFlow, которая реализует функциональность бесконечной доски. Основные преимущества:
- Базовый функционал бесконечной доски: прокрутка, зум, размещение блоков и т.д.
- Высокая скорость работы.
- Удобные примеры для разработчиков и активное сообщество.
Этот фреймворк позволяет существенно ускорить разработку и упрощает настройку доски под потребности проекта.
- Nuxt3 — основная библиотека для фронтенда.
- Отчёты в формате PDF — создаются при помощи внешнего сервиса, который обеспечивает высокое качество итоговых файлов.
Бэкенд
- FastAPI (или другой асинхронный фреймворк) — для быстрого взаимодействия с фронтендом и обработки данных.
- MongoDB — для хранения схем воронок и историй их изменений.
- Redis — для организации очередей обновлений и кэширования, что особенно важно при одновременном участии десятков (а со временем и сотен) пользователей.
CI/CD и аналитика
- CI/CD: налажен процесс непрерывной интеграции, который проверяет новый код, собирает фронтенд и выкатывает микросервисы.
- Локальная аналитика: собираем только анонимные данные по использованию сервиса без передачи их на сторонние серверы, гарантируя конфиденциальность пользователей.
Для обеспечения стабильной работы и удобства внедрения изменений мы используем поэтапный деплой:
- Dev-сервер: здесь мы тестируем свежие фичи и исправления.
- Продакшен: обновления выходят сюда только после успешного прохождения тестов и просмотра QA.
- Мониторинг: система логирования и метрик, позволяющая отслеживать работу приложения под реальной нагрузкой и быстро решать возникающие проблемы.
Хотите разработать свой сервис с бесконечной доской?
Напишите нам в Telegram: t.me/SerjioSA, обсудим, как мы можем вам помочь!