Что бесит в веб-админке? Провела исследование и собрала понятный интерфейс для Кинопоиска

Исследовала веб-админки крупных онлайн-кинотеатров. Провела качественные интервью с респондентами. Собрала макеты с полным флоу работы. И зафиналила коридорными исследованиями.

Это еще осеннее тестовое задание на должность продуктового дизайнера от меня для компании СКБ Контур.

Я описала всю свою работу в текстовом формате с картинками, но в самом низу есть ссылки на видео-презентацию от меня (4 мин.) и исходники в фигме.

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

Формулировка задачи
Цели, миссия + целевая аудитория
Анализ конкурентов
Интервью с респондентами
Юзер-флоу и гипотезы
Скетчи и макеты
Коридорки и финализация макетов

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

Результат должен быть в виде веб-админки условного Кинопоиска, Нетфликса и др., с помощью которой модераторы загружают медиа-файлы и готовятся к релизам;
Количество экранов – на мое усмотрение, но важно, чтобы было понятно, как дойти от нуля до опубликованного сериала;
Не тратить время на корнер-кейсы.

Звучало интересно! Но я не до конца понимала функции модератора. У меня было два варианта:

Модератор проверяет и согласовывает привязывание каких-либо публикаций / рецензий / т.д. на страницу серии / сериала
Модератор загружает контентное наполнение сериала (видео, субтитры, названия серий и т. д.).

Поэтому решила уточнить у HR: что именно делает модератор?

Ответ был четкий: модератор — специалист, который самостоятельно загружает медиа-файлы (аудио, субтитры, видео и тд).

Получив всю необходимую информацию и поняв, что от меня требуется, я начала создавать скелет задачи.

После определения необходимой для дальнейшей работы информации, я сформировала процесс работы:

1. Погружение и сбор данных

Изучаю поставленную задачу и собираю все доступные материалы, включая спецификации и существующие решения в области администрирования контента;
Начинаю работать по Double Diamond;
Определяю целевую аудиторию

2. Discovery & Design Research

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

3. Гипотезы

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

4. Макетирование

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

5. Коридорки и финализация макетов

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

6. Финал

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

Определилась с целью и миссией для конечного потребителя. В моем случае я старалась представить, что это реальная задача, которую мне необходимо решить, поэтому:

Цель: Создать эффективную веб-админку, которая повысит скорость публикации новых сериалов на 30% в течение первого квартала.

Миссия: Дать модераторам интуитивно понятный интерфейс, который упростит процесс загрузки и редактирования контента, сократит ошибки и ускорит работу.

Определила целевую аудиторию и и сфокусировалась на ее ключевых функциях.

Они загружают, проверяют и публикуют контент. Для них важно:

Простое добавление файлов (видео, субтитры, аудио);
Гибкость редактирования метаданных (названия серий, описания, возрастные ограничения);
Контроль качества: просмотр загруженных данных перед публикацией.

Они тоже загружают файлы, но их задачи немного другие:

Загружать тяжёлые видеофайлы напрямую;
Отслеживать статус загрузки и проверки контента;
Получать уведомления о завершении процесса подготовки материала.

После выявления, кто мне нужен, начала думать, какими ресурсами модераторы и создатели контента пользуются. Важно, чтобы была возможность самостоятельно загружать и редактировать материалы. На ум, помимо Кинопоиска, Нетфликса и других, пришли еще и Ютуб, Твич, Рутуб.

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

А вот с косвенными конкурентами получилось проще. Смотрела админки и флоу загрузки видео на Ютубе и Рутубе. На Твиче смотрела на то, какие поля и этапы выделены для подготовки стрима.

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

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

Встречайте!

Алиса (модератор онлайн-трансляций на твиче), Ева (микро-блогер на ютубе) и Максим (знакомый, работавший в стандартных админ-панелях).

Подробности их рассказа можно глянуть на скриншоте ниже.

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

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

Текста у меня получилось много. Дальше будет про гипотезы, прототипы (их рисовала на бумаге, кстати) и коридорки. Если хочется сразу картинки или в видео-презентацию посмотреть, то кликайте сюда

Приоритеты гипотез я рассчитывала в отношении ценность/сложность. За «Сложность» брала скорость выполнения гипотезы при реализации в разработке. Для расчета взяла условные единицы:

Высокая сложность — 1, средняя сложность — 2, низкая — 3. Исходя из этого «Ценность» всегда равна 3, чтобы можно было рассчитать отношение.

вот как выглядела работа с гипотезами, для общей презентации размещала ее прямо в фигме

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

После флоу и приоритизации задач прикинула примерные прототипы. Времени на задачу было не очень много, поэтому экспериментировала и размышляла прямо на бумаге.

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

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

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

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

Все трое пошли по тому варианту, который был изначально спроектирован. Успех! 🎉

Максим, один из респондентов, в процессе работы с прототипами, поделился инсайтом. Он работает только 20 часов в неделю, поэтому ему приходится вручную высчитывать, сколько времени он уже провел на работе, но не всегда это получается сделать корректно, из-за чего он часто перерабатывает.

Я взяла во внимание эту мысль и решила добавить на главный экран еще трекер рабочего времени.

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

Поэтому я скорректировала главный экран и теперь точно представляю вашему вниманию концепт веб-админки для модераторов! (все остальные экраны остались без изменений)

Вот и всё! Рада показать вам эту работу. Буду рада корректной критике работы в комментах. а, ну и хештеги #дизайн #ux #ui #исследование #тестирование #кейсы #скб_контур #контур