«Комплексная переработка веб-приложения 101 Group: финансы, прайс-листы, контрагенты и дизайн-система»

Что такое 101 Group:

Сервис для управления строительными и ремонтными проектами: учёт доходов/расходов, фото-отчёты, прайс-листы, видеонаблюдение, отчётность и пр.

Моя роль:

Вела веб-направление продукта как Product Designer. Взаимодействовала с PM, dev-командой и вторым дизайнером, но 80% веб-проекта и создание дизайн-системы были на мне.

Главные цели:

1. Запустить полноценную веб-версию, адаптировав функционал из мобильной.
2. Упростить ключевые модули (прайс-листы, фонды, контрагентов, подписку) и объединить их в единую логику.
3. Собрать дизайн-систему (UI-kit) для быстрого масштабирования.

Общая архитектура: что было сделано

1. Прайс-листы

• Несколько прайс-листов, скрытые позиций, шаблонов

2. Авторизация и управление пользователями

• Упрощённый онбординг и авторизация (новый дизайн логина, выбор роли).
• Экран «Пользователи» (добавление, редактирование, права доступа).

3. Контрагенты

• Раздел, где строительная компания ведёт список партнёров (поставщиков, субподрядчиков).
• Задачи: сделать удобную фильтрацию, добавление, карточку контрагента, учесть разные статусы (активный, потенциальный).

• Итог: на 30% уменьшилось время на поиск нужного партнёра (по результатам внутренней статистики).

4. Фонд компании

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

5. Подписка и промокоды

• Экран «Подписка»: показывает активный тариф, возможности апгрейда.

• Раздел «Промокоды»: упрощённый ввод кода, отображение скидки/пакета услуг.

• Сделала «Purchase flow» более линейным, добавила подсказки.

6. Проекты

• Отдельная вкладка, где хранятся все проекты (новая структура, поиск, фильтр).

Дизайн-система (UI-kit)

1. Причина создания: Продукт разросся, мобильное и веб-решения дублировали компоненты. Решили всё стандартизировать, ускорить выпуск фич.
2. Процесс: собрала список повторяющихся блоков (авторизация, списки, кнопки «сделать платёж», попапы и т. д.), создала общий UI-kit в Figma.
3. Объём: более 70 компонентов, включая вариации.

Исследования и итоги

1. Интервью: минимум 10 руководителей (строительные компании), + опрос в Telegram-чате с 40 участниками.
2. Основные выводы:

• Раздел «Прайс-листы» обязателен к расширению, «Контрагенты» нужны с гибким фильтром.
• Архитектуру фондов упростили — теперь всё в одном месте.

3. Метрики

• ~20% мобильных юзеров стали активнее использовать веб.
• Сократили время на поиск контрагентов на 30%.
• Улучшили onboarding: жалоб на авторизацию практически не осталось.

Самое интересное

• Сложности: Были спорные моменты с глубиной иерархии позиций, приходилось находить компромисс.
• Уроки: «В B2B-продуктах особенно важна вариативность, потому что каждая компания уникальна».
• Планы: в будущем хотим ещё внедрить аналитику по изменениям прайсов и общий поиск по всем модулям.

Итого

За ~8 месяцев я кардинально переработала веб-направление 101 Group, внедрила дизайн-систему и модернизировала ключевые модули (прайс-листы, фонд, контрагентов, подписку). Продукт стал удобнее и гибче для строительных команд, а разработка ускорилась благодаря единому UI-киту.