Разработка Мини-апп для Управляющей компании Голос

УК «Голос» из Челябинска управляет жилыми комплексами. У них есть мобильное приложение, чат-боты и Telegram-каналы для каждого ЖК.

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

К новогодним праздникам компания решила запустить интерактивную игру. Цель — заинтересовать жителей и мотивировать пользоваться услугами УК.

Что хотели получить:

Новогоднюю игру в Telegram, где жители:

- Играют в простую игру на реакцию

- Выполняют полезные для УК задания

- Получают призы в реальном розыгрыше

Задания в игре:

- Установить приложение УК

- Подписаться на канал своего ЖК

- Проголосовать онлайн

- Оставить отзыв о компании

- Внести предоплату за коммуналку

- Пригласить соседей

Механика мотивации:

За каждое задание — баллы «комфортики». Баллы тратятся на жизни в игре. Играешь — зарабатываешь билеты. Билеты участвуют в розыгрыше реальных призов.

Главная цель: превратить пассивных жителей в активных пользователей сервисов УК через игру.

Дедлайн: запуск к Новому году, розыгрыш призов 15 января.

Прогнозируемый результат: жители начнут больше взаимодействовать с УК через официальные каналы, а не только звонить в диспетчерскую с жалобами.

Дизайн-концепция

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

Основные принципы дизайна

Новогодняя атмосфера без перегруза

- Елочка как центральный элемент

- Праздничная цветовая гамма: зеленый, красный, золотой

- Новогодние элементы: шары, гирлянды, снежинки

Простота и понятность

- Крупные элементы для удобного нажатия на телефоне

- Интуитивная навигация — игрок понимает что делать с первого взгляда

- Минимум текста, максимум визуальных подсказок

Адаптивность

- Одинаково хорошо выглядит на всех размерах экранов

- Учет особенностей iOS и Android

- Быстрая загрузка даже при медленном интернете

Ключевые экраны

1. Главный экран игры

Центральный элемент: большая елочка с разноцветными шарами

- Шары разных цветов и узоров (красные, синие, золотые, с полосками, звездочками)

- Плавная анимация мерцания гирлянд

- Снег падает в фоновом режиме

Панель выбора: 6 вариантов шаров внизу экрана

- Достаточно большие для точного нажатия

- Четкие различия между шарами

- Подсветка при нажатии

2. Экран заданий

Список активностей с иконками и описанием

- Каждое задание имеет свою иконку (приложение, подписка, голосование)

- Показ количества комфортиков за выполнение

- Статус выполнения: сделано/не сделано

3. Экран розыгрыша

Праздничный барабан для определения победителей

- Визуальный барабан с билетами

- Анимация вращения и остановки

- Торжественное объявление результатов

Анимации и эффекты

Игровые анимации:

- Плавное загорание шара на елке (0.5 сек)

- Пульсация выбранного варианта снизу

- Конфетти при правильном ответе

- Мягкое покачивание елки

Переходы между экранами:

- Скольжение влево-вправо

- Плавное появление модальных окон

- Эффект "листания" для списков

Обратная связь:

- Тактильная вибрация при нажатиях (где поддерживается)

- Звуковые сигналы успеха/ошибки

- Визуальные подтверждения действий

Цветовая палитра

Основные цвета:

