B2C-приложение для отслеживания подписок «SubScout»
Помогает пользователям отслеживать расходы на сервисы, получать напоминания о списаниях и экономить бюджет. Полный цикл: от исследований до тестируемого прототипа.
UX/UI дизайн, прототипирование, юзабилити-тестирование
Роль
Срок
Результат
6 недель
кликабельный прототип основного сценария
Проблема
Бизнес-задача
Пользовательская задача
Люди теряют деньги из-за забытых подписок. Пробные периоды заканчиваются незаметно, списания происходят автоматически, а общая сумма расходов остаётся неочевидной.
Создать приложение, которое сделает управление подписками прозрачным и поможет контролировать бюджет.
Быстро добавить подписку, видеть общую сумму расходов и получать напоминания о списаниях заранее.
Процесс:
01. исследование и анализ (в команде)
02. проектирование сценариев (в команде)
03. вайрфрейминг (индивидуально)
04. визуальный дизайн (индивидуально)
05. прототипирование и тестирование (индивидуально)
01. исследование и анализ
Пользователи хотят «пробовать» приложение перед покупкой, но боятся, что забудут отменить подписку, если не понравится
Анализ 7 конкурентов (App Store, Google Play), формулирование гипотез и 6 глубинных интервью с целевой аудиторией.
Методы:
Инсайт
Решение в продукте
Онбординг раздражает, нужны подсказки в моменте
Пользователям важно иметь возможность выбирать тип сортировки подписок
Не все подписки могут быть в каталоге
Пробный первый месяц премиума с добавлением подписки на наше приложение в списки подписок (придет уведомление о списании)
Контекстные тултипы вместо обязательного обучения
Реализовали гибкую сортировку подписок
Добавили возможность создать кастомную подписку
Инсайты
Решения в продукте
02. проектирование сценариев
Перед отрисовкой экранов мы в команде упаковали весь путь пользователя в блок-схему. Для меня было критично проработать 3 уровня:
1. Базовый: идеальный сценарий, где человек легко находит подписку в каталоге и добавляет её.
2. Повседневный: редактирование настроек, проверка дат и переходы на сайты сервисов.
3. Стрессовый: моменты, когда что-то идет не так. Важно было продумать флоу так, чтобы интерфейс помогал решить проблему, а не бесил пользователя еще больше.
2. Повседневный: редактирование настроек, проверка дат и переходы на сайты сервисов.
3. Стрессовый: моменты, когда что-то идет не так. Важно было продумать флоу так, чтобы интерфейс помогал решить проблему, а не бесил пользователя еще больше.
03. вайрфрейминг
Я уделила особое внимание логике навигации и снижению когнитивной нагрузки. Разрабатывала интерфейс так, чтобы вся ключевая информация была на виду. Также проработала все сценарии добавления подписки, включая экстренные ситуации.
04. визуальный дизайн
Я выбрала современный неоновый стиль в тёмной теме — он ассоциируется с технологичностью, контролем и вызывает доверие. Тёмный фон бережёт глаза при частой работе, а яркие акценты сразу ведут взгляд к главному: датам списаний и кнопкам. Чтобы обилие данных легко считывалось, я сделала ставку на минимализм и выверенную типографику.
05. прототипирование и тестирование
Создала кликабельный прототип основного сценария «Поиск и добавление подписки». Провела юзабилити-тестирование на 3 пользователях.
1. Все респонденты поняли функционал приложения и смогли добавить подписку без особенных усилий.
2. Всем респондентам удалось пройти весь путь приблизительно за 30 секунд.
3. Все респонденты оценили яркий дизайн приложения.
2. Всем респондентам удалось пройти весь путь приблизительно за 30 секунд.
3. Все респонденты оценили яркий дизайн приложения.
Результаты:
Найденные проблемы:
1. Трудный доступ к «Категориям»: чтобы открыть список, нужно тапнуть минимум дважды.
2. Галочка «Бесплатно первые 30 дней» запутывает пользователей, нажатие на неё по их ожиданиям должно приводить к другому результату.
3. Кнопка назад не всегда заметна, особенно мешает, если хочется быстро вернуться на предыдущую страницу.
2. Галочка «Бесплатно первые 30 дней» запутывает пользователей, нажатие на неё по их ожиданиям должно приводить к другому результату.
3. Кнопка назад не всегда заметна, особенно мешает, если хочется быстро вернуться на предыдущую страницу.
Гипотезы по улучшению приложения после указанных недостатков:
- Если увеличить размер кнопки «добавить категорию», пользователь будет открывать выплывающий список с первого раза и использовать эту функцию в 2 раза чаще.
- Если задать функции «бесплатно первые 30 дней» другой вид, а из основной галочки при выборе тарифа сделать чекбокс, то пользователь не будет путаться на этой странице и сократит время пребывания на ней на 5–7 секунд.
- Если вынести кнопку «назад» на верхнюю часть экрана, то пользователь не будет суетиться в её поисках, и это сократит время пребывания на странице.
Эти гипотезы были зафиксированы для проверки в следующих итерациях.
Ожидаемое влияние на метрики
Поскольку проект находится на стадии концепта с протестированным прототипом, реальные метрики будут собраны после релиза. На этапе проектирования я определила целевые показатели:
Метрика
Цель
Как измерить
Доля активации
Время на задачу
Возвращаемость
Уровень ошибок
60% пользователей добавляют 1+ подписку в первый сеанс
Добавление подписки ≤ 1 минуты
40% пользователей возвращаются через неделю
< 5% ошибок при добавлении подписки
Трекинг событий в аналитике
Когортный анализ
Логи ошибок в интерфейсе
Замер времени от входа до успеха
SUS (удобство)
≥ 75 баллов
Опрос после тестирования
Выводы и уроки
Проект научил меня балансу между функциональностью и простотой в B2C-продукте. Самой большой сложностью было учесть все важные для пользователя моменты,
не перегрузив интерфейс, но и не сделав его бесполезно пустым.
не перегрузив интерфейс, но и не сделав его бесполезно пустым.
Я поняла, насколько критично тестировать прототип до финального дизайна — проблемы, которые нашли пользователи (галочка, кнопка назад), были бы незаметны без живого теста.
Важный инсайт по доступности: в макетах я использовала 10-й кегль, а это ниже стандарта для мобилок. Чтобы соответствовать стандартам WCAG и сделать текст удобным для чтения, в дальнейшем базовый размер стоит поднять до 12–14 пунктов
и доработать контрастность элементов.
и доработать контрастность элементов.
Выяснила, что пользователи ценят контроль и прозрачность больше, чем красивый онбординг. Подсказки в моменте работают лучше, чем обязательное обучение.
Если бы начинала сейчас, провела бы больше итераций тестирования до визуального дизайна — это сэкономило бы время на правках.
Другие кейсы:
01. B2B-веб-портал для сети коворкингов «Топ-скоп»
03. Продуктовая задача для «Магнит.Рестораны»
