Как отстроиться от конкурентов в скучной нише — о создании многостраничного сайта для клининга

Однажды ко мне пришли основатели «Sova Clean» из Москвы. Задача — разработать сайт для формирования креативного онлайн-имиджа и закрытия на следующий шаг в воронке продаж 2 сегментов ЦА (B2C и B2B).

Что из этого получилось — читайте ниже 👇

У заказчика есть достаточно раскрученный аккаунт в Нельзяграмме, и он планировал вести этот трафик на сайт + привлекать лидов за счет рекламы в «Яндекс Директе».

Для отслеживания расписания по проекту создала подробную Диаграмму Ганта с датами начала и завершения этапов, чтобы клиент всегда знал, какие работы ведутся в каждый момент времени.

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

Так как за 5 лет работы компании накопилось много отзывов, мне было достаточно легко провести анализ ЦА: из них вынесла наиболее значимые смыслы, боли, потребности, критерии для принятия решения, которые легли в основу тезисов на сайте.

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

В проекте «Sova Clean» было принято решение сделать упор на нешаблонных визуальных и смысловых приемах, чтобы запомниться аудитории.

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

В заголовке H1 отразила услуги компании, которые направлены как на B2C, так и на B2B. А в дескрипторе задела боли и потребности ЦА.

На сайте предусмотрела 2 целевых действия — «заказать уборку» для горячей аудитории (которая, например, пришла из Нельзяграмма) и «рассчитать стоимость» для более холодной, которая пришла с рекламы и еще сомневается.

Структура состоит из 6 страниц: главная, для частных лиц, для бизнеса, о компании, контакты и частые вопросы. Разделение на страницы в зависимости от сегментов ЦА не только удобно клиентам, но хорошо для SEO.

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

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

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

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

Взяли шрифт «Soyuz Grotesk» с округлыми очертаниями, которые отражают дружелюбие, открытость, при этом энергичность и свежее веяние чего‑то нового.

В основу дизайн-макета положен стиль «bento ui», в котором весь контент разбит на блоки и плашки, за счет чего он эффективно систематизируется и легко воспринимается.

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

Так как компания называется «Sova Clean», в макете использовала образ совы, что является необычным решением. Это маскот бренда, который «преследует» пользователя на протяжении всего сайта и делает проект запоминающимся, повышает узнаваемость компании.

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

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

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

Также разработала 4 адаптивные версии: 2 под планшеты и 2 под смартфоны, чтобы сайт был удобным на любом устройстве.

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

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

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

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

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

По итогу клиент получил сайт, который:

Ознакомиться с сайтом можно по ссылке:

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

Еще больше о веб-дизайне и разработке сайтов я рассказываю в своем телеграм-канале @lazarevadesign, заглядывайте 👇