Вводные:

Продуктовый проект мобильного онлайн-кинотеатра, который я вёл от идеи до финального дизайна. Спроектировал с нуля: брендинг, дизайн-систему, логику пользовательских сценариев, 130+ экранов и сопроводительные материалы для промо. Результат — готовое к разработке решение, закрывающее полный цикл зрителя: от поиска и персонализированных подборок до офлайн-просмотра.

Проблема:

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

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

Контекст и ограничения:

Проект стартовал с нуля, поэтому первым делом нужно было понять рынок и пользователей. Бюджет и сроки были ограничены — исследования нужно было провести быстро, но без потери качества.

Сбор данных

Провёл конкурентный анализ (Netflix, Кинопоиск, IVI), глубинные интервью с 10 респондентами и юзабилити-тестирование существующих решений. Это помогло собрать качественные данные о болях и сценариях.

Глубинное интервью

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

Как я это делал:

Я провел 10 глубинных интервью с пользователями таких платформ, как Kion, Okko, Иви, Кинопоиск и Premier. Это были люди разного возраста и профессий, но их объединяло одно — они смотрят фильмы и сериалы с телефона минимум 3-4 раза в неделю. Каждое интервью длилось около 40-60 минут, я записывал разговоры с согласия респондентов, чтобы потом расшифровать и проанализировать ключевые моменты.

Вот небольшой фрагмент одного из интервью :

Варфреймы

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

Визуальный стиль

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

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

Как выбирали :

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

Дизайн система

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

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

За основу взял дизайн-систему Paradigma — она привлекла простотой и универсальностью. И параллельно опирался на Apple Human Interface Guidelines, чтобы решения органично вписывались в нативную среду iOS.

Отрисовка экранов

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