- Темно-зеленый (#1B5E20) — елка и основные элементы

- Красный (#D32F2F) — акценты и кнопки действий  

- Золотой (#FFB300) — награды и достижения

- Белый (#FFFFFF) — фон и текст

Дополнительные цвета:

- Синий (#1976D2) — информационные элементы

- Серый (#757575) — вторичный текст

- Светло-зеленый (#4CAF50) — успешные действия

Типографика

Заголовки: жирный шрифт, размер 24-28px

Основной текст: обычный шрифт, размер 16-18px  

Кнопки: полужирный шрифт, размер 16px

Подписи: легкий шрифт, размер 14px

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

Адаптация под устройства

Мобильные телефоны (основная платформа):

- Вертикальная ориентация

- Размер кнопок не менее 44px для удобного нажатия

- Учет "безопасных зон" для iPhone

Планшеты:

- Увеличенные размеры элементов

- Сохранение пропорций елочки

- Адаптация расположения элементов

Особенности реализации

Производительность:

- Оптимизированные изображения в формате WebP

- CSS-анимации вместо JavaScript где возможно

- Ленивая загрузка тяжелых элементов

Доступность:

- Достаточный контраст для людей с нарушениями зрения

- Альтернативный текст для изображений

- Поддержка навигации с клавиатуры

Итерации дизайна

Версия 1: Сложная елка с множеством деталей

- Проблема: медленная загрузка, сложно различать шары

Версия 2: Упрощенный дизайн елки

- Улучшение: быстрая загрузка, четкие различия между элементами

Версия 3: Добавление анимаций

- Финальный вариант: баланс красоты и функциональности

Версия 4: Доработка по обратной связи клиента

- Корректировка цветов, размеров кнопок

- Добавление праздничных элементов внизу экрана

Результат

Получили праздничный интерфейс, который:

- Создает новогоднее настроение

- Понятен пользователям любого возраста

- Работает быстро на всех устройствах

- Мотивирует играть и выполнять задания

Дизайн стал основой для вовлечения пользователей и достижения бизнес-целей проекта.

Техническая реализация

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

Архитектура системы

Frontend (React)

- Интерактивный интерфейс игры

- Анимации елочки и шаров

- Адаптивная верстка под все экраны

- Интеграция с Telegram Web App API

Backend (FastAPI)

- Обработка игровой логики

- Система начисления комфортиков

- API для работы с заданиями

- Управление билетами розыгрыша

База данных (PostgreSQL + Redis)

- PostgreSQL: профили игроков, история игр, билеты

- Redis: кэширование сессий, состояние игры в реальном времени

Ключевые функции

1. Игровая механика

Логика игры:

- Случайная генерация последовательности шаров

- Таймер реакции (3 секунды на ответ)

- Система подсчета правильных ответов

- Начисление билетов за успешные игры

Анимации:

- CSS-анимации для плавного загорания шаров

- JavaScript для интерактивности

- Оптимизация производительности на слабых устройствах

2. Система заданий

11 типов заданий с проверкой:

- Подписка на Telegram-канал (проверка через API)

- Установка приложения (по скриншотам)

- Участие в голосовании (интеграция с системой УК)

- Оставление отзывов (ручная модерация)

- Реферальная система (приглашение соседей)

Автоматизация:

- Автоматическое начисление комфортиков

- Проверка выполнения заданий в реальном времени

- Защита от накрутки и повторного выполнения

3. Система пользователей

Регистрация через Telegram:

- Автоматическое получение данных из профиля

- Привязка к жилому комплексу

- Создание уникального ID игрока

Личный кабинет:

- Баланс комфортиков

- История игр

- Выполненные задания

- Количество билетов для розыгрыша

4. Админ-панель

Управление пользователями:

- Просмотр списка всех игроков

- Фильтрация по ЖК и активности

- Экспорт данных в Excel

- Блокировка нарушителей

Статистика в реальном времени:

- Количество активных игроков

- Популярность заданий

- Конверсия по этапам воронки

- Техническая статистика (нагрузка, ошибки)

Интеграции

Telegram Web App

Особенности реализации:

- Использование Telegram API для авторизации

- Адаптация под дизайн Telegram

- Поддержка тем (светлая/темная)

- Корректная работа кнопки "Назад"

Технические решения:

- Проверка окружения Telegram при запуске

- Обработка событий жизненного цикла приложения

- Интеграция с системой уведомлений Telegram

Системы УК «Голос»

Чат-бот «Голос.Комфорт»:

- API для проверки установки

- Автоматическое начисление баллов

- Синхронизация данных пользователей

Мобильное приложение:

- Отслеживание установок

- Проверка активности пользователя

- Интеграция с системой лояльности

Функционал розыгрыша

Онлайн-трансляция

Визуальный барабан:

- 3D-анимация вращения

- Реалистичная физика остановки

- Звуковое сопровождение процесса

Управление розыгрышем:

- Админ-панель для ведущего

- Выбор категории призов

- Запуск/остановка барабана

- Автоматическое определение победителя

Пользовательский интерфейс:

- Синхронизация с админ-панелью

- Отображение процесса в реальном времени

- Уведомления о выигрыше

- Таблица всех победителей

Оптимизация производительности

Frontend

Быстрая загрузка:

- Code splitting для загрузки только нужных компонентов

- Ленивая загрузка изображений

- Сжатие и оптимизация ресурсов

- Service Worker для кэширования

Плавная анимация:

- Использование CSS transforms вместо изменения layout

- RequestAnimationFrame для JavaScript-анимаций

- Оптимизация для 60 FPS на всех устройствах

Backend

Масштабируемость:

- Асинхронная обработка запросов

- Пул соединений с базой данных

- Redis для кэширования частых запросов

- Оптимизация SQL-запросов

Мониторинг:

- Логирование всех действий пользователей

- Отслеживание времени ответа API

- Алерты при превышении нагрузки

- Автоматическое масштабирование

Обеспечение безопасности

Защита от накрутки

Ограничения по времени:

- Минимальный интервал между играми

- Лимит игр в день на пользователя

- Проверка естественности поведения

Валидация заданий:

- Проверка подлинности скриншотов

- API-валидация подписок и установок

- Модерация пользовательского контента

Техническая безопасность

Защита API:

- Аутентификация через Telegram

- Rate limiting для предотвращения атак

- Валидация всех входящих данных

- HTTPS для всех соединений

Подход к тестированию

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

Функциональное тестирование

Тестирование игровой механики

Основная логика игры:

- Правильность генерации последовательности шаров

- Корректность определения правильных/неправильных ответов

- Работа таймера (3 секунды на ответ)

- Плавность анимаций загорания шаров

- Сохранение прогресса между сессиями

Граничные случаи:

- Поведение при потере интернет-соединения

- Реакция на быстрые многократные нажатия

- Корректная работа при сворачивании приложения

- Восстановление состояния после перезапуска

Система заданий и комфортиков

Проверка начисления баллов:

- Автоматическое начисление за выполнение заданий

- Защита от повторного выполнения одного задания

- Корректность конвертации комфортиков в жизни (3:1)

- Синхронизация баланса между устройствами

Валидация заданий:

- Проверка подписки на Telegram-каналы через API

- Модерация скриншотов установки приложения

- Интеграция с системой голосований УК

- Работа реферальной системы приглашений

Пользовательские сценарии

Регистрация и авторизация:

- Корректное получение данных из Telegram профиля

- Привязка к правильному жилому комплексу

- Создание уникального игрового профиля

- Восстановление сессии при повторном входе

Навигация по приложению:

- Переходы между экранами

- Работа кнопки "Назад" в Telegram

- Корректное отображение всех элементов интерфейса

- Адаптация под светлую/темную тему Telegram

Тестирование совместимости

Мобильные устройства:

- iPhone 11-14 Pro Max на iOS 14.0-17.0

- Samsung Galaxy, Xiaomi, Huawei на Android 8.0-14.0

- Проверка в Safari и встроенном браузере Telegram

Проблемные случаи:

Из переписки: "У меня есть вопрос: как посмотреть выигрышные билеты, если приложение не работает"

- Тестирование на iPhone 13 из обращения

- Оптимизация для слабого интернета

- Адаптация под малые экраны

Нагрузочное тестирование

Обычная активность:

- 500 одновременных игроков

- 1000 запросов к API в минуту

- Время отклика менее 2 секунд

Пиковые нагрузки:

- День розыгрыша: 2000+ пользователей

- Синхронизация анимации барабана

- Корректное определение победителей

Пользовательское тестирование

Бета-тестирование:

- 20 сотрудников УК

- 50 жителей ЖК

- Сбор обратной связи через формы

Выявленные проблемы:

"У многих не открывались правила" - потребовалась оптимизация PDF-файлов.

Процесс исправления багов

Приоритизация:

- Критичные - исправление в течение часа

- Важные - в течение дня

- Косметические - в следующем релизе

Оперативность работы:

Процесс: диагностика → исправление → тестирование → развертывание → верификация клиентом.

Результаты тестирования

Найденные проблемы:

- 47 багов в процессе тестирования

- 100% критичных багов исправлено до запуска

- 12 улучшений UX по обратной связи

Метрики качества:

- 99.8% uptime в период игры

- 0 критичных сбоев во время розыгрыша

- Среднее время отклика API: 0.8 секунды

- Работает на 98% протестированных устройств

Готовность к запуску:

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

Тщательное тестирование обеспечило успешный запуск и положительную обратную связь от пользователей.

Подготовка к розыгрышу

15 января 2025 года - кульминация проекта. За месяц игры участники накопили билеты для честного розыгрыша реальных призов.

Техническая подготовка

Утром 15 января в 10:00:

- Остановка начисления комфортиков

- Блокировка игровой механики  

- Переход в режим ожидания розыгрыша

- Финальный подсчет всех билетов

Интерфейс розыгрыша

Админ-панель для ведущего

- Выбор категории призов

- Запуск и остановка барабана

- Контроль скорости вращения

- Определение победителей

Команда записала обучающее видео с пошаговым объяснением всех функций.

Пользовательский интерфейс

Что видят участники:

- Праздничный барабан с билетами

- Анимация вращения в реальном времени

- Звуковое сопровождение

- Мгновенное обновление результатов

Проведение розыгрыша

Старт в 12:00

Процесс:

1. Администратор входит в админ-панель

2. Выбирает категорию приза  

3. Запускает барабан - все видят вращение

4. Барабан останавливается с реалистичной физикой

5. Автоматическое определение и показ победителя

Техническая реализация

- WebSocket для мгновенной передачи данных

- Синхронизация анимации между админкой и пользователями

- Одновременное отображение результатов

- Резервные каналы связи

Проблемы и решения

Основная система работала стабильно, все ключевые моменты прошли успешно.

Пользовательские вопросы

Проблема: Пользователи ожидали видео-трансляцию, а не интерактивную страницу

Решение: Оперативные разъяснения через поддержку

После розыгрыша

Проверка результатов

Первичная паника из-за задержки загрузки данных. Все результаты оказались корректными.

Функционал:

- Комментарии к каждому билету

- Статусы: одобрен/отклонен/на проверке

- Экспорт финального списка

Публикация результатов

Таблица победителей

Требования:

- Убрать имена (конфиденциальность)

- Показать номера билетов и призы

- Размещение на главной странице

Экспорт для клиента

Таблица с ID пользователей, билетами, призами и контактами для связи.

Статистика розыгрыша

Нагрузка в 12:00-12:15:

- 1800+ одновременных подключений

- 150+ запросов в секунду  

- 0.6 сек время отклика

- 100% uptime в критический период

Пользовательская активность:

- 1200+ активных зрителей онлайн

- 8 минут средняя продолжительность наблюдения

Постобработка

Техподдержка после розыгрыша

Продолжались обращения: *"На Айфоне ошибка при попытке посмотреть билеты"*

Команда оперативно исправляла ошибки совместимости и оптимизировала загрузку.

Результат

Технические достижения:

- 100% стабильность во время розыгрыша

- Корректная работа всех систем

- Прозрачный процесс

- Удовлетворенность клиента

Обратная связь:

Команда была довольна проведением, участники отметили высокий интерес и прозрачность процесса.

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

Основные бизнес-результаты

Вовлеченность в цифровые сервисы:

- Рост подписок на Telegram-каналы ЖК

- 250+ новых установок мобильного приложения «Голос.Комфорт»

- Увеличение участия в электронных голосованиях на 40%

- 180+ новых отзывов в картографических сервисах

Формирование лояльности:

- Позитивная риторика в Telegram-сообществах жилых комплексов

- Увеличение органического охвата постов УК

- Рост доверия к электронным сервисам среди жителей

Игровая активность

Пользовательская статистика

Участие и вовлеченность:

- 0,8 игр в день в среднем на активного пользователя

- 561 ответ на вопросы викторины от 203 уникальных участников

- Успешно проведен онлайн-розыгрыш призов в реальном времени

Выполнение заданий:

Наиболее популярными заданиями стали:

- Подписка на каналы ЖК (самое массовое)

- Прохождение викторины (высокая вовлеченность)

- Установка мобильного приложения (стратегически важное)

- Приглашение соседей (органический рост аудитории)

Технические результаты

Стабильность системы

Производительность:

- 99.8% uptime в период активной игры

- 0 критичных сбоев во время розыгрыша

- Среднее время отклика API: 0.8 секунды

- Успешная обработка пиковых нагрузок 2000+ пользователей

Совместимость:

- Корректная работа на 98% протестированных устройств

- Поддержка всех актуальных версий iOS и Android

- Адаптивный дизайн для разных размеров экранов

- Стабильная интеграция с Telegram Web App

Качество разработки

Процесс разработки:

- 47 багов найдено и исправлено в процессе тестирования

- 100% критичных багов устранено до запуска

- 12 улучшений UX внесено по обратной связи пользователей

- 3 оптимизации производительности для старых устройств

Особенности реализации

Уникальные технические решения

Система онлайн-розыгрыша:

- Синхронизация в реальном времени между админ-панелью и пользователями

- Визуальный барабан с реалистичной физикой

- Прозрачный процесс определения победителей

- Автоматическое обновление результатов без перезагрузки

Геймификация:

- Сбалансированная система мотивации через "комфортики"

- 11 разных типов заданий с автоматической проверкой

- Интуитивная игровая механика для всех возрастов

- Новогодняя тематика, создающая праздничное настроение

Интеграции

Экосистема УК «Голос»:

- Бесшовная интеграция с существующими сервисами

- Автоматическая проверка выполнения заданий

- Синхронизация данных пользователей

- Масштабируемая архитектура для будущих кампаний

Обратная связь от клиента

"Нам понравилась с вами работа и надеемся что у нас еще будут совместные проекты"

Ключевые моменты сотрудничества:

- Оперативное реагирование на запросы клиента

- Гибкость в процессе разработки

- Качественная техническая поддержка

- Соблюдение критичных сроков запуска

Долгосрочная стратегия:

Проект стал основой для цифровой трансформации взаимодействия УК с жителями, показав эффективность геймификации в сфере ЖКХ.