Конструктор метрик
Piano Analytics, 2026
Обзор
Продукт: Piano Analytics — аналитическая платформа для продуктовых команд
Роль: Единственный дизайнер на проекте. Взаимодействие с продакт-оунером, продакт-менеджером и командой разработки
Задача: Спроектировать новый интерфейс создания кастомных метрик с расширенной функциональностью
Проблема
Ограничения старого интерфейса:
- Нельзя применить сегмент к группе метрик в скобках;
- Нет агрегирующих функций (Min, Max, Average, Median);
- Нет мульти-выделения и массовых операций;
- Устаревший UI, привязанный к одному разделу продукта.
Фидбек пользователей:
- Сложные формулы трудно читать и редактировать;
- Аналитики тратят много времени на создание комплексных метрик.
Исследование
- Систематизировал обращения в саппорт — выделил топ проблем: читаемость формул, применение сегментов, редактирование;
- Изучил конкурентов (Amplitude, Mixpanel) — выявил паттерны визуальных билдеров.
Лайаут и визуальное кодирование
Проблема
Старый интерфейс тесный, элементы формулы сливаются
Решение
- Fullscreen-редактор: левый сайдбар для браузинга элементов, центр для формулы с тулбаром;
- Цветовые индикаторы типов: оранжевый — метрики, синий — properties, фиолетовый — сегменты;
- Буквенные идентификаторы (A, B, C) связывают чипы с упрощённой формулой внизу.
Тулбар операторов и функций
Проблема
В старой версии только базовые операторы (+, −, ×, ÷). Для создания метрик из properties нужны агрегирующие функции.
Решение
- Основные операторы вынесены в тулбар: +, −, ×, ÷, скобки, ввод числа;
- Дополнительные функции в выпадающем меню: Min, Max, Sum, Average, Median, Approximate count distinct;
- Добавление по клику или через DnD.
Сегменты на скобках — главный челлендж
Проблема
Нужно применять сегмент сразу к группе метрик. Как показать визуально? Что делать с конфликтами?
Решение
- Скобки — кликабельные элементы с собственным меню;
- При применении сегмента скобки становятся фиолетовыми;
- Конфликт (сегмент внутри + пытаемся применить к скобкам) → алерт: "Applying segment to brackets will replace segment on 'Revenue' inside";
- Метрики внутри скобок с сегментом заблокированы → тултип: "Segment already applied to outer brackets".
Взаимодействия: выделение и DnD
Проблема
Клик показывает попап, но нужен и мульти-выбор. При перетаскивании непонятно куда элемент приземлится.
Решение
- Скобки — кликабельные элементы с собственным меню;
- При применении сегмента скобки становятся фиолетовыми;
- Конфликт (сегмент внутри + пытаемся применить к скобкам) → алерт: "Applying segment to brackets will replace segment on 'Revenue' inside";
- Метрики внутри скобок с сегментом заблокированы → тултип: "Segment already applied to outer brackets".
