Врум-врум! Как мы делали лэндинг для Capital-Engine

- 25 октября 2017 года

Заказчик:

Александр Ласточкин – генеральный директор Capital Engine.

Задача:

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

С чем работаем?

Посадочная страница — веб-страница, основной задачей которой является сбор контактных данных целевой аудитории. Используется для усиления эффективности рекламы, увеличения аудитории. Целевая страница обычно содержит информацию о товаре или услуге.
Именно для создания такой страницы к нам обратились Capital Engine – быстрорастущая и набирающая обороты компания по профессиональному подбору запчастей для легковой и грузовой техники.

Как проходила работа:

Как все начиналось

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

Подготовка «скелета»

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

  1. Приветственный экран с формой, который ёмко раскрывает и описывает суть деятельности компании и даёт возможность сразу же оставить заявку.
  2. Экран преимуществ данной компании по сравнению с другими на рынке.
  3. Экран доступных к заказу групп запчастей, для того, чтобы сразу же дать возможность заказать необходимые запчасти из представленных.
  4. Экран с развернутой формой со сформулированным УТП — крайне важный экран для воздействия на потенциального покупателя, призывающий совершить отправку заявки.
  5. Экран с этапами работ и гарантиями, который получает потенциальный покупатель при сотрудничестве с данной компанией. Этот экран раскрывает алгоритм работы (показывая, что в нем нет места скрытым действиям), а также представляет гарантии компании, показывая, что покупатель сокращает риски.
  6. Экран с отзывами уже сотрудничающих с компанией клиентов и их отзывами об успешно проделанной работе.
  7. Экран с завершающей формой запроса обратного звонка и контактные данные компании в Москве и Санкт-Петербурге.

Приняв во внимание пожелания к дизайну, менеджер передал материалы дизайнеру для разработки первых концептов.

Первые шаги. Работа с логотипом

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

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

Варианты нового логотипа Capital Engine

Рис.1 Варианты нового логотипа Capital Engine

Первые версии лэндинга

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

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

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

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

Светлая и тёмная дизайн-концепции лэндинга Capital Engine

Рис.2 Светлая и тёмная дизайн-концепции лэндинга

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

Обрастая задачами

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

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

Готовый макет снова отправился заказчику, правок после окончания работ над десктопной версии посадочной страницы пришло немного и все носили, в основном, информационный характер, не требующий утверждения. Разработка рекламных материалов и листовки прошла быстро — нарекания возникли только в форм-факторе необычной рекламной листовки в форме таблички для автомобиля, изначально она была формата А5, но её пришлось адаптировать в горизонтальную листовку формата 1/3 А4.

Визитка Capital Engine

Рис.3 Визитка Capital Engine

Фирменные кружки Capital Engine

Рис.4 Фирменные кружки Capital Engine

Листовки Capital Engine

Рис.5 Листовки Capital Engine

Как только финальное утверждение прошло на «УРА», все макеты отправились на изучение и растерзание разработчикам.

Счастливый финал

Спустя 5 дней кропотливой работы и оживления макетов, посадочная страница Capital-Engine увидела свет — все это время frontend и backend разработчики верстали, вносили интерактивность и настраивали формы на странице. После небольшого багтестинга страницу бережно перенесли с рабочего поддомена на основной http://capital-engine.ru/

Конечная версия сайта Capital Engine

Рис.6 Конечная версия сайта Capital Engine

Понравилось? Поделитесь статьей в социальных сетях:

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

Walnut Team
Начать проект