Разработка сайта и логотипа
Разработка сайта и логотипа для производителя коптилен
В этой статье рассказываем и показываем, как создавался одностраничный сайт (лендинг) и логотип для производителя крафтовых коптилен из Новосибирска.
Денис Гумеров
Руководитель проектов
Key Product Design
Key Product Design
Заказчик
«Сибирские Коптильни», Новосибирск.
Ниша
Изготовление коптилен для холодного и горячего копчения.
Изделия:
Задачи:
Заказчик обратился с потребностью создания одностраничного сайта (лендинга) и ребрендинга, для привлечения клиентов из рекламных каналов интернет. Смотрите, как удалось подойти к этой задаче, что сделали и какие результаты получили.
На момент начала работ сайт компании выглядел так:
«Сибирские Коптильни», Новосибирск.
Ниша
Изготовление коптилен для холодного и горячего копчения.
Изделия:
- Коптильни.
- Дымогенераторы.
- Комплектующие для коптилен.
Задачи:
- Создание сайта.
- Создание логотипа.
- Тестирование рекламных каналов.
Заказчик обратился с потребностью создания одностраничного сайта (лендинга) и ребрендинга, для привлечения клиентов из рекламных каналов интернет. Смотрите, как удалось подойти к этой задаче, что сделали и какие результаты получили.
На момент начала работ сайт компании выглядел так:
Сайт работал на платформе Tiu.ru, и перестал устраивать заказчика по внешнему виду и цене абонентской платы за использование платформы.
Работу разбили на 4 этапа:
Первый этап — Работа со смыслами
Этот этап включал в себя следующие виды работ:
Сбор смыслов у основателей компании — необходимый этап, который делается для того, чтобы быстро вникнуть в бизнес заказчика. В этом процессе опираемся на перечень заранее подготовленных вопросов, а во время интервью углубляемся в детали, которые будут интересовать целевую аудиторию.
Во время двухчасового интервью с заказчиком задали 120 вопросов о целевой аудитории, об изделиях, о производстве и о компании.
Поскольку бизнес заказчика уже показал жизнеспособность на протяжении полугода работы, решили не делать исследование рынка и целевой аудитории, а взять за основу ту, которая чаще покупает эти изделия. Это владельцы загородных домов, рыбаки, охотники, гурманы-дачники.
Потом сделали расшифровку аудиозаписи интервью, подсветку и группировку смыслов по общим признакам.
Получилось 11 категорий:
Чтобы дополнить банк смыслов и найти моменты, которые не учли при проведении интервью, провели анализ исходного сайта заказчика и сайтов прямых конкурентов. К прямым конкурентам отнесли только изготовителей коптилен такого же класса, с деревянным каркасом в виде домиков, предназначенные для холодного и горячего копчения.
Производителей коптилен в форме металлических ящиков, подходящих только для горячего копчения, в анализ не брали, потому что это низший ценовой сегмент. Покупатели этих коптилен нашего заказчика не интересовали.
На Российском рынке оказалось четыре прямых конкурента:
https://drevos-smoker.com/
https://koptisam.org/
https://m-gurmana.ru/
https://instagram.com/maccalexter/
Работу разбили на 4 этапа:
- Работа со смыслами.
- Создание сайта.
- Создание бренда.
- Шлифовка текстов. Сдача-приемка работ.
Первый этап — Работа со смыслами
Этот этап включал в себя следующие виды работ:
- Сбор смыслов о коптильнях и копчении.
- Интервью с заказчиком.
- Расшифровка интервью.
- Систематизация смыслов.
- Анализ продуктов заказчика и сайтов конкурентов.
- Уточнение возникших вопросов.
- Прототипирование сайта.
Сбор смыслов у основателей компании — необходимый этап, который делается для того, чтобы быстро вникнуть в бизнес заказчика. В этом процессе опираемся на перечень заранее подготовленных вопросов, а во время интервью углубляемся в детали, которые будут интересовать целевую аудиторию.
Во время двухчасового интервью с заказчиком задали 120 вопросов о целевой аудитории, об изделиях, о производстве и о компании.
Поскольку бизнес заказчика уже показал жизнеспособность на протяжении полугода работы, решили не делать исследование рынка и целевой аудитории, а взять за основу ту, которая чаще покупает эти изделия. Это владельцы загородных домов, рыбаки, охотники, гурманы-дачники.
Потом сделали расшифровку аудиозаписи интервью, подсветку и группировку смыслов по общим признакам.
Получилось 11 категорий:
- О компании.
- Изготовление коптилен.
- Возможные УТП.
- Целевая аудитория с декомпозицией на сегменты.
- Задачи потребителя.
- Технология копчения.
- Преимущества продукта.
- Изделия заказчика.
- Конструктивные элементы коптилен.
- Преимущества поставщика.
- Вопросы и ответы.
Чтобы дополнить банк смыслов и найти моменты, которые не учли при проведении интервью, провели анализ исходного сайта заказчика и сайтов прямых конкурентов. К прямым конкурентам отнесли только изготовителей коптилен такого же класса, с деревянным каркасом в виде домиков, предназначенные для холодного и горячего копчения.
Производителей коптилен в форме металлических ящиков, подходящих только для горячего копчения, в анализ не брали, потому что это низший ценовой сегмент. Покупатели этих коптилен нашего заказчика не интересовали.
На Российском рынке оказалось четыре прямых конкурента:
https://drevos-smoker.com/
https://koptisam.org/
https://m-gurmana.ru/
https://instagram.com/maccalexter/
Благодаря анализу сайтов конкурентов, наше представление о коптильнях с деревянным каркасом и дымогенераторах для коптилен дополнилось новыми смыслами и нюансами. Появились вопросы, которые не задали во время интервью и на которые не было ответов. Эти ответы получили на повторных онлайн-встречах с собственником бизнеса.
Затем систематизировали смыслы и сделали прототипа лендинга. Прототип для одностраничных сайтов делаем в Evernote или в Google.Docs. В нем описываем количество секций на лендинге, композицию элементов для каждой из них, и содержит черновые формулировки. Когда команда слаженная, «прототипирования на салфетке» для продуктов вроде лендинга хватает, чтобы понять в каком направлении двигаться.
https://docs.google.com/document/d/1eTQOruTRubtK2146SfQZa3rFAjHQqOac6ACXgoeggIQ/
Такой прототип — минимально необходимое техническое задание для дизайнеров, на которое те опираются при создании полноценного дизайна сайта.
Шлифовку текстов оставили на последний этап перед согласованием результата работы, поскольку тексты часто уточняются при создании дизайна и верстке лендинга. На этих этапах смотрим, как воспринимаются заголовки и фразы, согласуются ли с дизайном. Заголовки и тексты должны гармонично смотреться и звучать.
Работа со смыслами — это много чернового текста и много часов усердной работы по систематизации смыслов. В этой работе важно выявить, что для потребителя важно, а что нет. Надо донести необходимые смыслы и образы коротко и емко, чтобы потребитель как можно быстрее понял, куда попал, о чем идет речь и оперативно нашел ответы на волнующие вопросы.
Затем систематизировали смыслы и сделали прототипа лендинга. Прототип для одностраничных сайтов делаем в Evernote или в Google.Docs. В нем описываем количество секций на лендинге, композицию элементов для каждой из них, и содержит черновые формулировки. Когда команда слаженная, «прототипирования на салфетке» для продуктов вроде лендинга хватает, чтобы понять в каком направлении двигаться.
https://docs.google.com/document/d/1eTQOruTRubtK2146SfQZa3rFAjHQqOac6ACXgoeggIQ/
Такой прототип — минимально необходимое техническое задание для дизайнеров, на которое те опираются при создании полноценного дизайна сайта.
Шлифовку текстов оставили на последний этап перед согласованием результата работы, поскольку тексты часто уточняются при создании дизайна и верстке лендинга. На этих этапах смотрим, как воспринимаются заголовки и фразы, согласуются ли с дизайном. Заголовки и тексты должны гармонично смотреться и звучать.
Работа со смыслами — это много чернового текста и много часов усердной работы по систематизации смыслов. В этой работе важно выявить, что для потребителя важно, а что нет. Надо донести необходимые смыслы и образы коротко и емко, чтобы потребитель как можно быстрее понял, куда попал, о чем идет речь и оперативно нашел ответы на волнующие вопросы.
Второй этап — Создание сайта
После согласования прототипа сайта дизайнер подобрал референсы, которые могли бы определить стиль и направление в дизайне. Цель этого этапа — определить шрифты, настроение, стиль сайта и логотипа, и понять, как заказчик видит компанию.
Представили подборку из шрифтов, мудборд, светлый и темный цветовые решения сайта, а также подборку логотипов для определения стиля.
- Составление и согласование мудборда и референсов по шрифтам, сайту и логотипам.
- Согласование первых двух секций лендинга.
- Создание дизайна остальных секций сайта.
- Сборка сайта на конструкторе Tilda.
- Шлифовка текстов.
- Согласование результата.
После согласования прототипа сайта дизайнер подобрал референсы, которые могли бы определить стиль и направление в дизайне. Цель этого этапа — определить шрифты, настроение, стиль сайта и логотипа, и понять, как заказчик видит компанию.
Представили подборку из шрифтов, мудборд, светлый и темный цветовые решения сайта, а также подборку логотипов для определения стиля.
Чтобы определить нужный стиль, заказчик решил руководствоваться не собственными предпочтениями, а предпочтениями круга друзей и знакомых.
По результатам этой обратной связи выявили направления, в которых двинулись дальше:
Выбор направления в дизайне логотипа осложнился тем, что эти варианты разнились в стилях:
Разногласия в стилях логотипов не давали четкого ощущения направления, которому следовало отдать предпочтение, поэтому решили временно отложить эту работу. И принялись рисовать дизайн сайта.
По результатам этой обратной связи выявили направления, в которых двинулись дальше:
- По шрифтам отдали предпочтение шрифтам под номером 11 и 12.
- По цветовому решению склонялись больше к темному варианту, так как темные тона подчеркивали premium-сегмент.
- Из логотипов понравились варианты под номерами: 46, 47, 48.
Выбор направления в дизайне логотипа осложнился тем, что эти варианты разнились в стилях:
- 46 — авангардный, молодежный.
- 47 — традиционный, вестерн.
- 48 — винтажный, детализированный.
Разногласия в стилях логотипов не давали четкого ощущения направления, которому следовало отдать предпочтение, поэтому решили временно отложить эту работу. И принялись рисовать дизайн сайта.
Чтобы определить нужный стиль, заказчик решил руководствоваться не собственными предпочтениями, а предпочтениями круга друзей и знакомых.
Далее разработали два варианта дизайна сайта, светлый и темный, представили каждый из этих вариантов с четырьмя обложками, и предложили заказчику выбрать предпочтительное направление для развития дальнейших идей по цветовому настроению сайта и оформлению обложки.
Во время этой работы пришло название для коптилен — Kopper. Предложили это название и другие варианты заказчику, так как изначально длинное название «Сибирские Коптильни» нам не нравилось. С трудом понимали, как обыграть текущее название, поэтому решили временно использовать Kopper.
Во время этой работы пришло название для коптилен — Kopper. Предложили это название и другие варианты заказчику, так как изначально длинное название «Сибирские Коптильни» нам не нравилось. С трудом понимали, как обыграть текущее название, поэтому решили временно использовать Kopper.
Заказчик взял два дня на обдумывание и сбор обратной связи с окружения. Процесс затянулся на пять дней. Поэтому забеспокоились, что время идет, а решения нет. Позвонили заказчику и запросили обратную связь. На следующий день заказчик сказал, что больше склоняется к светлому варианту, без лишней графики на обложке, поскольку такой вариант «ближе к народу». В то время как темный дизайн «слишком премиум», что может излишне фильтровать целевую аудиторию. Идею поддержали, потому что сами чувствовали так.
Дизайн-победитель для дальнейшей проработки:
Дизайн-победитель для дальнейшей проработки:
В процессе интервью заказчик сообщил, что люди часто не представляют, из каких этапов состоит копчение. Поэтому выразил желание, чтобы сайт раскрывал информацию об этой технологии.
Кратко и информативно расписали технологию, из каких этапов состоит холодное и горячее копчение, и что для этого нужно. Но потом поняли, что информации на сайте стало много, а при просмотре сайта возникнет перегруз в голове. И убрали эту информацию из технического задания и с сайта, и сфокусировали потребителя только на изделиях компании.
Поскольку заказчик выбрал вариант сайта с использованием стандартных блоков Тильды, решили не рисовать полный дизайн, а сразу собирать сайт в конструкторе. Секции, которые не удавалось визуализировать с помощью стандартных блоков Тильды, пришлось прорисовывать отдельно в Figma, а потом реализовывать на Zero-блоках. В итоге Zero-блоки и стандартные блоки получились в соотношении 50:50. Все-таки топим за привлекательный дизайн и выделяющиеся работы, нежели за использование шаблонных решений. Используя только шаблонные блоки Тильды, привлекательный сайт не сделаешь. Такой сайт будет похож на сотни тысяч других безвкусно сделанных сайтов.
Вот что получилось в итоге:
Кратко и информативно расписали технологию, из каких этапов состоит холодное и горячее копчение, и что для этого нужно. Но потом поняли, что информации на сайте стало много, а при просмотре сайта возникнет перегруз в голове. И убрали эту информацию из технического задания и с сайта, и сфокусировали потребителя только на изделиях компании.
Поскольку заказчик выбрал вариант сайта с использованием стандартных блоков Тильды, решили не рисовать полный дизайн, а сразу собирать сайт в конструкторе. Секции, которые не удавалось визуализировать с помощью стандартных блоков Тильды, пришлось прорисовывать отдельно в Figma, а потом реализовывать на Zero-блоках. В итоге Zero-блоки и стандартные блоки получились в соотношении 50:50. Все-таки топим за привлекательный дизайн и выделяющиеся работы, нежели за использование шаблонных решений. Используя только шаблонные блоки Тильды, привлекательный сайт не сделаешь. Такой сайт будет похож на сотни тысяч других безвкусно сделанных сайтов.
Вот что получилось в итоге:
Впрочем, живой результат здесь: https://sibkoptilni.ru/
Результат «до» и «после» в сравнении, двигайте бегунок влево — вправо:
Результат «до» и «после» в сравнении, двигайте бегунок влево — вправо:
На этапе верстки сайта учли пожелания заказчика по формулировкам и актуализировали тексты на сайте.
Третий этап — Создание бренда
На создание бренда изделий натолкнул опыт ближайшего конкурента — Коптильни «Drevos».
Третий этап — Создание бренда
- Создание названия.
- Прорисовка логотипа.
- Согласование логотипа.
На создание бренда изделий натолкнул опыт ближайшего конкурента — Коптильни «Drevos».
Исходный логотип заказчика можно увидеть на белом фоне за коптильней.
Мы думали, что название «Сибирские Коптильни» хорошо звучит и может быть использовано в качестве названия компании, но не названия изделий. Захотелось, чтобы каждая коптильня имела короткое и звучное название в сочетании с объемом коптильни в литрах. Например, «ИМЯ-120», «ИМЯ-160» и т. д.
Поэтому поиграли в ассоциации и предложили заказчику пять вариантов названий для линейки изделий. Первое — Kopper. По остальным вдаваться в детали не будем. Возможно, эти варианты еще пригодятся. Каждый вариант обдумывали и обсуждали, но заказчик не принял ни одного. Заказчик предложил свой вариант, но этот вариант не нравился нам. Аргументировали почему. Поэтому наше совместное решение было — оставить текущее название «Сибирские Коптильни» и приступить к созданию логотипа.
При создании нового логотипа сделали три итерации. В первой из них предложили такие варианты:
Поэтому поиграли в ассоциации и предложили заказчику пять вариантов названий для линейки изделий. Первое — Kopper. По остальным вдаваться в детали не будем. Возможно, эти варианты еще пригодятся. Каждый вариант обдумывали и обсуждали, но заказчик не принял ни одного. Заказчик предложил свой вариант, но этот вариант не нравился нам. Аргументировали почему. Поэтому наше совместное решение было — оставить текущее название «Сибирские Коптильни» и приступить к созданию логотипа.
При создании нового логотипа сделали три итерации. В первой из них предложили такие варианты:
Ни один вариант заказчику не понравился. Заказчик хотел, чтобы логотип выглядел брутально, на основе той стилистики, которой заказчик отдал предпочтение изначально. Но мы сказали, что выбранные стили не подходят к уже созданному дизайну сайта, поэтому предложили на рассмотрение еще одну линейку логотипов. А также показали винтажные варианты, к которым склонялся заказчик, чтобы заказчик убедился, что это не то.
Потом предложили внимательно ознакомиться с представленными вариантами и обозначить те логотипы, или отдельные элементы в них, которые понравились больше других. Чтобы лучше понять, куда «копать».
Потом предложили внимательно ознакомиться с представленными вариантами и обозначить те логотипы, или отдельные элементы в них, которые понравились больше других. Чтобы лучше понять, куда «копать».
Заказчик остановился на двух вариантах. Слайд под номером 3 и 4 в листалке выше.
В итоге нарисовали такой логотип. Шрифт с засечками в рамке выглядит как эмблема мануфактуры, и навевает образы предприятий прошлого века. Но это только подчеркивает качество и долговечность изделий.
В итоге нарисовали такой логотип. Шрифт с засечками в рамке выглядит как эмблема мануфактуры, и навевает образы предприятий прошлого века. Но это только подчеркивает качество и долговечность изделий.
В последней итерации коллегиально убрали сокращенное название с огоньком, так как этот логотип не передавал смысл компании. Оставили полное наименование компании и продукции, как и было изначально.
Сделали варианты логотипа в нескольких цветовых вариациях. Передали результат заказчику.
Сделали варианты логотипа в нескольких цветовых вариациях. Передали результат заказчику.
На последнем этапе провели фотосессию изделий в мастерской. Для этого растянули фотофон, пригласили фотографа, обработали фотографии и актуализировали на сайте.
В результате
Работа с этим заказчиком принесла удовольствие. Не отвлекали, не задавали вопросов, не гнали по срокам. Заказчик доверил процесс, занимался собственными делами и сохранял режим молчания. Иногда молчал столько, что мы сами звонили и просили ускориться в даче обратной связи по этапам, которые требовали обязательного согласования.
По окончании работ заказчик поделился, что у него принцип: «Доверять работу профессионалам и не лезть в процесс. Если не доверяю — значит, не работаю». Мы обменялись взаимной благодарностью и решили продолжить сотрудничество, когда заказчик созреет для привлечения клиентов из рекламных каналов в интернет.
Работы выполнены за 110 часов и 55 дней.
P. S. За год работы продажи коптилен выросли в 2 раза, с 30 до 60 в месяц. Результат достигнут благодаря: новому сайту и бренду, которые вызвали доверие покупателей и конверсию в заявку выше среднего; грамотно подобранным рекламным каналам; выстроенной работе отдела продаж.
В результате
Работа с этим заказчиком принесла удовольствие. Не отвлекали, не задавали вопросов, не гнали по срокам. Заказчик доверил процесс, занимался собственными делами и сохранял режим молчания. Иногда молчал столько, что мы сами звонили и просили ускориться в даче обратной связи по этапам, которые требовали обязательного согласования.
По окончании работ заказчик поделился, что у него принцип: «Доверять работу профессионалам и не лезть в процесс. Если не доверяю — значит, не работаю». Мы обменялись взаимной благодарностью и решили продолжить сотрудничество, когда заказчик созреет для привлечения клиентов из рекламных каналов в интернет.
Работы выполнены за 110 часов и 55 дней.
P. S. За год работы продажи коптилен выросли в 2 раза, с 30 до 60 в месяц. Результат достигнут благодаря: новому сайту и бренду, которые вызвали доверие покупателей и конверсию в заявку выше среднего; грамотно подобранным рекламным каналам; выстроенной работе отдела продаж.
Если вам нужен сайт, бренд, привлечь клиентов из рекламных каналов, разработать скрипты информирования для отдела продаж, внедрить CRM или оптимизировать бизнес-процессы — обращайтесь. Если нужны люди, которые способны комплексно увидеть бизнес и понять, что требуется для достижения целей бизнеса — переходите на главную страницу и отправляйте заявку. Свяжемся сразу, как только увидим заявку во входящих.
