Редизайн файлового менеджера

Апрель — Август 2020 (21 неделя)

Отредизайненый файловый менеджер. Модалка с возможностью выбора изображения.

Файловый менеджер — это инструмент для работы с файлами в файловом хранилище. Файловое хранилище используют все клиенты @SendSay, даже если сами об этом не подозревают. Картинки из шаблонов рассылок, вложения, аватарки из WebPush’ей и все отчёты о выпусках хранятся там.

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

Зачем вообще нужен файловый менеджер и для чего делать его редизайн?

Файловый менеджер — это инструмент для работы с файлами в файловом хранилище.

Файловое хранилище используют все клиенты SendSay, даже если сами об этом не подозревают. Картинки из шаблонов почтовых рассылок, вложения, аватарки из WebPush’ей и отчёты о выпусках хранятся там.

Существующее решение имеет недостатки:

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

Файловый менеджер в “Предыдущем интерфейсе” SendSay

Дискавери

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

Файловое хранилище состоит из трёх разделов:

• Публичное — для файлов, доступных всем по ссылке
• Приватное — для файлов, доступных только автору
• Отчёты — для отчётов о прошедших выпусках

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

Затем я поговорил с пользователями, чтобы понять, как они работают с файлами и получил инсайты (Insights)

• Когда пользователь загружает файл, он не понимает, где хранится этот файл, и в случае необходимости просто загружает файл с компьютера заново.
• Для повторной загрузки файлов пользователям приходится хранить у себя структуру папок и файлов на компьютере, в которой они ориентируются.
• Некоторые пользователи не знают, где хранятся отчёты, они запрашивают их через саппорт.
• Отчёты порой используют в качестве списка для импорта подписчиков. Их скачивают в “предыдущем интерфейсе” и снова загружают в разделе импорта подписчиков, или для экспресс-выпусков.
• Некоторые пользователи не знают про “предыдущий интерфейс” и загружают файлы для импорта подписчиков в публичное хранилище через новый интерфейс, вместо приватного через “предыдущий”.

Построил флоу

Существующее флоу для любого кейса использования файлов

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

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

Все варианты можно разделить на два типа:

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

Результаты дискавери

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

Основная гипотеза

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

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

Гипотеза 1 — Селект для выбора файлов из списка

Если для выбора файла в кейсах показывать дропдаун-список с файлами доступными для использования в этом кейсе, то время выбора файла сильно сократится.

Гипотеза 2 — Виджет для выбора и загрузки файлов индивидуально для каждого кейса

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

Гипотеза 3 — Все типы хранилищ в отдельном разделе в новом интерфейсе

Пользователи привыкли пользоваться отдельными разделами с файлами; чтобы им не нужно было ходить за файлами в “предыдущий интерфейс”, нужно дать доступ ко всем файлами в новом интерфейсе

Гипотеза 4 — Загрузка файла через Drag&Drop

Пользователь будет тратить меньше времени на загрузку новых файлов через Drag&Drop, нежели через системный файл-менеджер

Гипотеза 5 — Модалка со всеми файлами

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

Приоритизация гипотез

Для расстановки приоритетов и деления работы над гипотезами на итерации я использую трёхбальную шкалу и следующую формулу R = C / S

(когда гипотез очень много, то стоит использовать пятибальную шкалу)

C — это ценность для клиента и бизнеса

S — это техническая сложность реализации

Пример таблицы для сортировки гипотез

Скоупинг

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

• Хранилище на отдельной странице
• Модалка с хранилищем
• Drag&Drop для загрузки файлов

К остальным гипотезам вернёмся позже, после запуска и результатов тестов.
(но это не точно 😉)

Дизайн первой итерации

Точка входа в файловое хранилище — пункт меню “Профиль”, поскольку доступ к файлам может потребоваться когда угодно из любого раздела, и в меню раздела “Рассылки”, поскольку чаще всего файлы используются именно для рассылок.

Раздел с файловым хранилищем

Также для тестов модалки с хранилищем выбрали “Экспресс-выпуски”, не самый популярный кейс использования файлов, но очень важный для крупных клиентов. Кликаем по кнопке → Открываем модалку с хранилищем.

Раздел с модалкой

UX-тесты

Было проведено несколько интервью с пользователями для проверки гипотез

Hi-fi прототип для проверки одной из гипотез в кейсе про аттач файлов к выпуску

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

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

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

⭐️ ⭐️ ⭐️ Первый запуск ⭐️ ⭐️ ⭐️

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

Раньше на это уходило 8 действий и ~16 секунд
Теперь это действительно экспресс-выпуски.

Спустя несколько тестов и интервью я составил таблицу с конфигурацией хранилища для каждого кейса:

Конфиги хранилища для кейсов где используются файлы

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

Как только модалка с хранилищем оказалась в проде в этих кейсах, статистика загрузок файлов приняла такой вид:

Скриншот из Амплитуды со статистикой загрузки файлов через файл менеджер

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

Итоги

Цифры в амплитуде говорят о постоянном росте количества загрузок файлов через модалку на ~240% в год на каждого активного клиента.

Данные за одинаковый период 20-21-22 годов.
На каждой диаграмме представлены разные клиенты и количество загружаемых
ими файлов за периоды.

Мне показалось странным, что клиенты “в топах” по загрузкам оказываются только один раз, и я решил разобраться с чем это связано:

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

Количество загрузок файлов одного клиента в течении года с момента регистрации
(схема не отражает реальных статистических данных и сделана для наглядности)

Моя роль

— Дискавери

— Lo-Fi проектирование и гипотезы

— Приоритезация гипотез и скоупинг с командой

— Hi-Fi дизайн, edge-кейсы и прототипирование

— Коллаборация с аналитиком и саппортом при тестировании

— Дизайн-ревью перед релизами, заведение и приоретизация багов

— Контроль метрик после релиза

Уроки, которые я вынес после запуска

Протухание дизайна

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

Статистика ДО

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