Театрум, 2025

Приложение для Smart TV
Тип кейса
Коммерческий,
в составе студии WEBBOX
Теги
Исследование конкурентов, user flow, информационная структура, макеты, прототип, юзабилити-тестирование
Длительность
4 месяца
ТЕАТРУМ — ЭТО ПРИЛОЖЕНИЕ И САЙТ ДЛЯ ЛЮБИТЕЛЕЙ ТЕАТРА. С ЕГО ПОМОЩЬЮ МОЖНО ЛЕГКО НАХОДИТЬ ИНТЕРЕСНЫЕ ПОСТАНОВКИ И ИССЛЕДОВАТЬ МИР ТЕАТРАЛЬНЫХ МЕРОПРИЯТИЙ.

Проблема

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

Решение

Разработать дизайн приложения Театрум для Smart TV, в котором зрители могут смотреть по подписке записи интересных спектаклей не выходя из дома.

Моя роль

Я работала над проектом под руководством арт-директора студии. Коммуницировала с заказчиком, провела исследование конкурентов, построила user flow, информационную структуру, создала макеты экранов, сделала прототип и провела юзабилити-тестирование, по итогам которого внесла правки в макеты и составила бэклог идей для следующих этапов работы над продуктом.
Познакомившись с руководствами от основных производителей умных телевизоров и парой полезных статей коллег, я выделали ключевые моменты для дизайна ТВ-интерфейсов и использовала их в работе.
Для меня это был первый проект разработки дизайна для телевизионных операционных систем. Поскольку такие приложения имеют свою специфику, сначала я занялась ее изучением.
Иллюстрация из гайда Samsung

Исследования

Анализ конкурентов

Онлайн-кинотеатры и Театрум являются конкурентами лишь частично, так как их аудитории и цели пересекаются в ограниченных сценариях. Однако популярные онлайн-кинотеатры значительно влияют на формирование пользовательских ожиданий от подобного сервиса. В связи с этим я провела анализ приложений для Smart TV семи популярных онлайн-кинотеатров, чтобы выявить общие UX- и UI-решения, отличительные особенности и проблемные зоны. Полученные инсайты легли в основу моей работы над проектом.

Информационная структура

Я структурировала всю информацию, с которой взаимодействует пользователь в приложении, и возможные действия с ней, представив всё в виде схемы. Данные разделены на две ключевые категории: информация о пользователе (его аккаунте) и данные о контенте. Для построения информационной структуры я использовала концепт CRUD (create, read, update, delete) + дополнила его специфическими операциями (например, настройка выбора профиля при запуске)

User Flow

На начальном этапе работы приложения будет критически важным, насколько успешно пользователи проходят сценарий «Первый запуск просмотра записи спектакля по подписке».
User flow «Первый запуск просмотра записи спектакля по подписке»
  • поиск спектакля,
  • просмотр записи спектакля,
  • сохранение понравившегося спектакля,
  • смена пользователя.
Я выделила следующие ключевые задачи пользователей в приложении:
С учетом требований заказчика по внедрению стандартных паттернов онлайн-кинотеатров, обширных рекомендаций Smart-TV-платформ и относительно простой структуры приложения, было решено отказаться от этапа создания вайрфреймов в пользу более непосредственного подхода к проектированию.

Визуальная концепция

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

Макеты

Я постаралась сделать визуал достаточно простым, чтобы не отвлекать пользователей от контента. Учитывая запрос заказчика и закон Якоба, приоритет был отдан визуальной последовательности и традиционным решениям.

Юзабилити-тестирование

После дизайна макетов экранов я собрала прототип и провела юзабилити тестирование приложения с участием 5 человек.
ЦЕЛЬ
Выявить основные проблемы пользователей на ключевых сценариях приложения.
ЦЕЛЬ
Прототип
Сценарии
  • Просмотр Главной
  • Поиск спектакля
  • Просмотр экрана о спектакле
  • Авторизация
  • Оформление подписки
  • Смена профиля
  • Установление родительского контроля
Участники
Женщины в возрасте от 27 до 52 лет, периодически смотрящие театральные постановки оффлайн. Большая часть участниц тестирования знакома с приложениями Smart-TV для просмотра фильмов, но не все являются их активными пользователями.
Метод тестирования
Модерируемое очное тестирование на экране ТВ с помощью прототипа, собранного в Figma.
МЕТОДОЛОГИЯ
МЕТОДОЛОГИЯ
Основные выявленные проблемы касались просмотра Главной и просмотра экрана о спектакле, остальные сценарии не вызвали существенных сложностей у участников тестирования.
ОСНОВНЫЕ ВЫЯЛЕННЫЕ ПРОБЛЕМЫ
ОСНОВНЫЕ ВЫЯВЛЕННЫЕ ПРОБЛЕМЫ
Просмотр Главной
Просмотр экрана о спектакле
Проблемы
Серьезность
Не все обращают внимание на тексты, возможно требуются дополнительные исследования.
Серьезность низкая или средняя.
3.
Непривлекательные тексты о спектаклях
Серьезность низкая.
Рейтинг в отзывах не понятен старшему поколению.
2.
Не всем пользователям будет достаточно этой информации для принятия решения о просмотре, данный экран — основной для начала процесса оформления подписки. Если он не дает достаточно информации о спектакле, то будет ниже конверсия.
Серьезность высокая.
  1. Неудачный дизайн первого экрана — непонятно сразу, что ниже есть еще информация.
Проблемы
Серьезность
Пользователь выбирает спектакли, перемещается по рядам подборок, ему не критично, вернулся ли он точно в самую первую подборку, его задача — выбрать спектакль для просмотра.
Серьезность низкая.
Пользователям непонятно, когда именно они вернулись в самое начало главного экрана, если они по нему перемещались вертикально между подборками.
2.
Пользователи смогут запомнить одну иконку после перехода по ней в раздел.
Серьезность низкая.
  1. Непонятная иконка каталога.
Серьезность низкая.
3.
Видимость заголовков подборок.
Лаконичный дизайн
без супер излишеств — то, что я и ожидала увидеть в таком приложении. Все фотографии на главной сочетаются плюс минус. Если бы там были пестрые кадры, то это бы рассеивало внимание.
ЦИТАТЫ
Не хватает автора
произведения (автора музыки, например, если это балет).
Купить за 1 ₽ — я бы
нажала, чтобы узнать, что именно продают за 1 ₽.
Круто было бы,
если бы можно было посмотреть отрывки спектакля, а потом купить на него билеты сразу тут же.
ЦИТАТЫ
По итогу тестирования я сформулировала 13 задач для правок/обсуждения с заказчиком и реализовала 8 из них, остальные перешли в бэклог. Кроме того, благодаря тестированию появилось 6 новых идей развития приложения, которые также пополнили бэклог.
Узнать больше
Написать
Написать
Made on
Tilda