Prototypes open all doors: как прототипы помогают продавать

Арт-директор компании-разработчика мобильных приложений MobileUp Филипп Фильченко — о том, как работать с прототипами на пресейле и в тендере, как доносить свои идеи заказчику, организовать и презентовать прототип.

Prototypes open all doors: как прототипы помогают продавать

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

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

Как арт-дир работает с продажником

Мозги менеджера по продажам и арт-директора работают по-разному, поэтому в связке генерируют потрясающие вещи.

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

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

Понятно, где кто
Понятно, где кто

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

Как устроен пресейл

Prototypes open all doors: как прототипы помогают продавать

Сижу я в офисе, вбегает наш продажник Витя с горящими глазами: «Фил, а давай покажем, какие мы крутые?». И у меня в голове сразу звоночек: что-то придётся рисовать бесплатно, а времени, как обычно, нет. Окей, обсуждаем.

Фил, а давай покажем, какие мы крутые?!

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

1. Исследование

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

  • есть проект на дизайн;

  • думает над позиционированием;

  • доверяет (пришёл по рекомендации).

Однажды мы делали мессенджер. Да, и такое бывало. Это был не простой мессенджер, а с групповыми видеовызовами. Мы сделали исследование и предложили на пресейле. Обзор почти не отличался от того, что мы делаем всегда, но был чуть шире.

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

Пример оформления исследования. Чаще всего это подобная карта. Если нужно совсем красиво, то собираем презентацию и удобно прикрепляем её к КП
Пример оформления исследования. Чаще всего это подобная карта. Если нужно совсем красиво, то собираем презентацию и удобно прикрепляем её к КП

2. Дизайн-концепт

Бывает, что клиент разбирается в дизайне, у него в голове есть какой-то образ, и он ищет команду, которая сможет воплотить это в реальность. Но порой клиент далёк от ИТ, дизайна и разработки.

Почему стоит предложить ему дизайн-концепт вместо прототипа? Он может не увидеть ценности в прототипе. Увидит чёрно-белую картинку и подумает: «Да я сам так могу». Для него функциональность может быть не в приоритете. Поэтому лучше показать дизайн-концепт и продемонстрировать эмоцию, которую он ждёт.

Prototypes open all doors: как прототипы помогают продавать

3. Прототип

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

Полгода назад к нам пришла клиника «Скандинавия». У них была типичная ситуация: огромный сайт нужно сделать в виде приложения. Зовёт меня наш продажник Саша и говорит: «Фил, давай предложим что-нибудь альтернативное, какую-нибудь мобильную историю. Давай таймлайн сделаем». В ответ я закатил глаза, мы проспорили час и всё же решили сделать. Ни в одном приложении клиники такого не было, но всё хорошо укладывалось.

Прототип, который мы придумали и нарисовали за вечер
Прототип, который мы придумали и нарисовали за вечер

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

Вывод по пресейлу

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

Как готовиться к тендеру

Prototypes open all doors: как прототипы помогают продавать

Я говорю не о государственных тендерах с документами на участие и чётко прописанной процедурой, а только о коммерческих, где всё более гибко. Для нас тендеры и пресейл — похожи, но есть несколько отличий. Я выделил три ключевых: объём, регламент и опыт.

1. Объём

Если пресейл — до 20 часов, то тендеры — другая история. Даже если это звучит как приложение в два-три экрана, чаще всего за этим кроется что-то более грандиозное. Здесь можно потратить 30-40 часов и даже больше в зависимости от проекта.

Наш первый тендер мы проиграли. Было пять-шесть команд. Нужно было сделать несколько ключевых экранов приложения для «Туту.ру Авиа». Для нас это был новый опыт. Мы попробовали, и у нас получилось неплохо для первого раза.

Спустя год «Туту.ру» объявили новый тендер на дизайн приложения ЖД, снова позвали нас, и мы победили. Как это происходило? Нужно было сделать несколько ключевых экранов. В этот раз мы бросили все силы. Суммарно потратили около 40 часов, может даже больше.

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

В финальной подаче мы оставили всего один вариант
В финальной подаче мы оставили всего один вариант

2. Регламент

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

Важный момент: минимум взаимодействия с клиентом. Бывает, что вы вообще не общаетесь, но есть условия и ТЗ. Возможно, есть третье лицо, которое не имеет никакого отношения к проекту. И бывает, что у вас есть одна-две стыковочные встречи, где нужно всё узнать по-максимуму.

Мы участвовали в оплачиваемом тендере «Совкомбанка». Созвонились с клиентом, каждый высказался, все покивали головой. Скайп-колл закончился, и мы с продажником переглянулись. Единственное, что мы тогда поняли, это то, что нужен дизайн-концепт, а дизайнер должен быть, внимание — «артист»! Артисты из нас так себе, но в тендере мы победили и теперь знаем, что всегда нужно заранее готовить вопросы.

3. Опыт

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

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

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

Помимо привычной карты экранов, собираем анимашки в Principle или AE

Вывод по тендерам

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

Куда идти за информацией

Prototypes open all doors: как прототипы помогают продавать

Офлайн

У нас был проект «Велогород» — приложение для велопроката. Стояла задача сделать приложение главным инструментом для аренды велосипеда. Это было что-то новое, и для этого нужно было выйти в офлайн. Буквально выйти на улицу, посмотреть на велосипеды, попробовать взять в аренду, покататься с телефоном в руке.

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

