Как мы сократили этап пресейла с 3 дней до 1 часа с помощью референсов

Раньше, чтобы объяснить клиенту, как будет выглядеть проект, мы делали подачу — брали кусочек информации и собирали прототип. Это было частью пресейла и занимало от 3 дней до ∞. Мы тратили много ресурсов, но не всегда попадали в ожидания клиента. Сейчас же мы используем референсы: около часа тратим на их подбор и намного чаще попадаем в цель.

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

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

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

Чтобы подбор референсов занимал у нас минимум времени, но при этом помогал точнее попадать в ожидания клиентов, мы делаем четыре вещи:

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

Зачем нужны референсы

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

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

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

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

Но не говорят:

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

И это отлично. Клиент не обязан объяснять исполнителю, как должен выглядеть проект, он обязан лишь рассказать о задаче. И уже исполнитель подбирает решение под конкретную задачу.

Ждать, что клиент придет с готовым референсом под его задачи, — это немного наивно и даже несправедливо с точки зрения партнерских отношений. Ведь агентство постоянно в этом варится, изучает, смотрит. Например, когда дизайнер видит чью-то работу, то прикидывает: «Ага, тут классная анимация графика, можно запомнить, а тут — классный переход». И уже на автомате отличает хорошие работы от посредственных. Я не представляю, сколько клиенту нужно времени, чтобы дойти до такого уровня, поэтому референсы — это работа исполнителя.

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

Шаг 0. Системно ведем базу референсов

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

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

В Пинфографике хранятся все наши референсы, и здесь есть удобный поиск по тегам:

Каждому референсу в базе присваиваются теги: формат, например статика или интерактив, отрасль (медицина, финансы или производство), назначение (проинформировать, сработать на имидж или показать, как что-то работает)

С помощью тегов мы делим референсы по категориям:

  • отрасль — к какой отрасли относится проект. Клиенты из медицинской отрасли лучше воспринимают медицинские референсы, а не примеры из сферы добычи урана;
  • тематика или назначение — о чём проект. Тут всего пять вариантов: имидж, инструкция, как это работает, подача, информирование, но этого вполне хватает;
  • визуализация — какая механика используется, например графики, изометрия, таймлайн, 3D;
  • и так далее.

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

Но прежде чем искать референсы, нужно разобраться в задаче.

Шаг 1. Разбираемся в задаче и материале

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

Авито пришли к нам с запросом на дайджест с десятью новостями. На созвоне мы выяснили, что:

  • нужно, чтобы сотрудникам было интересно изучать дайджест;
  • часть новостей — о технологиях, а читать их будут сотрудники из других, нетехнических отделов. И важно, чтобы им тоже было понятно и интересно.

Мы стали думать: а что нужно сделать, чтобы сотрудники прочитали все новости? Каким должен быть дайджест, чтобы им было удобно и интересно? Додумались до нескольких принципов:

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

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

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

Теперь можно подбирать референсы.

Шаг 2. Подбираем референсы из базы под каждый элемент проекта

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

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

А вот что получилось:

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

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

У меня щелкнуло в голове: я вспомнил проект о посадке китайского марсохода на Марс — там тоже была ракета. Нашел его в базе референсов:

И вот что получилось:

Текст «рыбный»

Тут дело не только в моих ассоциациях. Есть еще два аргумента за.

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

Такой же подбор референсов сделали и для остальных страниц:

Текст «рыбный»

Где-то мы брали способ визуализации, где-то — механику для интерактива. Например, для страницы о мошенниках взяли механику из проекта о радиоактивном излучении. Референс:

Результат:

Текст «рыбный»

Затем остается лишь презентовать референсы клиенту и утвердить идеи.

Посмотреть целиком, что получилось, можно в нашем кейсе:

Как мы сделали дайджест новостей для Авито

Шаг 3. Презентуем референсы клиенту

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

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

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

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

И если коротко

Если коротко, то уложимся в пять пунктов:

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

Читайте другие наши статьи:

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

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

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

0
34 комментария
Написать комментарий...
Fedor Anisimov

Ждемс комменты про то, что такую же базу можно собрать на Ноушне 🐡

Ответить
Развернуть ветку
Виталий Асташкин

Или на Eagle

Ответить
Развернуть ветку
Эдуард

Я в трепло такую веду, у меня почему то вообще всё к трепло сводится, как то там удобно всё. Иногда ещё и mindmap какой нибудь

Ответить
Развернуть ветку
Хаттори Ханзо

По моему крутой опыт и интересное решение! +++

Ответить
Развернуть ветку
Сергей Свинарь
Автор

Спасибо!

Ответить
Развернуть ветку
Илья Еремин

Не знаю, как у вас, а у меня жиза ↓↓↓

П.С. Статья топ, спасибо!

Ответить
Развернуть ветку
Ленин-гриб

Николай, отличная статья! Особенно потому, что затрагивает очень актуальные аспекты работы с заказчиками.

Спасибо.

Ответить
Развернуть ветку
Сергей Свинарь
Автор

Спасибо

Ответить
Развернуть ветку
Артём Артёмов

Статья о референсах, а самым главным не поделились 😕

Ответить
Развернуть ветку
Сергей Свинарь
Автор

