Найти тему
Александр Торцев

Как создать Прототипа сайта. Пошаговая инструкция.

Оглавление

Расскажу про шаги создания прототипа.

Литературы и материалов на эту тему мало. Большую часть знаний получаю опытным путём.

Что я имею в виду, когда говорю "Прототип Сайта".

ПРОТОТИП - полностью сформированная структура сайта. Все блоки логически продуманы. Все тексты написаны копирайтером. Продуман путь клиента на сайте. На какие кнопки кликнет и куда после этого попадёт.
Скриншот прототипа сайта в программе Figma
Скриншот прототипа сайта в программе Figma
В дальнейшем прототип отдаётся дизайнеру. Дизайнер не должен думать над текстами. Его задача красиво упаковать сайт.

Скриншот специально показываю мелко.

Во первых. Для меня это текущий проект. Показать тексты пока не могу.

Во вторых. Я хочу рассказать про сам процесс, а не о работе копирайтера. Хотя тексты неотъемлемая часть прототипа, они очень важны.

Начнём

Бриф

Аудио запись Брифа переведена в текст.
Аудио запись Брифа переведена в текст.

Провести с Заказчиком Интервью.

Выделить на это 2-4 часа.

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

Обязательно сохранить аудио запись Интервью.

Запись перевести в текст. Проще всего отдать её на расшифровку фрилансерам.

Как провести Интервью?

Это огромная тема для беседы. Я планирую подробно разобрать её в одной из следующих статей.

Кратко про интервью:

Если совсем не умеете. Найдите в интернете шаблоны вопросов для Интервью. Более-менее приличные вопросы "117 вопросов"

Вбейте в гугл. Сразу вылезут на них ссылки.

Они далеко не идеальные. Но для старта самое то.

ГЛАВНОЕ!

Задавать абсолютно все вопросы. Даже если не видите в них смысла.

И задавать как можно больше уточняющих вопросов.

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

Виды Интервью.

На практике столкнулся с 3-мя видами.

1. Интервью с предпринимателями, которые больше перекупщики вещей. Суть в том, что они не знают, кто является их прямой Целевой Аудиторией. Не знают особенностей продукта, потому что не сами его производят. Интервью в этом случае короткое. У них бесполезно выяснять о ЦА и технических особенностях.

Эта задача ложится на ваши плечи. Поиск ЦА и их потребностей происходит в интернете на форумах и подобных площадках. Может занять пару дней.

Прототип и сайт нужно сделать максимально быстро. Чтобы протестировать нишу. Быстро запустить трафик. А-Б тесты сайта. Корректировки. Поиск лучших рекламных связок.

2. Интервью с производителями и фрилансерами. Моё любимое =) Средний и малый бизнес. Заказчики сами производят продукт и знают о нём всё. У них есть клиенты и они могут подробно рассказать о них.

Интервью может занимать 5 часов.

Интервью для Фрилансеров, чтобы упаковать их экспертность и Производителей.
Интервью для Фрилансеров, чтобы упаковать их экспертность и Производителей.

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

Портрет ЦА

Очень маленький портрет ЦА.
Очень маленький портрет ЦА.

В данном проектe портрет ЦА минимален. На сайт приходит горячий трафик, которому нужно выбрать фирму и сразу заказать продукт.

Достаточно изучить основные Боли и Потребности ЦА.

Пример:

Определяем категорию ЦА. В пример две крупные категории:

• Малый бизнес, который не может позволить больших денежных трат. Для них важна цена. Чем ниже - тем лучше.

• Малый бизнес у которого склады забиты товаром. Им нужно быстро найти клиентов. Им важны навыки рекламщика. Чем опытнее - тем лучше. Они готовы заплатить много.

Если ты рекламный мастер (контекстолог, таргетолог, сммщик, сео специалист итд). Только тебе выбирать, с кем ты будешь работать.

Рекламируешь свою Экспертность - будешь брать крупные заказы.

Акцентируешь на низкой цене - к тебе и будут обращаться за низкой ценой.

Если ты эксперт в своём деле - выбери себе сам категорию ЦА, которая тебя устраивает.

Дальше выявляем Потребности, Боли и Хотелки ЦА.

Какие вопросы клиенты задают чаще всего? Какие темы поднимаются на форумах? Что спрашивают по телефону? Что они хотят получить?

Выделяю Три типа вопросов:

1. Потребности ЦА. Почему он ищут твою услугу?

2. Боли. Зашёл на сайт, что хочет увидеть, узнать? До обращения какие страхи? Цена, качество итд. Во время обращения: уложимся ли по срокам, а цена не изменится итд.

