Этот сайт использует cookie-файлы сервиса веб-аналитики Яндекс.Метрика для улучшения своей работы. Оставаясь здесь, вы даете согласие на обработку персональных данных в порядке, указанном в Политике конфиденциальности.
Ок
Оставьте заявку
и получите продающую структуру сайта или аудит текущего конкретно под ваш запрос — это бесплатно.
Как вас зовут?
Где удобно связаться?
Контакты
Я даю согласие на обработку персональных данных и соглашаюсь с политикой конфиденциальности
Или напишите мне напрямую в удобном мессенджере
Сообщение об успешной отправке!
Спасибо!
Заявка успешно отправлена и я свяжусь с вами в ближайшее время. А пока ждете ответа, предлагаю ознакомиться с моим подходом через отзывы или кейсы
Многостраничный сайт
для сервиса «Zapaster»
Многостраничник
Сайт под ключ
Tilda
Нейминг
Логотип
Посмотрите проект
Заказчиком стал многосерийный предприниматель, который запускал новую компанию — сервис по подбору автозапчастей. Задача — разработать функциональный сайт, главная цель которого — максимально упростить путь клиента к выбору и заказу деталей.
Задача
Клиент
Компания «Zapaster»
Проект
Многостраничный сайт
Год
2024
Что было сделано
Исследование ЦА и конкурентов, сбор семантического ядра
Написание продающих текстов с упором на маркетинг
Создание прототипа
Создание мудборда с ассоциативным рядом и референсами
Создание дизайн-макета десктопной версии
Создание дизайн-макета 4 адаптивных версий
Адаптивная верстка на Тильде
Базовое SEO и технические настройки
Формирование образа компании и создание логотипа
Отрисовка иллюстраций персонажа-маскота
Вводные
До начала разработки не было ни названия, ни позиционирования, ни фирменного стиля. Поэтому мне нужно было не просто создать сайт, а сформировать образ новой компании.
Начало работ
Ее главная услуга — помощь с подбором автозапчастей в мессенджерах и по телефону, а также оформление заказа с доставкой. И все это бесплатно. Доход основан не на конечных потребителях, а на сотрудничестве с поставщиками, с которыми подписаны договоры.
Для отслеживания расписания по проекту создала подробную Диаграмму Ганта с датами начала и завершения этапов, чтобы клиент всегда знал, какие работы ведутся в каждый момент времени.
Также создала персональную страницу под проект в Notion, в котором систематизировала все материалы: ссылки на видео-презентации и макеты, а также на договор и чеки с оплат, чтобы клиент в любой момент смог ко всему обратиться.
/01
Также определила наиболее значимые критерии, на которых основывается выбор потребителей в сторону определенного магазина или сервиса.
Аналитика
Я начала работу с анализа ЦА, по итогам которого выяснила страхи, поводы для покупок, проблемы, с которыми сталкивается человек на каждом из подэтапов подбора и заказа запчастей.
После конкурентного анализа было выявлено, что практически никто не оказывает такие же услуги, как мой заказчик. Есть что‑то похожее, но точно такой же концепции — не было нигде. Однако анализ помог выявить моменты, в которых нам стоило усилиться, чтобы завоевать внимание потенциальных клиентов.
/02
Но в итоге пришли к «Zapaster», который стал олицетворением главной креативной концепции. Это персонаж-помогатор, некий мастер на все руки, который всегда выручит, проконсультирует, как и сами сотрудники компании, которые помогают подобрать запчасти в мессенджерах или по телефону.
Нейминг
После приступила к продумыванию нейминга и ключевой креативной концепции бренда. Автозапчасти — это детали машины. Если посмотреть на нее как на пазл, то можно сказать, что запчасти — это фрагменты картины, которая складывается в единое целое. На основе этого я перебирала возможные названия.
Так как подбор происходит онлайн и клиент не видит специалистов, то такой маскот помогает создать эффект живой коммуникации. Есть образ человека, который ассоциируется со всеми сотрудниками, поэтому обезличенное общение не вызывает дискомфорта.
/03
В главном экране четко и емко донесла ключевые выгоды до ЦА на основе критериев, что являются наиболее значимыми для них при заказе. В дескрипторе описала второстепенные преимущества, которые не поместились в заголовок H1.
тексты & Прототип
После формирования фундамента бренда, я занялась созданием прототипа (схематичной версии сайта) с написанием конверсионных текстов для совершения посетителем целевого действия — написания в мессенджеры для подбора запчастей.
А в футере добавила призыв к действию, чтобы привести к целевому действию даже тех, кто долистал до самого конца и еще сомневается.
/03
тексты & Прототип
Все повествование было построено на основе «лестницы узнавания Бена Ханта»:
Во втором блоке актуализировала боли аудитории, показав, как обычно происходит подбор автозапчастей самостоятельно, как это долго, сложно и муторно
Описала решение в виде «Запастера»
Подсветила преимущества конкретно нашего сервиса, при этом использовав метафору с паззлами: «сложим единую картину из того, чего вам так не хватало»
Рассказала о процессе заказа и сделала отдельный блок о гарантиях и доставке, а также с ответами на вопросы, чтобы сразу отработать возражения еще до того, как они появятся в голове у потенциальных клиентов
Добавила информацию об ютуб-канале как соц. подтверждение, что компании можно доверять
/04
Для этого было взято контрастное сочетание — яркий красный и темно-графитовым. А для второстепенных элементов использован голубой, который смягчает визуал.
мудборд
Далее я подготовила мудборд для сайта. Важно было отразить следующие эмоции и ассоциации: динамичность, энергичность, легкий брутализм, открытость, экспертность, креатив, неординарность.
Было предложено сочетание гротескных шрифтов «Prosto One» и «Inter» — первый отражает стойкость и непоколебимость, брутальность (за счет массивных букв), а второй — просто хорошо считывается.
/05
Разработаны несколько вариаций логотипа в зависимости от цвета фона и наличия заголовка — есть вариант только с изображением, а есть с изображением и текстом.
Логотип
Вместе с мудбордом, был создан логотип. Его отрисовала иллюстратор, которая есть в моей команде. Она же делала под проект изображения персонажа.
/06
Для передачи открытости, дружелюбия и легкой непосредственности, в дизайне использованы забавные иллюстрации Запастера и гифки с мемами.
Дизайн
В основу дизайн-макета положен стиль «bento ui», в котором весь контент разбит на блоки и плашки, за счет чего он эффективно систематизируется и легко воспринимается.
/07
В главном экране нас сразу встречают крупные иконки мессенджеров, а также QR-код для подбора запчастей с телефона, при наведении на него открывается страница из 1 блока с ссылками на телеграм и Ватсап.
Верстка и функционал
Главная сложность проекта — в многосценарном интерфейсе и в разной логике функционала в зависимости от устройства. Для этого приняла ряд нестандартных решений.
Начиная со второго блока, в десктопной версии слева фиксируется плашка с контактами, чтобы из любого места на сайте человек смог вступить в коммуникацию с экспертом.
/07
Также была сделана сложная анимация, которая фокусирует пользователей на наиболее значимых смыслах.
Верстка и функционал
В планшетной и мобильной версиях при скролле в нижней части появляется фиксированная узкая плашка с контактами, что удобно для пользователей: в нижней части легко дотянуться до кнопки, без необходимости поднимать руку, чтобы тыкнуть куда‑либо.
/08
Креативы
Помимо сайта и логотипа, были созданы дизайн-макеты рекламных креативов, а также обложки для соцсетей
/09
По традиции записала подробную видео-инструкцию по управлению сайтом, в которой рассказала, как менять текст, фотографии, добавлять новые видео с ютуб, при этом сохранив текущую анимацию.
Завершение и отзыв
Заказчик остался полностью доволен сотрудничеством и сразу заказал второй проект. В отзыве он отметил грамотное ведение дел, чувство стиля и легкую коммуникацию, а также адекватный прайс.
