TopDelivery — разработка лендинга

Начало работы

В конце ноября к нам в агентство обратились TopDelivery со срочным запросом: сделать одностраничный лендинг к началу декабря для продвижения услуги доставки новогодних подарков по Москве, Петербургу и ещё 70+ городам России. 

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

Референсы и разработка прототипа

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

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

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

Копирайтинг

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

Целью текста на лендинге было показать заказчикам, что TopDelivery снимут с них все эти головные боли и позаботятся о том, чтобы подарок был доставлен вовремя и курьер оставил после себя хорошее впечатление.

Дизайн

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

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

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

Создали новогоднюю атмосферу, чтобы это мэтчилось с основным СТА — заказе доставки подарков. Хотелось, что бы клиент, попав на страничку, вдохновился атмосферой Нового года и был более расположен к оформлению доставки. Условно, чтобы он понимал, что «попал куда надо» и компания поможет ему с его проблемой. После — блок с преимуществами. Всё то, что важно для клиента, который заказывает доставку подарков от имени компании.

Следующий блок после первого экрана и преимуществ — цены с разбивкой по городам (в фокусе — Москва и Петербург) и подробная информация о подарках.

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

В конце страницы — простая форма, FAQ и финальный СТА на обратный звонок, если подарок нестандартный или у клиента есть вопросы.

Вёрстка и рабочий вариант

Для сборки лендинга использовали Zero-блоки в Тильде. Во время вёрстки проверили адаптивность лендинга ко всем размерам устройств. 

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

В итоге от брифинга до работающей версии лендинга прошло 7 дней. Вот как сайт выглядит сейчас: