Разработка корпоративного сайта для Markham Truck

Клиент: 

Markham Truck

Сайт:

markhamtruck.com

Дата запуска:

02.07.2019

О заказчике:

Компания Markham - американская компания, которая занимается ремонтом и обслуживанием грузовой техники - траков, прицепов различной комплектации.

Экспертиза:

PHP 5.6, HTML5, CSS3, JS, JQuery

Описание : 

Разработка корпоративного сайта

Цели:

Разработка landing page 

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

Задача:

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

Решение:

Разработка структуры одностраничного сайта с большим количеством pop-up форм, максимальный фокус на сбор данных клиентов для ведения оффлайн-бизнеса.

Описание страницы:

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

 

Далее мы видим навигационную панель, на которой расположены элементы навигации, при клике на которые, нас плавно перемещает на искомый раздел сайта, а также в этом блоке расположен слоган компании. Навигационная панель остается “приклеенной” к верхней части экрана при скролле для удобства навигации по сайту.

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

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

Все элементы открываются по нажатию, панель максимально информативна для пользователя.

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

 

При клике на нижний ряд слайдера идёт смена верхней тройки. При этом, на выбранном слайде выводится краткая информация о том, что это за сервис. При клике на карточку сервиса мы попадаем на pop-up обратной связи.

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

 

Далее мы попадаем на слайдер с вакансиями, открытых в этой компании. Слайдер также максимально интерактивен - перемещение по слайдам доступно как по клику на кнопку переключения слайда, так и при клике по самому слайду. Что примечательно, интерактивность сохраняется также при работе с сенсорным дисплеем в полноразмерной версии.

 

При переходе на карточку вакансии мы видим краткое описание вакансии. При нажатии на кнопку “Apply” мы видим pop-up c полным описанием вакансии.

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

 

При повторном нажатии на кнопку “Apply” мы переходим на форму заполнения данных о соискателе. Она весьма интересно структурирована - разбита на 2 раздела. 

 

В первом разделе соискатель заполняет свои личные данные, во втором - данные о своем опыте работы. Что интересно, в форме можно ввести более чем одно место работы, по нажатию на кнопку появляется еще одно поле заполнения:

 

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

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

Ниже начинается информационный блок, в котором показаны данные о самой компании - её преимущества относительно конкурентов, а также информация о компании.

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

 

После инфоблока “О нас” находится блок новостей, выполненный в виде кликабельных блоков, расположенных в этом блоке. Сразу пользователь видит 4 карточки новостей, которые выложены позднее всего. Чем раньше была опубликована новость, тем ниже карточка этой новости выводится в списке новостей.

 

Под первыми четырьмя карточками новостей мы видим кнопку “показать еще”, по нажатию на которую выводится еще две новости. Кнопка исчезает, когда выведены все новости.

 

При наведении на карточку новости, сама карточка новости выделяется анимацией. По нажатию на карточку новости, появляется pop-up с текстом новости.

 

В нижней части pop-up’а есть кнопки “поделиться”, нажав на которые можно поделиться новостью в соцсетях Facebook и Twitter.

Новостной блок положительно влияет на продвижение сайта в поисковых сетях.

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

 

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

Под блоком подписки находится футер сайта. Он минималистичен и информативен.

 

В футере повторяются кнопки со ссылками на профили компании в соцсетях, и дублированием информации о времени работы компании и её местонахождении.

При работе с сайтом, в нижнем правом углу мы видим элементы дополнительной навигации - кнопка “Вверх”, по нажатию на которую мы плавно перемещаемся к хедеру сайта. Над ней находится кнопка обратной связи, при нажатии на которую пользователь видит pop-up обратной связи.

 

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

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

Удобная и понятная навигация поможет найти необходимую информацию даже неопытным пользователям. 

Заключение:

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