Как NAJES визуально упаковали клининговую компанию: сайт, полиграфия, логотип
ЗаказчикFrauBraun — недавно открывшаяся клининговая компания, которая работает в B2C и B2B сегментах в Москве и МО.ЗадачаВизуально упаковать компанию для выхода в онлайн.Провести маркетинговые исследования рынка, конкурентов и ЦА. Разработать посадочные страницы, логотип, коммерческое предложение и визитки.
Задача: вывести в онлайн недавно открывшуюся клининговую компанию. Для этого необходимо провести маркетинговые исследования рынка, конкурентов, целевой аудитории и продукта, создать посадочные страницы под B2C и B2B сегменты (для начала, далее развивать проект до корпоративного сайта), разработать логотип, дизайн коммерческого предложения и визитки.
Этапы разработки сайта:
Изучение компании и продукта посредством интервью с ключевыми лицами компании;
Анализ рынка и конкурентов;
Анализ целевой аудитории;
Подготовка прототипа по результату маркетинговых исследований;
Разработка логотипа;
Разработка дизайна лендингов;
Вёрстка сайта в тильде;
Разработка коммерческого предложения и визиток;
Результаты сотрудничества.
Срок: 35 рабочих дней.
Этап № 1 — Изучение продукта, знакомство, создание дорожной карты проекта
На этом этапе мы провели серию интервью с ключевыми лицами компании. Под каждое направление был создан индивидуальный план интервью, чтобы определить текущую ситуацию. Обсудили первостепенные задачи по маркетинговой стратегии, запросили материалы, которые имеются у заказчика (коммерческое предложение, визитки, сметы, презентацию).
В результате было проведено 3 интервью с руководством компании и ответственными лицами по каждому направлению (B2B и B2C). Определена дорожная карта по этапам разработки проекта, сформировано техническое задание.
Этап № 2 — Маркетинговые исследования для разработки лендингов
1. Анализ рынка и конкурентов
Собрав первичную информацию от заказчика, мы приступили к изучению рынка услуг, чтобы определить прямых конкурентов, которые оказывают такие же услуги и находятся в таком же ценовом сегменте.
Проанализировав рекламную и органическую выдачу в поисковиках, был собран список конкурентов в количестве 13 компаний.
По итогам изучения всех сайтов, был сформирован список критериев для их анализа:
Дискриптор на сайте; Время работы; Оффер на сайте; Наличие акций и спецпредложений; Рекламное объявление; Заголовок и описание в поиске; Целевые действия на сайте; Наличие квизов или калькуляторов на сайте; Виды уборок; Состав услуги; Дополнительные услуги, которые оказывает компания; Стоимость уборки; Срока оказания услуги; Гарантии качества; Какое оборудование используют; С какой профессиональной химией работают; Сотрудники (клинеры); Какие преимущества выделяют; Статистика компаний; Социальные доказательства и отзывы; Наличие фото/видео контента и его качество; Схемы сотрудничества; Функционал сайта; Дизайн сайта; Смысловая и текстовая проработка сайтов. Проанализировав сайты конкурентов, мы перешли к услуге »Тайный покупатель», с помощью которой мы можем:
Проверить актуальность информации на сайте; Проследить воронку продаж; Оценить работу отдела продаж; Собрать сметы, коммерческие предложения и расчёты, которые в дальнейшем тоже анализируем; Понять какие дожимы используют конкуренты, чтобы продать (лид-магниты, спецпредложения, акции). Оставили заявки на сайтах конкурентов и провели вышеперечисленную работу.
Результатом этого этапа стала объемная сводная таблица и презентация отчета с результатами исследования. Заказчик четко видит свое место на рынке, понимает, как работают его конкуренты. А мы обнаружили сильные и слабые стороны как нашего клиента, так и других участников рынка.
2. Анализ целевой аудитории
На этом этапе маркетинговых исследований мы изучаем факторы и критерии, которые влияют на принятие решений целевой аудитории о заказе услуги.
В ходе анализа целевой аудитории были определены:
Jobs to be done — работа, за которую люди готовы платить; Критерии выбора компании; Убеждения целевой аудитории; Жизненные ситуации, когда ищут услугу; Где ищут услугу; Как ищут услугу; Поисковые запросы (коммерческие, информационные, смешанные); Страхи целевой аудитории; Отзывы о конкурентах на различных площадках; Отзывы о конкурентах на их сайтах/соц.сетях; Отзывы о компании заказчика; Ожидания целевой аудитории об услуги; Ожидания целевой аудитории от компании; Факторы, которые вызывают доверие потенциальных клиентов; Распространенные вопросы от целевой аудитории об услуге; Желания будущих заказчиков; Определили ключевые сегменты целевой аудитории. Источники, из которых мы получали информацию:
Интервью с текущими клиентами и теми, кто покупал за последние полгода; Отзывы в социальных сетях и на сайтах прямых и косвенных конкурентов; Отзывы на специализированных площадках (Otzovik и т. д. тп); Отзывы в сервисах карт (2GIS, Яндекс. Карты, Google Map); Изучили профили конкурентов на агрегаторах (Яндекс. Услуги и т. д. тп.); Проанализировали форумы, на которых общается целевая аудитория и делится своими болями, страхами и ожиданиями от услуги; Провели интервью с заказчиком; Изучили материалы от заказчика; Прослушали звонки отдела продаж; Просмотрели переписки отдела продаж с лидами; Поисковые запросы. Результатом этого этапа стала сводная майнд-карта по целевой аудитории и отчет-презентация по этому этапу.
По окончании маркетинговых исследований мы подготовили подробный отчет и рекомендации по улучшению услуги, сервиса, взаимодействия с потенциальными заказчиками и обработке входящих заявок. Что-то можно внедрять сразу, что-то требует времени, но это того стоит.
Этап № 3 — Составление прототипа сайта
Так как изначально была гипотеза разделения посадочных страниц по сегментам B2B и B2C, она же подтвердилась на этапе маркетинговых исследований.
На этом этапе мы для начала составляем смысловую структуру лендинга, после этого наполняем её текстом, а по завершению этой работы все упаковываем в понятный прототип.
Прототип первого экрана страницы B2C направления
Прототип первого экрана страницы B2B направления
В ходе этого этапа работы мы:
- Составили смысловую структуру двух посадочных страниц;
- Написали текст для лендинга под каждое направление;
- Продумали различные варианты целевых действий и форм захвата контактов;
- Разработали лид-магниты;
- Проработали прототип калькулятора;
- Продумали еще по одному варианту первого экрана для каждого направления, чтобы провести в будущем A/B тестирование;
- Разработали прототип страницы «спасибо».
Разработав два прототипа посадочных страниц, мы согласовали их с заказчиком и перешли к следующему этапу.
Этап № 4 — Определение визуальной концепции бренда и разработка логотипа
Перед началом разработки логотипа мы провели интервью с заказчиком и определились с ожиданиями от визуального стиля компании. Клиент согласился на смелое предложение отойти от классического цветового паттерна в нише (синий/голубой), ассоциирующийся с цветом чистоты и дал нам простор действий.
Цветокор проекта
В ходе разработки первой концепции логотипа мы решили попробовать использовать зеленый цвет как основной, к которому в дальнейшем присоединились сочетания светло-бежевого цвета фона, и желтый на акцентные элементы.
Первая концепция, которую мы предложили
Клининг — это чистота помещения. Чистота ассоциируется с водой, поэтому мы отрисовали каплю, внутри которой располагается моющее средство.
Доработка первоначальной идеи
Попробовали разные цветовые сочетания, после обсуждения внутри команды решили соединить две эти части в единый логотип, так получился окончательный первый концепт.
Первый концепт логотипа компании
Честно говоря, данный вариант не понравился нам геометрической формой и графическими элементами внутри капли. При работе над второй концепцией это учли, А так же обсудили этот момент с заказчиком и пришли к общему мнению, что нужно упростить все же логотип, но сделать его с изюминкой.
Поэтому мы решили отказаться от визуальной части логотипа и сделали его только текстовым, но как и договорились, добавили небольшую изюминку.
Промежуточный вариант
Окончательный вариант
В ходе презентации второй концепции у заказчика не было вопросов, и в итоге остановились на этом варианте.
После окончания работы над логотипом, цветами и шрифтами мы перешли к разработке дизайна лендингов.
Этап №?5 — Разработка дизайна сайта
Этот этап в нашей студии делится на 3 подэтапа:
- Подбор референсов;
- Подготовка дизайн-концепции;
- Разработка полноценного дизайн-макета.
Подбор референсов
Перед началом работы над дизайном сайта, мы запрашиваем у заказчика его референсы, изучаем сайты прямых конкурентов и предоставляем таблицу референсов, которую составляет наш дизайнер на основе полученной ранее информации. На этом проекте получилось собрать 16 референсов, каждый мы обсудили с заказчиком, отметили те решения, которые ему нравятся и приступили к подготовке дизайн-концепции сайта.
Подготовка дизайн-концепции
Согласовав таблицу референсов, обсудив ожидания и желания заказчика, а так же учитывая результат маркетинговых исследований, мы приступили к подготовке дизайн-концепции сайта для клининга. Мы отказались от использования фотографий, так как они встречаются на каждом сайте конкурентов, будь они стоковыми или оригинальными, но в плохом качестве. Вместо фото контента мы решили использовать иллюстрации — это свежо и ярко для этой сферы, а главное, очень хорошо передает смыслы и атмосферу компании и позволяют отстроиться от конкурентов в визуальном плане. Мы приобрели иллюстрации на одном из зарубежных сервисов и адаптировали под нашу концепцию бренда. 
Сравнение иллюстраций до и после
Разработка дизайн-концепций сайта услуг клининга
На этом проекте мы готовили две дизайн-концепции, которые отличаются между собой.
В первом дизайн-концепте для фона мы использовали светло-бежевый цвет. Он хорошо сочетается с акцентными зелеными кнопками и логотипом. Дополнительно для некоторых плашек решили использовать желтый и светло-зеленый цвет, для дополнительных акцентов и визуальных переходов от блока к блоку, тематическая графика давала дополнительные акценты на смысловых блоках.
Первый дизайн-концепт лендинга Frau Braun (B2B)
Во втором дизайн-концепте мы попробовали классический вариант с привычными цветами в нише и сочетанием разной графики по стилю. Проведя маркетинговые исследования и визуальный анализ конкурентов, мы понимали, что этот вариант уступает первой дизайн-концепции. Но именно на фоне этого варианта было намного легче аргументировать выбор в сторону первой дизайн-концепции.
Второй дизайн-концепт лендинга Frau Braun (B2B)
Подготовив дизайн-концепцию, мы презентовали ее заказчику, объяснили свои решения, обсудили некоторые спорные моменты, внесли необходимые правки, в целом пришли к пониманию и все согласовали. После этого приступили к разработке дизайн-макета.
Итоговый дизайн-концепт лендинга Frau Braun
Разработка полноценного дизайн-макета сайта
Утвердив дизайн-концепт, мы продолжили подготовку полноценного макета. Большинство смысловых блоков сопровождается тематической уникальной графикой и разбавляется акцентными плашками.
Уже на этапе дизайн-макета у нас появились идеи относительно анимации на верстке, большинство из которых мы реализовали в дальнейшем. Важная деталь, что на сайте нужно было разместить живые фотографии оборудования.
В разделе оборудования, мы решили применить легкие зеленые фильтры под цвет карточек поверх живых фото, чтобы они сильно не выделялись и не выбивались из концепции и в целом сочетались со стилем.
Раздел оборудования
А в разделе дополнительных услуг мы подобрали тематические стоковые картинки. Живых фотографий хорошего качества на момент запуска сайта не было.
Дополнительные услуги страница (B2B)
Посадочная страница для B2C сегмента по стилю повторяла B2B, только графика соответствовала тематике.
Посадочная страница под сегмент (B2C)
Согласно прототипу на этой странице был заложен калькулятор. Мы приняли решение придерживаться простого интерфейса, чтобы можно было реализовать на тильде, в дальнейшем легко администрировать и не запутать пользователя.
Калькулятор на странице B2C
Завершив разработку дизайн-макета сайта, мы провели презентацию, всё согласовали и перешли к адаптивной верстке.
Этап №?5 — Адаптивная верстка сайта в тильде
По завершении отрисовки дизайна мы окончательно согласовали концепцию с заказчиком и приступили к верстке и техническим настройкам сайта в тильде.
На всей графике присутствует легкая анимация, на кнопках сделали уникальный эффект. На формах захвата мы решили сделать дополнительный акцент с помощью легкой анимации графики.
Сайт отображается на всю ширину на любых устройствах
В мобильной версии мы так же сделали легкую анимацию на графике и на кнопках, графику и картинки оптимизировали, чтобы сильно не нагружать ресурс.
Мобильная версия сайта
По итогу мы:
- Адаптировали сайт под все устройства;
- Проверили работоспособность всех кликабельных элементов и анимаций сайта;
- Собрали калькулятор для расчета стоимости;
- Протестировали отправку/получение заявок с сайта;
- Протестировали работоспособность калькулятора;
- Записали видеоинструкцию по работе с сайтом.
После сдачи сайта мы продолжили сотрудничество по разработке уникального коммерческого предложения клининговой компании в формате PDF, а так же полиграфии (визитки, баннеры).
Этап №?6 — Разработка коммерческого предложения и визиток
Разработку коммерческого предложения на услуги клининга мы начали с прототипирования. Маркетинговые исследования, проведенные на первом этапе сотрудничества, очень помогли. Дополнительно пообщавшись с заказчиком, мы составили структуру и написали текст.
Прототип первого экрана КП
Согласовав детали, приступили к отрисовке дизайна. Стилистика уже есть, но поскольку коммерческое предложение это инструмент для следующего этапа воронки продаж, мы решили поэкспериментировать и попробовать разделить акценты внутри слайда, но сохранив фирменные цвета, подачу и графику. Заказчику очень понравилась эта идея и он принял концепт без правок.
Для цветовых фонов мы добавили прозрачный паттерн. Запрос был только на электронную версию, но на всякий случай мы сверстали и под печать:
Разработанное КП для Frau Braun
После разработки КП мы приступили к разработке визиток. Техническое задание было на двухсторонние визитки, и мы решили сделать несколько вариантов под B2B И B2C сегмент.
В процессе предоставили на выбор несколько вариантов, после небольших корректировок заказчик утвердил наиболее понравившееся варианты.
Результаты сотрудничества
- За 35 дней разработали сайт клининговой компании;
- Заказчик получил полный отчёт по маркетинговым исследованиям и рекомендации по дальнейшему продвижению и улучшению сервиса и услуги;
- Дополнительно к сайту подготовили для заказчика дизайн коммерческого предложения и визиток;
- Продолжаем развитие проекта и разрабатываем внутренние страницы, чтобы в конечном итоге превратить его в многостраничный сайт;
- Заказчик остался доволен работой и оставил нам видеоотзыв.
Впереди предстоит работа по рекламным баннерам и дополнительно полиграфической продукции, а так же по внутренним страницам сайта, в перспективе он должен превратиться в многостраничный ресурс.
Если вам нужно создать сайт, свяжитесь с нами, и мы подберем для вас подходящее решение.
Бутиковая дизайн-студия NAJES всегда работает на результат.
Мы завели телеграм-канал в котором публикуем кейсы, полезные статьи про маркетинг, аналитику, бизнес и разработку сайтов.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
