Ключевые моменты из курса Future London Academy 2017 по продуктовому дизайну

Отчёт от руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.

Уже третий год подряд я езжу на курс Future London Academy (и второй — курирую его часть по UX и продуктовому дизайну). За это время увидел, как работают несколько десятков интереснейших британских дизайн-студий и продуктовых компаний, и существенно расширил свои профессиональные горизонты. В этот раз мы были в Moving Brands, Microsoft Lift, Territory, Deliveroo, Moo, Made by Many, NomNom, Monese, Analog Folk и Firedrop, а также послушали Андреа Пикки из Sony Mobile.

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

Territory Studio наиболее известна тем, что разрабатывает UI-дизайн для крупных блокбастеров, но также берётся и за другие проекты для различных коммерческих клиентов. Как показывает опыт студии, креативность можно поставить на поток. Команда умудряется рождать много интереснейших идей про будущее, причём делает это в нечётких условиях (самого фильма ещё нет) и с впечатляющей скоростью (например, для «Мстителей» уходило по полдня на экран, для «Из машины» — день).

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

На старте они думают скорее об идеальном user journey, а не о конкретных взаимодействиях, вдобавок стремятся быстро попробовать и выкинуть плохую идею. Хотя иногда, наоборот, хочется показать нелепость технологий, чтобы добавить юмора.

Полезно думать об интерфейсе для фильма как об операционной системе и делать UI Kit для неё — это позволяет видеть общую картину и совершать меньше лишних движений. Команда совместно работает над документом с концептом — получается что-то вроде типичного процесса в Google Docs.

Инструментарий для прототипирования: Illustrator, Photoshop, After Effects, Cinema 4D (выбирают то, что удобно прямо сейчас). Члены команды устраивают хакатоны — за 24 часа общения с клиентом собирают прототип, который улучшается постоянными итерациями. В принятии решений последнее слово остаётся за режиссёром.

Кинопроекты требуют огромной интенсивности, но при этом команда не хочет уступать в качестве — поэтому сотрудники проводят много тренингов по развитию соответствующих навыков. Правда, после этого обычные проекты кажутся слишком лёгкими. В том числе поэтому сейчас Territory Studio хочет чуть притормозить рост, чтобы сбалансировать знания по команде.

Типичные роли в проекте — дизайнер, аниматор, технолог. Однако их стремятся объединить примерно по тем же причинам, почему в нашей среде появилась должность продуктового дизайнера. Студия работает с фрилансерами, и благодаря ярким проектам ей легко находить лучших. Однако в такой интенсивной среде с ними непросто взаимодействовать — легче подойти к сотруднику и рассказать идею за пять минут, чем писать длинное письмо с описанием «удалёнщику», так что периодически некоторых членов команды перевозят в офис.

Territory поработала над огромным количеством ярких фантастических фильмов последних лет («Мстители», «Стражи галактики», «Марсианин», «Из машины», «Призрак в доспехах», «Восход Юпитера», «Трансценденция», «Миссия невыполнима», «Прометей») и всегда старается думать над тем, куда движется наша цивилизация — часто такие размышления становятся основной для создания идей по интерфейсу.

Мышь и клавиатура давно перестали быть впечатляющими на экране, поэтому команда проекта всегда ищет другие пути. Горячая тема сейчас — Agentive UX. Для этого сотрудники изучают наработки в сфере технологий искусственного интеллекта. Для супергеройских фильмов ищут реальных «супергероев»: пилотов, биологов и так далее — то есть всех тех, кто работает со сложными технологиями.

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

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

Примечательно, что Territory сама отвечает за конечный продукт — тут практически нет разработки, поэтому можно «дожать» концепт до упора. Зато и радость от результата гораздо выше. Например, один из новых дизайнеров работал над «Стражами галактики». Его попросили сделать пару экранов, но не сказали, что это за фильм.

Спустя какое-то время он увидел в кинотеатре трейлер со своими кадрами. Был приятно шокирован, стал работать в тысячу раз внимательнее. Созвон с режиссёром или презентация для актёров сильно мотивируют расти. Когда видишь того же Кристофера Нолана, который отвечает за сотню миллионов долларов бюджета, чувствуешь эмпатию к нему и работаешь гораздо усерднее.

