Заказчик

«Дау» — арт-проект, посвященный Льву Ландау, который режиссер Илья Хржановский снимал тринадцать лет. Почти все съемки он провел в специально построенном в Харькове съемочном павильоне «Институт», который реконструировал деятельность УФТИ тридцатых годов. В проекте участвовали около 300 актеров.

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

А еще «Дау» регулярно сопровождали скандалы в Европе и России. Так, четыре фильма не получили в нашей стране прокатное удостоверение, потому что Министерство культуры увидело в них «пропаганду порнографии». Возможно, фильмы действительно сняты слишком натуралистично.

Все это мы рассказываем, чтобы вы представляли контекст:

• фильмы без сюжета и профессиональных актеров;
• круглосуточные съемки в течение нескольких лет;
• в деталях воссозданный быт СССР;
• циклопических масштабов эксперимент над природой человека;
• скандалы в Европе и России;
• премьера в Париже в театре Шатле, Театре де ля Виль и Центре Помпиду;
• восторженные отзывы критиков.

Задача

Итак, серия арт-фильмов с непростой прокатной судьбой. На дворе март 2020 года. Уже догадываетесь, какая срочная задача появилась у команды «Дау»?

Представители проекта обратились в «Собаку», чтобы мы помогли им запустить собственный онлайн-кинотеатр. У «Дау» уже был готовый сайт, и он был он под стать арт-проекту: черно-белый, дизайнерский и тоже с порогом вхождения. А еще — с порогом оплаты. То есть купить фильм для просмотра было не так просто. И если первый порог, который про вхождение, создатели «Дау» установили сознательно, то второй сильно мешал. А как убрать, никто не представлял. Или наоборот: все представляли, но каждый по-своему.

Так что же не давало создателям просто взять и начать продавать фильм? Сложная модель продаж.

Один фильм может состоять из нескольких частей — как его продавать? Если по частям, то как предупредить, что потом надо купить вторую часть? Да и не купить даже — получить доступ на несколько дней, будто берешь DVD напрокат. Попробуйте сформулировать в интерфейсе такое: фильм из трех частей, каждую арендуете отдельно и только на три дня? Команда «Дау» не стала экспериментировать с продажами и обратилась в «Собаку Павлову».

Подождите, а что за спешка-то была?

Укусите нас за хвост, но все из-за коронавируса. Он пришел в страну — люди стали сидеть по домам. И пока вирус, простите, не ушел, команда «Дау» должна была запустить онлайн-кинотеатр.

Разумеется, к такому заранее никто не готовился. Поэтому прямо во время нашей работы над дизайном заказчику приходилось параллельно решать продуктовые и экономические вопросы: за сколько продавать пятичасовые фильмы, как обстоят дела с правами, а не придет ли Роскомнадзор?

С решениями он приходил к нам, а мы их вносили в макеты. И так каждый день.

Процесс

Экспресс-аудит

Заказчик поставил задачу довольно широко: «мы попробовали купить фильм на сайте, еле справились — нужно исправить». И это удачная постановка, потому что проблемы с оплатой не всегда кроются в карточке товара или форме оплаты. Исследовать нужно весь путь покупателя. С него мы и начали.

По количеству комментариев сразу видно, где сосредоточились узкие места на пути пользователя

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

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

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

Мы уже рассказывали, что сайт дает фильм в аренду на сколько-то суток. Но это был пример. А вот реальность.

Вы берете фильм в аренду на 30 суток, но он будет доступен всего в течение 48 часов с начала просмотра. Если что, это не дословный перевод

Этот текст покупатель видит перед оплатой, но не на самой странице. Возможно, разработчик тогда еще не знал о модели продаж «Дау», поэтому не предусмотрел для него места. А уже позже предупреждение вставили отдельным всплывающим окном.

Страница не предупреждает, что фильм можно взять в аренду на тридцать дней, но… Вы поняли. Здесь говорится всего о двух днях

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

Про ограниченное время на просмотр — ни слова

Были проблемы и более глобальные. Когда пользователь нажимал «Смотреть», он попадал не в плеер и даже не на страницу оплаты фильма — сперва сайт требовал зарегистрироваться.

Только благодарные читатели «Собаки» могут читать подписи к изображениям!

Концепты

Главный экран на сайте — страница фильма. Поэтому начали с нее.

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

Сделали компактнее текст, предложили добавить трейлер на месте изображения. Четко обозначили, что пользователь покупает онлайн-билет, а не фильм.

Попробовали сделать картинки-обложки страниц более полезными

А здесь добавили крупный заголовок.

Некоторые предложения из других концептов могут пропадать — это нормально, мы ищем разные решения

Дизайн

Заказчику понравились концепты, поэтому мы сразу начали их развивать. Счет шел на каждый день.

Добавили способы оплаты, тексты про трейлер перенесли под изображение

После покупки фильма страница выглядит так. В прошлой версии она не менялась — оставалась та же кнопка «Play Now», только сайт при клике больше не просил оплатить фильм. Теперь здесь отчетливое «Watch Now» вместо «Get Online Ticket».

Счетчик показывает, сколько дней осталось на просмотр фильма

Сделали понятнее форму регистрации и покупки. Ничего необычного — просто поправили тексты, чтобы они сообщали, что сейчас происходит. В прошлой версии, если помните, сверху было «Новый участник» и «Продолжить с помощью Facebook».

Еще добавили согласие на обработку персональных данных

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

В этой версии фильм состоит из двух частей — пусть посетитель об этом знает сразу

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

Команда заказчика сразу забирала вопросы и через несколько дней возвращалась с ответами. Все были настроены на то, чтобы запустить онлайн-кинотеатр как можно раньше.

Во второй версии мы предложили обозначать гиперссылки хотя бы в заголовках небольшим подчеркиванием. Крошечным, на два знака. А список эпизодов перенесли вниз.

«Дау» — это еще и сериалы. Показывать сразу все восемь серий под заголовком — перебор. Поэтому мы перенесли список эпизодов вниз

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

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

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

Проект получился маленьким, но важным — от этих страниц зависят продажи фильмов.

Весь проект

Финал

Проект занял всего неделю — настолько срочной была задача. За это время мы успели проанализировать путь продажи, выдать вопросы и замечания в Miro, чтобы менеджер быстро решил продуктовые вопросы, и предложить изменения в Figma. Работали каждый день, сразу передавали эскизы заказчику, а разработчики тут же внедряли новый дизайн. Еще раз: так мы взаимодействовали каждый день.

И на следующей неделе сайт начал продажи.

Маленькие изменения дают большие результаты