Проблема
Компания «Люкс Персонал», занимающаяся подбором элитного домашнего персонала в Москве и Московской области обратилась к нам со своей проблемой.
В 2018 году сторонним подрядчиком-фрилансером для них был подготовлен лендинг для привлечения клиентов, но в процессе работы с данным сайтом его верстка и функционал были повреждены.
Заказчик совместно с маркетинговым агентством планировал новую рекламную компанию и лендинг необходимо было восстановить, т.к. он должен был быть основной площадкой для привлечения трафика и получения заявок.
Проведя анализ сайта и убедившись в отсутствии бекапов, а также в моральном устаревании лендинга, мы предложили его полный редизайн.
Что хотел клиент
Заказчик планировал получить от наших разработчиков красивый, современный и функциональный лендинг.
Учитывая масштабные задачи рекламной кампании клиента, предполагаемый новый сайт должен обладать положительными факторами ранжирования SEO в поисковых системах, иметь максимально лаконичный интерфейс, но при этом достаточно актуальный (согласно последним тенденциям в web-верстке) и информативный.
У Вас похожий проект или аналогичные задачи?
Давайте обсудим
Этапы решения
Часть 1. Новый концепт:
Учитывая предыдущую продолжительную работу с клиентом по другим проектам и отличное знание его направления и задач, мы оперативно перешли к подготовке нового концепта без затрат времени на полный аудит.
В ходе этой работы был проведен анализ сайтов основных конкурентов и выделены сильные и слабые стороны их сайтов, акцентируя внимание на:
- структуре лендинга;
- скорости загрузки страницы по оценке PageSpeed Insights от Google;
- адаптации на мобильных устройствах.
По итогам данной работы сформировался концепт нового лендинга, который был представлен заказчику.
Часть 2. Подготовка прототипов:
После формирования концепта необходимо было определиться со стилистикой будущего сайта. Для предоставления вариантов нашим дизайнером была создана выборка референсов для клиента.
Согласовав с заказчиком наиболее оптимальный для него стиль, дизайнер приступил к разработке прототипов и макетов.
В процессе создания прототипов дизайнер решил полностью отказаться от «простыней» текста, совершенно неуместных на современных лендингах.
В итоге:
- от некоторых текстов отказались полностью;
- часть текста убрали в сворачиваемые блоки;
- основные тексты наоборот были подчеркнуты визуальными акцентами;
- устаревшая карта была полностью заменена стильными бегущими строками, которые заявили о себе как один из трендов этого года.
В результате наш концепт был визуализирован и доведен до идеала.
Часть 3. Подготовка макетов:
После окончания работы с графическим прототипом, началась подготовка макета сайта.
Анализируя топовые лендинги, получившие премии рунета, была выбрана наиболее оптимальная цветовая схема, подготовлен полный макет страницы, UI-кит и референсы эффектов для программистов.
После утверждения макета с клиентом проведена адаптация формата под основные разрешения экранов.
В итоге осуществлена полная визуализация будущего лендинга. На этом этапе макеты лендинга были переданы рекламному агентству заказчика для того, чтобы к запуску лендинга они уже смогли подготовить рекламные кампании на основе имеющегося материала.
Часть 4. Верстка:
После подготовки и согласования всех макетов с клиентом, мы приступили к верстке. Во избежание сбоя работы текущей версии сайта, создание нового лендинга велось на сервере клиента на тестовом поддомене dev.luxpersonal.ru. Из-за высокой динамичности контента на странице структура кода получалась сложной.
Поэтому для удобства разработки и поддержки проекта мы решили использовать WebPack (стандартная практика для большинства проектов независимо от их сложности) и применять методологию БЭМ.
После верстки элементов лендинга для их адаптации под популярные разрешения экранов была добавлена анимация, задуманная в проекте дизайнером.
После полной готовности лендинга и его утверждения клиентом в основном разрешении, мы провели его адаптацию и к другим разрешениям экрана.
- Настройка отправки заявок на почту и в CRM-сервис «Клиентская база»;
- Установка необходимых счетчиков и интеграция с системой коллтрекинга.
- Осуществлен перенос на основной домен lux-personal.ru, после финального утверждения клиентом нового варианта лендинга.
Рекламное агентство заказчика было оповещено о готовности продукта и возможности старта подготовленных ими рекламных кампаний.
Итог
Всего за месяц клиент получил уникальный, мощный и технологичный лендинг в современном исполнении, подчеркивающий статусность направления работы заказчика с необходимыми сервисами и широким функционалом.