Некоторые идеи из фильмов применяются в реальных проектах. Компания ведёт совместный проект с Intel на базе Kinect и дополненной реальности, а одна космическая компания даже экстраполирует данные из видеопотока. Технологии так быстро развиваются, что даже концепты в фильмах не всегда успевают — на выход в прокат уходит много времени, и реальный мир, бывает, догоняет.

Кстати, в это же время в лондонском центре Barbican шла выставка о фантастическом кино, часть из экспонатов которой делали Territory.

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

Сама команда структурирована по модели Spotify: дизайнеры сидят в командах и делятся на два «клана» (процесс создания и контент), исследователи работают сразу с несколькими группами как внутренние консультанты, есть гильдия для дизайн-системы. Один из источников продуктовых идей и инсайтов — команда поддержки, с которой периодически проводятся рабочие сессии.

Интересно, что через пару часов после лекции в офисе Moo прошёл London Design Meetup, организованный Кевином Кларком из нашей группы. В целом он мало отличался от отечественных мероприятий подобного формата: пицца, пиво и несколько небольших презентаций на общие темы.

Deliveroo за три года вырос с десяти до более тысячи сотрудников, так что дизайнерам нужно было успевать за этой скоростью. Сейчас их около 30, они отвечают за продуктовый дизайн, контент-стратегию и исследования и делятся на несколько подкоманд: consumer core по поиску и отслеживанию заказа (четыре человека), consumer experience (шесть человек), рост (три человека), доставка (девять человек), рестораны (пять человек).

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

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

Один из ключевых вопросов для команды — как масштабировать хорошую работу. Легко быть единственным дизайнером, который принимает все решения. Но когда компания растёт, становится невозможно управлять всеми решениями единолично, появляется потребность в других подходах.

Основные задачи сейчас:

У Deliveroo глубокое понимание пользователя, ведь еда — универсальная и очень человечная вещь. Она близка каждому, это усиливает эмпатию. Здорово, что каждый сотрудник — это и клиент, потому что все заказывают еду через свой сервис. А каждую пятницу предусмотрена доставка на весь офис.

Команда описывает предметную область как беспорядочную, человечную и международную. Главная цель для клиента — найти еду как можно проще и как можно быстрее. Для водителя — найти точку доставки. Сотрудники описывают свою задачу как создание дизайна для людей по всему миру: которые имеют разный опыт, говорят на разных языках, пытаются заработать деньги. Они могут ездить на велосипедах, скутерах, машинах или ходить пешком. Им приходится носить перчатки, решать проблему с лопнувшим колесом, прятаться под проливным дождём, работать в 40-градусную жару — и при этом доставлять мороженое или пиццу, используя приложение по восемь часов подряд.

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

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

Агентство Made by Many стремится развивать сотрудников и клиентов, для чего подготовило три методички по улучшению навыков дизайнеров, созданию стратегии и разработке технологий — в них описано то, как выглядит хороший результат.

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

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

Пару лет назад агентство кодифицировало эту должность в виде матрицы навыков — она помогает оценивать текущих сотрудников и новых кандидатов. Уровень владения оценивается по шкале от одного до шести (шестой уровень получить невозможно). Вот основные из них:

Дополнительные навыки:

Для оценки сотрудники используют приложение Coach Amp 360 Reviews. Для улучшения определённых навыков руководство назначает дизайнеров на те проекты, в которых требуется их проявить. Прежде, чем подобрать проект конкретному дизайнеру, нужно изучить до 20 факторов: есть ли нужный опыт, достаточно ли креативности и так далее. Главное — соблюдать баланс: если дизайнер уже сделал много похожих проектов, ему может стать скучно.

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

Долгое время в формуле Brand = Promise + Experience превалировала первая составляющая, и только в последнее десятилетие дизайнеры стали уделять больше внимания второй. Современные бренды определяются тем, что они делают, а не только тем, что говорят. Для этого нужно перестать просто реагировать на существующие сценарии взаимодействия и начать формировать их.

У пользователей есть невыраженные амбиции, в достижении которых бренд может помочь — тогда он станет цениться ещё сильнее. Например, для Nike — это стать сильнее. Для этого Analog Folk работают со стеком ИИ-технологий:

Moving Brands активно вовлекает клиентов в работу над брендом. Агентство устраивает совместные рабочие сессии, на которых проверяет связку бренда с интерфейсом (насколько основные экраны и сценарии соответствуют ключевым принципам).

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

В своей клиентской работе дизайнеры ориентируются на здравый смысл и чувство такта, понемногу добавляя к интерфейсу персональность. Влияют и технические ограничения: в примере для BBC iPlayer Kids разработка задействовала готовые части интерфейса из основного продукта iPlayer, поэтому проще было оставить их стандартными. Также важно было оставить сценарии взаимодействия понятными. Не было задачи сделать совсем другое приложение — нужно было просто развить бренд под новую аудиторию.

Мобильный банк Monese — редкий пример сделанного с любовью к деталям продукта, который существует в реальной жизни, а не просто в качестве концепта на Dribbble. У него современный визуальный дизайн, хорошо проработанный интерфейс с фокусом на упрощение операций и яркая эмоциональная составляющая. Кроме того, бренд хорошо сочетается с интерфейсом, так что цифровой продукт и маркетинговая активность отлично интегрированы.

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

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

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

Бизнес-цели компании в целом строятся вокруг UX (простота и скорость отправки денег), поэтому их легко было связать с интерфейсом. Они стараются не думать, как типичный банк, и ищут вдохновение в потребительских продуктах вроде Netflix и Spotify. Принципы дизайна Monese:

Команда активно тестировала прототипы в UX-лаборатории. Дизайнеры не были ограничены существующим продуктом, поэтому бесстрашно пробовали разные подходы к взаимодействию жестами. Главный критерий — не то, как быстро пользователь ввёл логин и пароль, а то, как быстро удалось верифицировать его личные данные.

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

Microsoft хотела сделать Windows снова креативным, использовав одно из популярных направлений — технологию 3D. Компания взяла за основу MS Paint, поскольку программа подходит под задумку (сделать сложную область доступной массовому пользователю), знакома миллионам людей и установлена на большинстве компьютеров.

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

Paint появился ещё в 1985 году. Дизайн-команда посмотрела все пять версий на компьютерах с разными ОС Windows того времени, чтобы лучше понять продукт и его идеологию. Сотрудники также исследовали то, как люди заходят в Paint, куда уходят из него, как инструмент вписывается в более широкие сценарии работы.

Они зафиксировали, какие действия пользователи совершают в приложении и какие из них приводят к возвращению, а какие — нет. После этого нашли и исправили все проблемы, которые затормаживали процесс. Любопытно, что команда Microsoft научилась проводить A/B-тесты на десктопных приложениях. Благодаря телеметрии специалисты могут рассчитывать кликабельность элементов интерфейса — например, куда пользователи нажимают на стартовом экране.

Команде приходится делать тонны интерактивных прототипов, поскольку до неё задачу ещё никто не решал. Один из первых вопросов — можно ли вообще совместить 2D и 3D. Первым шагом стало простое превращение двухмерных картинок в трёхмерные. Это вызвало вау-эффект. Следующий вопрос — может ли «казуальный» пользователь сразу рисовать в 3D. Для этого нужно было сильно упростить интерфейс — например, отказаться от свободной камеры, поскольку при тестировании непрофессионалы дизориентировались и предпочитали фронтальную.

Чтобы развивать и улучшать интерфейс в таком ключе, команда выдвигает и прототипирует гипотезы. Для прототипирования использует PowerPoint и Unity. В разработке участвуют дизайнеры, инженеры и 3D-моделлеры. А юзабилити-тестирование проводится в централизованной лаборатории в США.

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

Также Microsoft устраивает публичные мероприятия: например, совместно с BAFTA сотрудники компании провели целый день с детьми, которые рисовали монстров в 3D и видели их в смешанной реальности. Вообще в инкубаторе Microsoft Lift Studios создаётся много интересных проектов: например, Hololens, Paint 3D, клавиатура SwiftKey.

Конструктор сайтов Firedrop использует алгоритмический дизайн, чтобы упростить жизнь владельцам малого бизнеса. Чтобы не повторять ошибок The Grid, который попытался решить слишком универсальную задачу, Firedrop выбрал более узкую и приземлённую — избавиться от плохих дизайнеров.

