Следующий кейс

Смотреть

Следующий кейс

Insight

Cовременная BI‑платформа, которая превращает любые данные в дашборды, интерактивные отчёты и приложения. Она объединяет источники, ускоряет анализ и принятие решений, легко масштабируется и позволяет создавать порталы для HR, CRM, ERP и других бизнес-направлений

10 000+

MAU

100+

Корпоративных клиентов

№1

BI платформа
по версии Круга Громова

Роль

Продуктовый дизайнер

Таймлайн

Март 2025 – н.в.

Обязанности

Разработка и поддержка дизайн системы

Проведение исследований

Lo Fi и Hi Fi макеты

Прототипирование

Дизайн ревью

Знакомство с продуктом

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

Исследование дизайн системы

На момент моего прихода в Insight разработчики использовали компоненты сразу из четырёх дизайн-систем, при этом единой дизайн-системы в Figma не существовало. Моей первой задачей стало создать актуальную и удобную дизайн-систему в Figma и довести её до продакшена.

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

Новая дизайн система

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

-32%

Time-to-Market
решений

-25%

Время на онбординг сотрудников

-40%

Время на ревью
решений

01 Вкладка «Данные» в проекте

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

Настройка виджета До

Добавил виджет в проект

Ищет датасет

Настраивает поля

Добавляет источник

Идет в другой проект (опционально)

Ищет виджет с нужным источником

Копирует JSON источника

Добавляет источник

Виджет настроен

Проблемы

01

Юзабилити-тесты показали, что поиск и ручное копирование JSON заметно усложняют настройку проекта: пользователи чаще ошибаются и тратят на процесс много времени

02

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

03

Интервью подсветили, что пользователям не понятно, где искать настройки данных проекта

Исследование

Я провёл исследование BI-платформ, а также сервисов, которые так или иначе работают с данными. Переиспользование источников данных в рамках одного проекта оказалось широко распространённым паттерном.

Также устоявшейся и распространённой практикой является размещение всех сущностей, связанных с данными, в одном месте. Такой подход логичен и заметно упрощает навигацию.

Гипотезы

01

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

02

Если упростить создание источников и их переиспользование без ручного копирования JSON, то это ускорит разработку приложений

Данные в проекте

В результате исследования стало понятно, что нам не стоит ограничиваться только централизованным списком источников. Необходимо собрать все разделы, связанные с данными, которые сейчас разбросаны по панели навигации, и объединить их в один новый раздел — «Данные»

Выбор источника из списка

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

Настройка виджета После

Добавил виджет в проект, выбирает источник из списка

Виджет настроен

Онбординг в новый функционал

Мы сделали онбординг, который решает 2 задачи — рассказывает про новый раздел Данные и показывает пользователю как добавить Источник данных в список переиспользуемых

65%

Новых проектов имеют хотя бы 1 переиспользуемый источник

-25%

Создание базового проекта

-20%

Обращений по теме настроек данных

Что дальше

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

02 Пресеты виджетов

Один и тот же виджет можно настроить по разному — отступы, шрифты, фон, цвета. Также они могут различаться фнкционально. Самый яркий пример —это классические столбчатые диаграммы. Ее можно настроить горизонтально, вертикально, с накоплением — все зависит от кейса.

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

Инсайты из интервью

01

Не все пользователи знают о наличии у себя в команде «мастер проекта» с виджетами и каждый раз настраивают их вручную

02

Опытные пользователи, которые поддерживают — «мастер проекты» жаловались на то, что его сложно поддерживать, а еще сложнее передавать информацию о его наличии

03

Пользователи регулярно давали обратную связь с предложением сделать возможность сохранять настройки виджета

Флоу пользователя До

Хочет добавить виджет в проект

Добавляет виджет

Настраивает внешний вид

Добавляет источник данных

Ищет мастер проект

Ищет виджет с подходящими настройками

Копирует виджет

Добавляет виджет

Виджет настроен

Исследование

Во время исследования основными референсами были решения из различных low и no code конструкторов сайтов, а также инструментов для проектирования

Гипотезы

01

Если дать пользователю возможность создавать пресеты для виджетов, то это ускорит создание проектов

02

Если дать возможность перезаписывать пресеты это упростит их поддержку

Создание пресета

Настраивает виджет и нажимает Создать пресет

Выбирает название

Пресет создан

Применение пресета

Добавляет виджет в проект. Он сразу появляется с пресетом

Переключил пресет

65%

Пользователей создали хотя бы 1 пресет

-20%

Создание базового проекта

-27%

Обращений по теме настройки виджета

03 Связи объектов

Cвязи объектов

В платформе есть понятная, но довольно сложная цепочка работы с данными: пользователь подключает коннектор, настраивает соединение с базой (PostgreSQL, Dremio и др.), оттуда подтягиваются датасеты, которые затем становятся источниками данных для дашбордов в проектах.

На практике пользователям часто приходится менять что-то в этой цепочке — редактировать подключение, удалять датасет или заменять источник. И именно здесь возникает сложность: без понимания связей между объектами одно необдуманное действие может привести к «падающим» виджетам, некорректным данным в отчетах или даже поломке всего проекта. Раньше пользователи решали эту задачу вручную, но для этого требовались глубокие знания кода и структуры данных

Исследование

Возможность видеть связи объектов это важный функционал для любой платформы работающей с данными и встречается часто. Я исследовал BI платформы и сервисы работающими с данными и пришел к выводу, что есть 2 варианта решения. Более простой вариант — показывать связи объекта списоком, более наглядный, но сложный для реализации — показать в виде графа.

Решение

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

Просмотр связей объекта (на примере проекта)

Для каждого объекта в цепочке (коннектор, подключение, датасет, проект) реализовано отдельное окно со списком связей. В нём пользователь видит, какие сущности зависят от выбранного объекта и на какие объекты он сам влияет. Из этого же окна можно перейти к связанным сущностям и последовательно пройтись по всей цепочке зависимостей

Открывает action menu проекта и выбирает Связанные объекты

Открывается Popup, где можно проследить всю цепочку связей

Связи при редактировании датасета

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

Редактирует датасет

Нажал Сохранить

Связи при редактировании подключения

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

Выбирает подключение для редактирования

При редактировании есть алерт из которого можно посмотреть связи

–32%

Обращений с «поломанными» дашбордами

10 мин

→

4 мин

Время на оценку последствий изменений в объектах

58%

Пользователей просматривают связи перед внесением изменений

04 Небольшие, но важные улучшения редактора

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

Уникальные названия слоев и поиск

Теперь каждый слой при добавлении получает уникальное название, а встроенный поиск по слоям значительно упрощает работу

Автосохранение проекта

Ранее проект можно было сохранять только вручную, что иногда приводило к потере данных. Теперь проект автоматически сохраняется каждые 5 минут

Переименование слоя двойным кликом

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

Наведение на слой при клике на его иконку

Теперь пользователь может кликнуть на иконку слоя, и экран автоматически наведётся на соответствующий виджет, что значительно упрощает работу в проекте

Открытие настроек при выделении виджета

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

Растягивание сайдбара

Пользователь может растягивать сайдбар и видеть больше деталей, что облегчает работу с проектом