Как я переделала главную страницу VK Музыки в кастомизируемый дашборд

В финале конкурса ArtMasters 2024 я переосмыслила логику главной страницы VK Музыки на десктопе. Исследование показало, что пользователи редко исследуют длинную витрину контента, поэтому я предложила концепцию одноэкранного кастомизируемого дашборда с акцентным плеером и управляемыми рекомендациями. Проект занял 1 место.

Компания

VK Музыка

Направление

B2C

Тип

Web

Год

2024

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

Контекст

Банк ДОМ.РФ кредитует застройщиков. Чтобы выдать деньги, сотрудники должны обработать сотни файлов (сметы, акты, отчеты)

Сотрудники вручную сортируют и распределяют сотни файлов для 20 подразделений. Ручная обработка приводит к ошибкам и потерям.

Контекст

⏳

8 часов на ручную обработку 500+ файлов тормозит работу

📉

CSI < 80% из-за потерь файлов, дозапросов и задержек выдач

❌

Первые интерфейсы делались без дизайнера → UX получился неудобным → релиз отменили

Задача

Цель бизнеса

Ускорить процесс и снизить рутину
Сэкономить 56,9 млн ₽ в год
Исключить потери и повысить CSI

Цель бизнеса

Ускорить процесс и снизить рутину
Сэкономить 56,9 млн ₽ в год
Исключить потери и повысить CSI

Миссия

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

Миссия

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

Моя роль

Продуктовый дизайнер end-to-end: аудит неудачного релиза прототипы → тесты → передача в разработку

Моя роль

Продуктовый дизайнер end-to-end: аудит неудачного релиза прототипы → тесты → передача в разработку

Критерии успеха

Снизить Time On Task на обработку одного пакета документов
Получить позитивный фидбек

Критерии успеха

Снизить Time On Task на обработку одного пакета документов
Получить позитивный фидбек

Дискавери: аудит процесса

Процесс состоял из 15+ шагов и был перегружен лишними кликами. Одни и те же файлы приходилось выбирать дважды, а редактировать данные было невозможно.

В зависимости от выбранного типа документа появляется свой набор полей (атрибутов) для заполнения. Всего в системе 540+ типов, а внутри одного типа может быть до 20 полей.

Я сравнила свои наблюдения с результатами тестов, большинство подтвердилось. Но также пользователи подсветили другие проблемы:

Сложно идентифицировать файлы без предпросмотра
Массовое заполнение файлов одного типа невозможно, но нужно
Не показан прогресс заполнения и ошибки

Гипотезы и концепт

Сплит-экран

Если объединить файлы и атрибуты на одном экране, то скорость работы увеличится, потому что сотрудникам не придётся лишних действий

Сплит-экран

2 режима заполнения

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

2 режима заполнения

Приоритизация и скоуп MVP

В концепте получилось много интерфейсных идей. Чтобы ускорить запуск, мы прогнали все через формулу Value / Effort (Ценность / Сложность).

В MVP вошло только смысловое ядро, решающее главные боли пользователей. Сложные фичи, вроде Drag&Drop, были отложены на потом.

Берем в MVP

Две колонкиДва режима заполненияМассовые и точечные действия над файламиПредпросмотрОшибочные файлыСостояние заполненности

В бэклог / Отложено

Шкала прогрессаГруппировка drag&dropДействия при смене режимовДействия над полямиИзменение компонента таблицы

Берем в MVP

В бэклог / Отложено

Берем в MVP

В бэклог / Отложено

Дизайн первой версии

Два режима заполнения

Массовый режим ускоряет однотипные действия, режим по отдельности позволяет редактировать выделенные файлы по очереди.

Два режима заполнения

Принцип работы

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

Принцип работы

Два режима заполнения

Защита проекта

Концепцию я защищала перед жюри и экспертами индустрии (Артемий Лебедев, Николай Соболев, Михаил Наер, Екатерина Тюхай и многие другие). Обсуждение было живым и требовательным — с вопросами к логике, реализуемости и продуктовой ценности решений.

Количественный замер

С коллегами по команде мы протестили старый и новый интерфейс по 3 раза

Ускорение на 24%

Среднее время прохождения сценария сократилось с 2:44 до 2:04 минут

Ускорение на 24%

Среднее время прохождения сценария сократилось с 2:44 до 2:04 минут

Стабильный результат

Снизился разброс времени (дисперсия), потому что мы меньше путались в действиях в новом варианте

Стабильный результат

Снизился разброс времени (дисперсия), потому что мы меньше путались в действиях в новом варианте

Что могло быть дальше?

Если бы концепция внедрялась в продукт, следующим шагом стала бы проверка через A/B-тест.

Я бы отслеживала:

использование кастомизации
изменение глубины прослушивания и CTR блоков при использовании кастомного дашборда
влияние на retention десктопной версии

Рефлексия

01

Дашборд — самая сложная часть концепции. В реальности требуется еще экономическая оценка фичи

02

Ключевым вызовом стала адаптация концепта под ограничения крупной экосистемы VK

03

Прошла путь от дискавери до защиты перед экспертами. Глубокая проработка всегда считывается жюри и рынком

01

Дашборд — самая сложная часть концепции. В реальности требуется еще экономическая оценка фичи

02

Ключевым вызовом стала адаптация концепта под ограничения крупной экосистемы VK

03

Прошла путь от дискавери до защиты перед экспертами. Глубокая проработка всегда считывается жюри и рынком

01

Дашборд — самая сложная часть концепции. В реальности требуется еще экономическая оценка фичи

02

Ключевым вызовом стала адаптация концепта под ограничения крупной экосистемы VK

03

Прошла путь от дискавери до защиты перед экспертами. Глубокая проработка всегда считывается жюри и рынком

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

Банк ДОМ.РФ

Как мы упростили обработку документов и ускорили флоу на 24%

Банк ДОМ.РФ

Как мы упростили обработку документов и ускорили флоу на 24%

Я открыта к новым вызовам и интересным проектам. Давайте знакомиться!

Написать в тг