До этого основатель проекта Марк Крауч владел веб-студией, однако у многих клиентов не было денег на хороший дизайн, так что им приходилось идти на какой-нибудь Fiverrr. Впоследствии именно они и стали целевой аудиторией продукта. У инструмента очень чёткий таргетинг на генерацию лидов. На первом этапе сервис предлагает только одностраничники — это облегчает понимание того, как работают сайты на платформе и почему там что-то могло сломаться.

При создании Firedrop Крауч смотрел на Squarespace, Wix и другие конструкторы, изучал их шаблоны и пытался понять феномен их популярности. Сервис ограничивает функциональность, чтобы не перегружать инструмент. Например, видео невозможно загрузить, но можно импортировать с YouTube.

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

Чтобы автоматизировать дизайн, лучше всего начать с конечного результата и потом идти от него к принципам. Могут ли компьютеры быть художниками? Согласно известной цитате Пикассо, хорошие художники копируют, лучшие — воруют.

Компьютеры сейчас хорошо имитируют, у них отлично получается копировать удачные решения. Но креативность ли это? Одна из главных проблем инструментов алгоритмического дизайна заключается в том, как ограничить пространство сгенерированных решений.

Firedrop может выдавать миллионы комбинаций, но сервис сузил результат до 800 вариаций. Сначала дизайнеры пытались сделать это вручную, но потом начали применять правила: симметрия, контраст, пространство, ритм. Чтобы проверить работоспособность концепции, проект меняет вид своего сайта каждую неделю.

Инструмент для сбора и анализа продуктовых инсайтов NomNom решает задачу, до которой у большинства компаний никак не дойдут руки, — объединяет вместе обратную связь из многих источников (обращения в службу поддержки, пользовательские исследования, аналитика, отзывы в магазинах приложений и тому подобное).

Инсайт не происходит моментально. Скорее знания о пользователях и продуктах копятся постепенно, а потом дают прорыв в понимании. Мало того, что потребность в таком источнике инсайтов нужно осознать — ещё нужно пройти длинный путь по изменению культуры перед тем, как компания может стать data-driven.

Мы движемся в эту сторону достаточно давно, но скорость недостаточна и на ходу возникает большое количество проблем. Однако выхлоп есть, и он увеличивается с решением каждой проблемы. В ходе общения с клиентами София Кинтеро сформулировала основные проблемы внедрения:

Она также ссылалась на отличную памятку по методам пользовательских исследований и аналитики Unstuck Map от Никеля Блааса.

Андреа Пикки из Sony Mobile говорил о важности построения отношений продукта с пользователем — это связь для обмена ценностью. Конкурент может скопировать функции, но сложно скопировать ценность. Она бывает неявной: например, для Starbucks один из главных KPI — количество времени, которое клиент провёл в кофейне, ведь это помогает строить взаимоотношения.

Правда, дизайнеры не могут влиять на отношения непосредственно, так что им приходится действовать опосредованно, через триггеры. Овладение Sketch или Illustrator занимает максимум месяц. Однако научиться решать проблемы — гораздо сложнее. В Sony Mobile есть так называемая SWAT-команда — пять сильных дизайнеров, которые понимают это и тратят 20% своего времени на решение проблем других команд.

Лондон интересен тем, что здесь одинаково хорошо развиты разные направления дизайна. Между тем, как правило, страна фокусируется на каком-то одном-двух. Хотя после трёх лет поездок на курс и всех просмотренных компаний я понимаю, что в России чуть ли не самый сильный в Европе уровень дизайна цифровых продуктов, всё же именно там расположены филиалы международных мастодонтов.

Дизайн-студии в Лондоне сильнее частично в силу того, что появились раньше и успели сделать больше наработок. Хотя хватает и других причин. А классический бизнес вроде банков и телекомов находится на сопоставимом уровне.

Как по мне, одинаково плохи как «шапкозакидательство» («Да что они там понимают»), так и идолопоклонничество («Мы сирые и убогие»). Такие поездки помогают получить сбалансированное понимание профессии, а достигнутая внутренняя гармония позволяет не метаться из стороны в сторону и фокусироваться на долгосрочных планах.

#Интерфейсы