3. Какие выгоды хочет видеть? Требует что? По каким критериям он будет сравнивать тебя с конкурентами? Что он был бы удивлён увидеть? Хотел бы получить, но это не особо важно?

Ответы на эти вопросы очень индивидуальны. Зависят от ниши и ЦА.

Ответы находим через Интервью с заказчикам. Шерстим форумы, сообщества, комментарии. Общаемся с потенциальными клиентами.

Отвечаем на возражения ЦА

Интервью провели, перевели в текст. Выделили на нём стикерами важные моменты о продукте / услуге.

Начинаем закрывать Боли и Возражения ЦА.

Я помещаю стикера с ответами прямо на вопросы. Зелёные - точные ответы. Красные - которые нужно будет скорректировать или переспросить у заказчика.

И откладываем эту работу на время в сторону.

Дальше

Какой путь хочет пройти клиент на сайте?

Что важно клиенту в первую очередь?

Примерно, очень грубо и быстро накидываем смысловые блоки сайта.
Примерно, очень грубо и быстро накидываем смысловые блоки сайта.

Изучив Бриф и ЦА, начинаем примерно понимать, что их больше всего интересует в продукте. Какую информацию они хотят получить в первую очередь, а какую позже.

Но на этом этапе - чем больше накидаем вариантов блоков и экранов - тем лучше.

Будет из чего выбирать, корректировать. Многое удалиться в процессе работы. Многие блоки объединяться. Будут меняться местами и переноситься.

Смотрим сайты конкурентов.

Не увлекайтесь сайтами конкурентов. Не копируйте их. Большинство сайтов сделаны стоя в метро.

Потребности ЦА в первую очередь. Ориентируемся на ЦА, а не на конкурентов. Не факт, что у них хорошие сайты, даже если они в первых строчках рекламы.

Но интересные идеи конкурентов всё же тащим себе.

А дальше хаос. Все стикеры перетаскиваем на шаблон прототипа.

Переносим информацию из Брифа и Портрета ЦА на прототип

Перетаскиваем стикеры на шаблон прототипа.
Перетаскиваем стикеры на шаблон прототипа.

Переносим стикеры на прототип.

Выше говорили о том, что ЦА хочет видеть в первую очередь на сайте, что во вторую. Чем важнее вопрос, тем раньше должно ЦА получить на него ответ.

Перетащили. Распределили.

Дальше несколько дней самой тяжёлой работы.

Тексты

Текстам нужно учиться.

Хорошие копирайтеры на вес золота. И это действительно так.

Выше мы раскидали стикеры по блокам. И теперь знаем: что, где и в какой последовательности писать.

В общем сначала заполняем блоки смысловой нагрузкой.

Не пишем финальный текст! Только смыслы!

Пример:

В блоке хотим рассказать о качественном оборудовании. Оно куплено в Германии. За ним работают обученные токаря. Все со стажем не менее 5 лет. У всех есть корочки о прохождении обучения работы на этом станке. Качество деталей контролирует механическое оборудование, лазеры итд.

И только после написания смыслов на весь сайт, начинаем его шлифовать.

Даже спустя несколько лет написания различных текстов - они даются мне с трудом.

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

Превратить Преимущество товара в Пользу для клиента.

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

Составляю три колонки на каждое Преимущество.

1. Эмоциональное преимущество: Мы лучшая фирма! Самый качественный товар! Сделаем быстрее всех!

2. Во второй колонке пишем: За счёт чего появилось это преимущество? У нас немецкое оборудование. У меня 10 лет стажа копирайтера. итд

3. Какую пользу получит клиент от этого ? Детали с нашего завода прослужат 50 лет, вам не нужно тратиться на замену и ремонт. Мои тексты бьют точно в сердце вашей ЦА. Я не буду на Вас экспериментировать. Рабочие схемы давно найдены, работают и приносят деньги.

И так начинаем наполнять сайт осмысленным текстом.

В процессе работы появляются вопросы, на которые нужно узнать ответы у заказчика.

Фиолетовые стикеры - вопросы, на которые нужно найти ответы у заказчика.
Фиолетовые стикеры - вопросы, на которые нужно найти ответы у заказчика.

Забыл написать выше.

Каждый этап желательно давать на проверку своим коллегам.

Это займёт у них минут 5-10. Но свежий взгляд укажет на недочёты.

А на этом этапе собираем вопросы в список. И идём с ним к заказчику. Получаем ответы. Вносим изменения в Прототип.

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

Показываем заказчику готовый прототип

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

На это тоже закладывается время в начале проекта.

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

Вносим финальные корректировки. Согласовываем. И отдаём в работу Дизайнеру.

На этом создание прототипа окончено

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

Обложка статьи
Обложка статьи