Раздел “Мои книги” для вкладки "Библиотека"
Моя роль: Senior Product Designer.
Команда: PM, QA, iOS Developer, Back-end, Analyst.
Инструменты: Figma, ProtoPie, Confluence, Jira, Tableau.
Год: 2024.
1. Краткое содержание
Мы обновили UI раздела Библиотека. Несмотря на отсутствие значимых изменений в метриках, результат был положительным: ничего не ухудшилось. Мы также создали новую точку входа с конверсией в 40%, которую планируем использовать для будущих экспериментов.
2. О проекте
В этом проекте мы добавили новую функцию для раздела "Библиотека", улучшив навигацию и создав возможность для запуска других экспериментов с использованием этой функции в качестве точки входа.
3. Исследование и анализ
Для выявления проблем и потребностей пользователей книжного сегмента в EWA, мы провели серию интервью с пользователями совместно с PM команды книг. Для поиска релевантных респондентов мы добавили в приложение экран с приглашением участвовать в Zoom-сессиях, который показывался только нужному сегменту. В итоге мы провели 10 интервью: три из них провёл я, а в остальных участвовал как слушатель.
Мы выявили множество полезных инсайтов, один из которых касался навигации в разделе “Библиотека”. Мы сформировали следующую Job story: Я как пользователь библиотеки хочу легко находить книги, которые начал читать, добавил в избранное или скачал, чтобы быстро возвращаться к ним.
4. Проблема
Из исследования и анализа User Journey Map мы выяснили, что пользователям сложно находить книги, которые они начали читать. Сейчас такие книги отображаются на полке "Мои книги", а также в разделах "Избранное", "Загрузки" и "История", расположенных внизу раздела "Библиотека". Эти разделы часто остаются незамеченными, что приводит к низкому уровню их использования.
5. Гипотеза
Изучив текущее состояние и поведение пользователей, мы выдвинули гипотезу: если мы очистим полки от прочитанных книг и перенесём прогресс чтения в отдельный раздел, то сможем увеличить CR_to_book_start и улучшить поиск книг пользователями.
6. Процесс дизайна
Я начал с создания быстрого прототипа, чтобы донести свою идею и согласовать её с командой. Мы убрали нижние разделы и добавили новую кнопку "Мои книги", где пользователи могли бы быстро находить прочитанные, избранные и загруженные книги, а также историю просмотров. Поиск был улучшен, и прочитанные книги больше не оставались на главной странице "Библиотеки".
В первой итерации я спроектировал эффектный интерфейс, который потенциально решал выявленную проблему. Однако этот вариант не был согласован на продуктовой встрече из-за того, что на его реализацию потребуется много времени разработчиков.
Во второй итерации я убрал функции "продолжить чтение" и эффект размытия на фоне, оставив только табы и список книг. В таком виде мы согласовали эксперимент.
7. Вторичные проблемы
Разрабатывая раздел “Мои книги”, я выявил множество мелких проблем, которые следовало решить, чтобы улучшить общее качество и функциональность раздела.
7.1. Нет поддержки цветовых токенов
В разделе "Библиотека" не использовались цветовые токены из дизайн-системы, что усложняло поддержание консистентности между новыми и старыми разделами.
7.2. Миниатюры обложек книг
Обложки книг искажались при изменении масштаба, что приводило к частичному скрытию их содержимого. В разделе "Oxford Reading University" на обложках присутствует одноимённый лейбл, который часто не помещался из-за неправильного соотношения сторон. Я скорректировал размеры и передал разработке.
Также я решил убрать тени на обложках, чтобы сделать интерфейс чище и современней, но это привело к сли ванию обложек с доминирующим белым цветом с фоном. Чтобы исправить это, я уменьшил контраст и перевёл их в серый оттенок. К сожалению, у нас не было исходников всех файлов обложек, что усложнило задачу.
Я попросил back-end разработчика написать скрипт для выгрузки всех изображений с прода. Когда он это сделал, общий вес всех изображений обложек был более 1.5 ГБ. Мы оптимизировали этот объём, изменив цветокоррекцию изображений и сохранив их в формате webp, что сократило размер около 4000 файлов до 68 МБ, улучшив общую производительность приложения.
7.3. Решение
Мы решили эти проблемы до запуска эксперимента, что позволило получить более точные результаты. Все изменения были включены в тестовую и контрольную группы.
8. A/B тест
Чтобы проверить влияние изменений, мы провели A/B тест:
- Контрольная группа (А) осталась без изменений.
- Тестовая группа (B) получила новый раздел, улучшенный поиск и перенос прочитанных книг в категорию “Прочитанные”.
8.1 Отслеживаемые метрики
Основные метрики:
- CR_1min_read – предположительно не изменится.
- CR_20min_read - предположительно не изменится.
- Library_time - хотим понаблюдать.
- CR_book_start - предположительно вырастет.
Контролирующие метрики:
- APRU - предположительно не изменится.
- Adoption метрики нового раздела – CTR.
8.2 Результат A/B теста
Как и ожидалось, мы не получили значимых изменений в метриках активностей книг и APRU. Однако мы зафиксировали высокий CTR, 40% пользователей перешли из “Библиотеки” в “Мои книги”. Мы будем использовать новую точку входа для новых экспериментов.
Посмотреть таблицы метрик
9. Выводы
Я очень рад, что нам удалось значительно улучшить навигацию на нашем в приложении. Долгое время я хотел это сделать, так как считал это важным для удобства пользователей. Однако наши многочисленные эксперименты и исследования были сосредоточены на разработке и внедрении образовательных функций, и подобные изменения в навигации не согласовывались с текущими приоритетами. Теперь, когда мы смогли выделить время и ресурсы, я уверен, что пользователи оценят эти улучшения и их опыт станет гораздо более приятным.
При проведении A/B теста мы столкнулись с проблемой, из-за которой пришлось перезапустить его через месяц. Аналитики выявили некорректное распределение пользователей по группам, что могло сделать данные недостоверными. Например, в одной группе могли оказаться 100 пользователей из Индии и 100 из США. Несмотря на задержку в проведении теста, это дало мне возможность глубже разобраться в процессе A/B тестирования и понять, как оно работает.