Всю базу не сможем показать. Но можете написать, какую задачу хотите решить, а мы подберем для вас 1–2 референса и пришлем на них ссылки

Ответить
Развернуть ветку
Peter Bondarenko

Мы в своё время в креативном агентстве тоже собирали вручную базу референсов по рекламным роликам, но потом я сделал нейросетевой движок и получился https://refsee.com с удобным поиском по по содержанию.

Ответить
Развернуть ветку
Андрей Бузько

Петр, спасибо вам за этот проект, оч часто выручал меня!

Ответить
Развернуть ветку
Peter Bondarenko

О! Очень приятно слышать!

Ответить
Развернуть ветку
Сергей Свинарь
Автор

крутой проект!

Ответить
Развернуть ветку
Валерий Гербелев

Также не раскрыта тема как из этого всего вы делаете сторилендинг?

Ответить
Развернуть ветку
Fedor Anisimov

Про это напишем отдельную статью. Тут больше про этап проработки задачи клиента.

Ответить
Развернуть ветку
Otoko Densha

Несколько дней собирать прототип и потом не попасть в ожидания клиента (и в итоге упустить контракт) - это прямо чертовски знакомо 😂 вам надо эту систему монетизировать по принципу Saas

Ответить
Развернуть ветку
Сергеев Олег

я так понимаю, попасть в ожидания клиента - это магия) 

Ответить
Развернуть ветку
Эржигит Эрнисов

Приложение для увеличения вовлеченности студентов/учеников во время уроков. Поделитесь пожалуйста референсами, буду крайне благодарен!
[email protected]

Ответить
Развернуть ветку
Сергей Свинарь
Автор

Пример интерактивной подачи подачи материала про искажение мышления: https://bias.slaylines.io

Интерактивный тренажер по теории вероятности с заданиями
https://seeing-theory.brown.edu/compound-probability/index.html

А лучше напишите мне на почту [email protected]. Мы сейчас в процессе разработки интерактивного учебника для школьников, можем обменяться опытом.

Ответить
Развернуть ветку
Александр Жеребцов

Ищу референсы для сайта небольшого спортивного клуба, который предлагает групповые и  тренировки по лыжам, бегу, плаванию. Организует спортивные туры — 1-2 недельные выезды на тренировки. Помогает с участием в спортивных соревнованиях. 3 тренера, количество постоянных клиентов 50-100 человек. 

Ответить
Развернуть ветку
Сергей Свинарь
Автор

https://www.nytimes.com/interactive/2021/sports/olympics/adam-ondra-climbing.html — отличная демонстрация специфики конкретного вида спорта. Яркие видео-вставки хорошо привлекают внимание.

https://eiger-extreme.mammut.com/en — можно взять как пример, если у вас есть возможность «завернуть» ваш спортивный тур в историю. Можно продемонстрировать ее через главного героя, который проходит через все этапы такого тура.

Первые два примера подойдут для привлечения новой аудитории. Если задача сконвертировать в покупку текущих клиентов, то подойдут более практичные «приключения» Силы Ветра https://silavetra.com/travel

На спортивную тему нам еще этот реф нравится, но он мало применим в текущих задачах: https://graphics.reuters.com/OLYMPICS-2020/HISTORY/oakpedqbgvr/index.html

Ответить
Развернуть ветку
Александр Жеребцов

Спасибо, пошел изучать!

Ответить
Развернуть ветку
Vasek Romanov

Крутая статья. Хочу найти место куда удобно складывать рефы. Фигма не подходит ибо она жутко требовательная к ресурсам когда картинок , не говоря уже про отсутствие встроенной сортировки / группировки. ссылки в гугл доках тоже такое себе.

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

Спасибо. Обнял.

Ответить
Развернуть ветку
Марк Кузьмин

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

Ответить
Развернуть ветку
Сергей Свинарь
Автор

Спасибо за коммент. Сложновато конечно без анимации, 3d и прочего. Вот самое простое, что смогли найти 😅

Проект про ДНК основанный на простом скролле с хорошим повествованием и с минимумом графики
https://howdnaworks.ru/

Спецпроект про робота-хирурга от РИА. Тут почти вся графика плоская, но иллюстраций много, без них никуда https://ria.ru/20180925/1529322692.html?

Ответить
Развернуть ветку
Андрей Солозобов

Отличная статья! Формирование предложения - это особая боль, так как можно потратить несколько дней на изучение и подготовку, но в итоге не договориться с клиентом.

Ответить
Развернуть ветку
Андрей Солозобов

Отличная статья! Формирование предложения - это особая боль, так как можно потратить несколько дней на изучение и подготовку, но в итоге не договориться с клиентом.

Ответить
Развернуть ветку
Руслан Ніколаєнко

Неплохо, спасибо за информацию.

Ответить
Развернуть ветку
Товарищ

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

Ответить
Развернуть ветку
Сергей Свинарь
Автор

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

Ответить
Развернуть ветку
Илья Назаров

Отлично придумано. Но главное что интересно преподносится клиенту )

Ответить
Развернуть ветку
Zoringer

Классный подход. Эффективно, прагматично, а главное - копится база, в которой есть из чего выбрать)

Ответить
Развернуть ветку
Roman Solonovich

полезно. спасибо)

Ответить
Развернуть ветку
31 комментарий
Раскрывать всегда