Группы в соцсетях

Мы всегда смотрели лучшие практики, отзывы в App Store и Google Play разных известных приложений. Но я никогда бы не подумал, что надо идти во «ВКонтакте» и искать специальные группы, чтобы лучше понять клиентов.

На примере Велогорода мы увидели, что у сервиса есть большое петербургское сообщество. И, чёрт возьми, там было много интересного. Не могу сказать, что теперь всегда сижу во «ВКонтакте» и смотрю группы каждого нового проекта, но иногда это помогает.

Дизайн-конкурсы

Я не участвовал в дизайн-конкурсах с университета. Но когда мы работали над мессенджером и делали исследование, нам нужна была информация. Есть примеры Telegram, WhatsApp, Facebook Massenger, но нам нужно было что-то другое.

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

Периодически такие компании, как «ВКонтакте», Telegram, Qiwi, устраивают подобные конкурсы. И там можно найти просто кладезь знаний. Необязательно участвовать, можно просто посмотреть результат.

Ваш личный опыт

Prototypes open all doors: как прототипы помогают продавать

Реальный опыт — важнейшая вещь. С этим согласится любой вменяемый дизайнер. Хотя со мной работают только классные дизайнеры, некоторые из них до сих пор не пользовались Uber!

Когда к нам пришёл «Совкомбанк», я узнал разницу между простым изучением скриншотов и тем чувством, которое ты испытываешь, когда сам переводишь кому-то деньги, и их списывают с твоего счёта. У меня стоит четыре приложения банков: «Альфа-Банк», «Тинькофф», «Сбербанк» «Рокетбанк», причём на iOS и Android-девайсах.

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

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

Как презентовать

Делаем карту экранов

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

Prototypes open all doors: как прототипы помогают продавать

Карту экранов мы используем всегда, но есть большие проекты. Например, «Туту.ру ЖД».

Prototypes open all doors: как прототипы помогают продавать

Это половина карты одного из разделов, а их было восемь. И это просто застрелиться. Непонятно, как все эти экраны размещать, как их нумеровать, подписывать. Пока у меня нет панацеи. Структура получается сложная, но я всё равно придерживаюсь таких карт. Они работают.

Доносим идеи

Мы общаемся с клиентом через прототип. Это тот самый случай, когда нарисовать быстрее, чем проговаривать. Когда мы это понимаем, говорим клиенту: «Стоп, мы вернёмся через два часа. У нас будут варианты».

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

Мы начали с этого. Потом поняли, что это ненаглядно и прикинули несколько вариантов решений. Мы воспользовались опытом приложений такси, и у нас получился совсем другой опыт, показали клиенту и он сказал: «Круто! Давайте делать». Сначала мы пытались описать эту идею на словах, но потом просто сказали: «Стоп. Мы нарисуем». И я так делаю часто.

Так мы отказались от закрашивания зон и выбрали концепцию с фиксированным пином, как в такси
Так мы отказались от закрашивания зон и выбрали концепцию с фиксированным пином, как в такси

Когда вы делаете карту экранов, рисуете прототипы, в процессе появляются интересные мысли. Если у меня есть какое-то предложение, я добавляю несколько экранов справа в том же чёрно-белом виде и показываю свою мысль: «А может быть сделаем не так, а всё-таки так?».

Делаем всё в чёрно-белых цветах

Может, кнопку в зелёный? У нас есть забавная история. Работаем со «Cбербанком». Когда я был в отпуске, дизайнеры сделали прототип из 14 экранов и отдали. Клиент отправил его в другой отдел, и нам пришёл ужасный фидбек: «Дизайн — не вау. Всё плохо, беда». Выяснилось, что наши ребята просто раскрасили прототип, добавили немного зелёного, а клиент решил, что это дизайн.

Prototypes open all doors: как прототипы помогают продавать

Общие выводы и результаты

За последние два года моего активного участия в продажах пять проектов из пятнадцати конвертировались в продажи. Несколько отвалились ещё в процессе обсуждения, так как были нам неинтересны, что-то ещё продаётся.

Prototypes open all doors: как прототипы помогают продавать

Но в тех проектах, что мы взяли, дизайнер сыграл ключевую роль. В числах это выглядит примерно так: потратив 320 часов на пресейл, мы взяли проектов на 11 тысяч оплаченных часов, а это примерно 20 млн рублей.

Prototypes open all doors: как прототипы помогают продавать

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

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

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

4040
12 комментариев

👍 А можно попросить выложить пак дизайн-карт в большом разрешении? Интересно, что написано мелким шрифтом...

9
Ответить

Да, конечно! Сорри, что так долго! Вот тут большая часть представленных дизайн-карт в хай резе:
https://drive.google.com/drive/folders/1ztOvRqYjfTArbRH9Km7EHkD7eIUuxhyU?usp=sharing

1
Ответить

Спасибо за полезную статью .+
На сайте написано,что у вас 30+ сотрудников ,просто интересно сколько из них UX-дизайнеры ?

2
Ответить

Все так! Нас чуть больше 30, в дизайн-отделе всего 3 человека. Я в роли артдира + 2 UX/UI дизайнера, но планируем расширяться)

1
Ответить

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

1
Ответить

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

1
Ответить

А можно по всей статье «продажника» заменить на «продована»?

Ответить