Как мы делали лендинг для «Пират-Мармелад» – требовалось красиво и «вчера»

Разработали в четыре раза быстрее, чем ожидал клиент.

Вы все знаете «Пират-Мармелад» – это бочки с мармеладками в магазинах: не повернуть голову, проходя мимо, невозможно. Точки продаж у компании – по всей стране. К моменту обращения к нам сеть открыла две точки по франшизе и планировала развиваться в этом направлении, но… у проекта не было собственного сайта! Вдобавок к этому конкуренты подсуетились: “срисовали” фирменный стиль «Пирата-мармелада» и подготовили «свое» предложение для предпринимателей.

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

Результаты

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

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

Задача

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

Проблема

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

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

Франшиза «Пирата-Мармелада» некоторое время существовала вообще без собственного сайта. Вместо него была скромная страничка на основном сайте бренда. Тут ни условий сотрудничества, ни выгод, ни презентации сети.

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

Ход работы

Изначально на работу над проектом мы выделили четыре месяца – это стандартный срок для разработки лендинга с нуля. Управились намного быстрее – всего за месяц. Мы не экономили время намеренно и не ставили проект в приоритет относительно других. Управиться так быстро помогли несколько факторов:

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

Брифинг

Работу, как обычно, начали с подготовки технического задания и брифинга.

На интервью с заказчиком обсудили задачи и цели сайта, особенности аудитории, конкурентов и в целом ситуацию на рынке сладостей.

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

После брифинга получили от клиента материалы, которые можно было использовать на сайте:

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

Разработка прототипа

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

Сформировали структуру сайта:

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

Такая структура поочередно закрывает вопросы клиента на каждом этапе пути. Сначала – знакомство с продуктом. Потом – отработка основных возражений: окупятся ли вложения и как быстро, будет ли точка востребована, какие перспективы есть у меня в этом бизнесе. Когда тревога клиента затихает, ближе знакомим его с франшизой и продукцией «Пирата-Мармелада». Затем подсвечиваем дополнительные триггеры, которые помогают принять решение о покупке.

Создаем прототип:

Заранее продумали структуру сайта и путь пользователя

Контент

Когда готов “скелет” сайта, приступаем к “мясу” – пишем тексты и выбираем иллюстрации.

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

Обычно конкуренты создают довольно строгие бизнес-сайты с минималистичным дизайном и простыми текстами. Мы выбрали другой путь, чтобы выделиться, и подготовили игривые дружелюбные тексты. Например, на кнопке вместо «Стать франчайзи» мы написали «Поднять паруса!» и «Захватить корабль!»

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

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

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

Дизайн

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

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

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

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

Первая фотография в карусели – финальная версия первого экрана.

Цифры тоже решили подавать игриво: от достаточно строгой диаграммы перешли к мармеладной версии.

Первая фотография – финальная версия диаграммы на сайте.

Технический этап

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

Сайт опубликовали и без промедлений передали клиенту. «Пират-Мармелад» доволен – получили красивый и эффективный лендинг в четыре раза быстрее, чем ожидали!