Как я объединила две аналитические системы e-com в одну
Commerce Analytics Tool — инструмент, который помогает брендам оценивать видимость, формировать промополитику, отслеживать уходимость товара, поднимать карточки в выдаче и анализировать отзывы. Провела продукт от Mind Map до собственной дизайн-системы.
Две системы вместо одной
Когда я пришла в проект, вместо одного продукта меня встретили два. Один показывал KPI-метрики (процент выполнения таргетов), другой — «чистовые», абсолютные значения. И под каждого нового клиента команда собирала ещё одну отдельную сборку со своим набором функций.
Для пользователя это была боль: чтобы собрать полную картину, приходилось прыгать между двумя интерфейсами и держать контекст в голове. Для команды — тупик: каждый новый клиент означал ещё одну систему в поддержке.
Одна настраиваемая система
Спроектировать единый интерфейс, который одновременно показывает процент выполнения таргетных значений и метрики в чистовых значениях. В рамках одной системы должна быть возможность отображать или скрывать метрики под конкретного клиента — без разработки отдельной сборки.
Я была единственным дизайнером в команде с аналитиком, frontend-разработчиками и PM — отвечала за исследование, информационную архитектуру, прототип, UI-систему и дизайн-ревью реализации.
Что проверяли
Если объединить функциональность двух систем в одну, пользователи перестанут переключаться между интерфейсами и не будут терять контекст.
ПодтвердиласьЕсли сделать единый настраиваемый дашборд со скрытием и добавлением разделов под клиента, можно снизить трудозатраты разработчиков.
ПодтвердиласьMind Map и информационная архитектура
Составила Mind Map обеих систем, чтобы наглядно свести их функциональность, найти пересечения и пробелы. Полная карта продукта в итоге охватила больше, чем два исходных дашборда: ритейлеров, категории, бренды, селлеров, стоки, цены, продажи, рекламу, качество контента и поисковую выдачу. На этой основе построила информационную архитектуру нового приложения и проверила варианты раскладки дашборда.
Живой прототип: пройдите путь пользователя сами
Вместо пересказа своими словами — кликабельный клон обновлённого дашборда, собранный на собственных средствах сайта, без зависимости от Figma. Войдите и переходите между разделами через левое меню — это реальные экраны прототипа.
Wireframes и тест на 12 респондентах
Разделила интерфейс на два смысловых блока: сущности и метрики. На каждый экран добавила свитч для переключения между чистовыми значениями и KPI. Собрала кликабельный прототип и проверила идею на пользователях.
Респонденты не терялись между разделами — гипотеза о едином интерфейсе подтвердилась.
Искали, где посмотреть установленное значение таргета по метрике.
Респонденты попросили метрику Share of Voice — её не было в прототипе.
Свой дизайн вместо готового фреймворка
Перед отрисовкой чистовых макетов обсудила с frontend-командой ограничения реализации UI. Совместно решили не использовать готовые фреймворки, а построить собственную дизайн-систему — учла технические ограничения ещё на этапе проектирования.
Собрала UI Kit с использованием variants, styles и auto layout, который лёг в основу дизайн-системы и ускорил дальнейшую разработку.
Дизайн-система охватывает и более сложные паттерны — от календаря с диапазонами дат до состояний карточки товара.
Чистовые макеты и эффект
В финальных макетах закрыла потребности пользователей из исследований. Главный экран разбивает метрики по ритейлерам, категориям и брендам. В KPI-режиме отображаются значения по всем метрикам и средний процент прохождения таргета по категориям — рядом стрелка показывает, в какую сторону таргет клиента отклоняется от среднего по категории.
Добавила метрику SOV для каждой сущности и отдельную вкладку в разделе метрик.
Система выросла за пределы одного дашборда: отдельные разделы под стоки по брендам и складам, полную таблицу ритейлеров с продажами, ценами и рейтингом.
