Digital / посадочная страница / 2020

Одностраничник, который продаёт метры в торговом центре

Becar Asset Management выводил на рынок непривычный продукт: долю в действующем торговом центре «Смайл» в Петербурге. Мы собрали посадочную страницу, где доходность стоит на первом экране, форма находится прямо под ней, а дальше идут доказательства, что центр работает.

  • Дизайн восьми экранов
  • Вёрстка
  • Адаптив
  • Формы и заявки
  • Анимации
наведите на смайл
8 экранов
от обещания доходности до контактов отдела продаж
до 13%
годовых, главное число всей страницы
15 000 кв. м
площадь торгового центра в Петербурге
2 формы
на первом экране и на карте района, плюс модальная
Клиент

Becar Asset Management

Международная группа, которая проектирует, строит и управляет недвижимостью в России, США, Европе, СНГ и на Ближнем Востоке. Основана в 1992 году Александром Шараповым. Среди её проектов бизнес-центр «Станция», МФК The Loft Club, сеть апарт-отелей Vertical.

Торговый центр «Смайл» в Петербурге входит в портфель группы. Это районный центр на 15 000 кв. м, больше 80% площадей в нём занимают сетевые арендаторы. В 2020 году Becar продавал в нём метры частным инвесторам и заказал под эту продажу отдельную посадочную страницу.

8 млн кв. мв управлении группы
25 000объектов недвижимости
15 000объектов сдано в аренду
5 000сотрудников в группе
Задача

Разработать посадочную страницу инвестиционного продукта ТРЦ «Смайл» и довести её до заявки в отделе продаж.

  1. Продукт, которого нет в привычной сетке

    Инвестор понимает квартиру и банковский вклад. «Доля в торговом центре» требует объяснения на пальцах: кто платит аренду, кто занимается арендаторами, из чего складываются те самые 13% годовых.

  2. Обещанию доходности никто не верит

    Цифру «до 13%» можно написать на любом лендинге. Поэтому страница построена не на обещании, а на доказательствах: показатели самого объекта, список сетевых арендаторов, внешняя премия, цифры управляющей группы.

  3. Два разных предложения на одной странице

    Кроме долей в центре продавался готовый арендный бизнес: помещение «Макдональдса» на 343 кв. м с договором до 2030 года. Его нужно было показать так, чтобы он не смешался с основным предложением и не сбил человека с пути к форме.

Страница целиком

Пролистайте её прямо здесь

Внутри экрана та самая посадочная 2020 года, снятая с исходной вёрстки: все восемь блоков в том порядке, в котором их видел инвестор. Крутите колесом внутри окна или переключитесь на телефон.

smile.becar.ru / инвестиции в торговую недвижимость
Посадочная страница ТРЦ Смайл целиком: восемь экранов от доходности до контактов

снято с исходной вёрстки проекта

Разбор

Что делает каждый экран

Страница читается сверху вниз как разговор с инвестором: сначала предложение, потом доказательства, в конце компания, которая за всё это отвечает.

Первый экран посадочной страницы ТРЦ Смайл: логотип, доходность до 13% годовых и форма заявки
01Первый экран

Доходность и форма в одном кадре

Логотип центра, обещание «до 13% годовых» и два поля формы стоят в одном экране. Тому, кто уже готов, не нужно ничего листать: имя, телефон, кнопка. Вся остальная страница работает на тех, кому сначала нужны доказательства.

Экран посадочной ТРЦ Смайл: 80% площадей у сетевых арендаторов и карусель логотипов
02Кто платит аренду

80% площадей заняты сетевыми арендаторами

Слева одна крупная цифра, справа шесть коротких аргументов, под ними карусель логотипов. Абстрактный «арендный поток» превращается в знакомые вывески: Перекрёсток, Сбербанк, МТС, Билайн, Буквоед. Это первый ответ на вопрос, откуда берётся доход.

Экран продажи готового арендного бизнеса: Макдональдс, 343 кв. м, доходность 10% годовых
03Второй продукт

Готовый арендный бизнес: Макдональдс, 343 кв. м

Кроме долей в центре продавалось отдельное помещение с действующим договором аренды до 2030 года. Ему отдали отдельный экран и единственный на всю страницу фиолетовый фон: старая ставка 8% зачёркнута, рядом стоит 10%. По цвету видно, что это другое предложение, а не продолжение предыдущего.

Экран «Гарантии дохода» на посадочной ТРЦ Смайл: концепция управления и лояльность арендаторов
04Возражения

Что будет, если арендаторы уйдут

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

Экран «Секрет успеха ТЦ Смайл»: восемь метрик объекта и премия RCSC Awards 2017
05Доказательства

Восемь цифр вместо восьми обещаний

Рост среднесуточной посещаемости, доход с квадратного метра выше рынка, доля сетевых арендаторов, частота визитов жителя района. Внизу экрана внешняя оценка: финалист RCSC Awards 2017 в категории «Малый торговый центр».

Экран с картой района и формой заявки на посадочной странице ТРЦ Смайл
06Локация

Smile Family: центр притяжения района

Карта района, поверх неё вторая форма. Экран отвечает сразу двоим: жителю показывает знакомые улицы, инвестору объясняет, что трафик у центра районный и берётся из соседних домов, а не из рекламы.

Финальный экран посадочной: цифры группы Becar Asset Management и карта офисов
07Кто за этим стоит

От объекта к компании

Финальный экран переключает разговор с торгового центра на группу: 8 млн кв. м в управлении, 25 000 объектов недвижимости, 5000 сотрудников, офисы в Лондоне, Москве и Петербурге. Мировая карта собрана из дерева, чтобы блок не выглядел как сухая справка.

Анимированный смайл с посадочной страницы: жёлтый круг, который подмигивает
Деталь

Смайл, который подмигивает

В задании этого не было. Логотип центра и есть улыбка, поэтому мы сделали её живой: жёлтый круг на первом экране моргает, если задержать на нём взгляд. В сдаточном письме этот пункт звучал так: «И да, если долго смотреть на смайлик, он подмигнёт». Мелочь на двадцать килобайт, из-за которой страницу показывали коллегам.

ball_smile.gif / 500 × 500 / 20 КБ

Арифметика

Ради чего человек оставлял телефон

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

Ставка «до 13% годовых» взята с посадочной страницы 2020 года. Это иллюстрация к кейсу, а не инвестиционное предложение.

5 000 000 ₽
650 000 ₽в год при ставке 13%
54 167 ₽в месяц
Доказательства

Цифры, на которых держится страница

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

7 160рост среднесуточной посещаемости центра
+115%увеличилась посещаемость
+54,4%выросла доходность объекта
+34%увеличена арендопригодная площадь
+18%посещаемость выше средней по городу
+12%доход с квадратного метра выше рынка
>80%площадей арендовано сетевыми арендаторами
4-6раз в месяц житель района заходит в центр
RCSC Awards 2017ТЦ «Смайл» финалист номинации «Действующий торговый центр»
в категории «Малый торговый центр»
Арендаторы

Аргумент, который узнают без объяснений

Четырнадцать вывесок из соседнего торгового центра работают лучше любого абзаца про стабильность арендного потока. На странице они идут каруселью сразу под цифрой 80%.

Логотип арендатора ТЦ Смайл: Перекрёсток
Логотип арендатора ТЦ Смайл: Familia
Логотип арендатора ТЦ Смайл: Modis
Логотип арендатора ТЦ Смайл: Сбербанк
Логотип арендатора ТЦ Смайл: МТС
Логотип арендатора ТЦ Смайл: Билайн
Логотип арендатора ТЦ Смайл: Буквоед
Логотип арендатора ТЦ Смайл: Kari
Логотип арендатора ТЦ Смайл: Obuv.com
Логотип арендатора ТЦ Смайл: Триал-Спорт
Логотип арендатора ТЦ Смайл: Redmond
Логотип арендатора ТЦ Смайл: Детки
Логотип арендатора ТЦ Смайл: ВсеИнструменты
Логотип арендатора ТЦ Смайл: Котофей
Логотип арендатора ТЦ Смайл: Перекрёсток
Логотип арендатора ТЦ Смайл: Familia
Логотип арендатора ТЦ Смайл: Modis
Логотип арендатора ТЦ Смайл: Сбербанк
Логотип арендатора ТЦ Смайл: МТС
Логотип арендатора ТЦ Смайл: Билайн
Логотип арендатора ТЦ Смайл: Буквоед
Логотип арендатора ТЦ Смайл: Kari
Логотип арендатора ТЦ Смайл: Obuv.com
Логотип арендатора ТЦ Смайл: Триал-Спорт
Логотип арендатора ТЦ Смайл: Redmond
Логотип арендатора ТЦ Смайл: Детки
Логотип арендатора ТЦ Смайл: ВсеИнструменты
Логотип арендатора ТЦ Смайл: Котофей
Как это сделано

Палитра и шрифт

#2AC8BBфон трёх экранов из восьми
#0A5F6Aшапка, поля формы, тени
#FFC324смайл, цифры, одна кнопка
#40307Eэкран арендного бизнеса
#5B56A6круги в фоне и вторая форма
#FFFFFFэкраны с текстом и логотипами
Gotham Pro
BlackСМАЙЛ 13%
RegularДоходность до 13% годовых
Lightдоступные инвестиции в торговую недвижимость

Одна гарнитура на всю страницу, три начертания. Black работает на числах и заголовках, Light держит длинные абзацы, между ними ничего не нужно. Шрифт подключён файлами с сервера проекта, без внешних подгрузок.

  • Круг вместо прямоугольникаЛоготип центра это улыбка, поэтому круг стал основной формой: смайл, кнопки, фоновые пятна, поля формы со скруглением на всю высоту.
  • Волна между экранамиЭкраны разделены не линиями, а волной. За счёт неё длинная страница читается как одно полотно, а не как склейка блоков.
  • Жёлтый только на главномЖёлтый достаётся смайлу, цифрам и одной кнопке на экран. Всё остальное живёт на бирюзе и белом, поэтому взгляд всегда знает, куда идти.
Адаптив

Телефон не уменьшенный десктоп

Больше половины переходов на такие страницы приходит с телефона, поэтому мобильная версия собиралась отдельно, а не сжатием десктопной сетки.

Первый экран на телефоне: логотип, смайл и форма помещаются в один вертикальный кадр
Первый экран собирается в столбец, но обещание и форма по-прежнему видны без прокрутки.
Экран с цифрами объекта в мобильной версии посадочной ТРЦ Смайл
Сетка цифр из трёх колонок разворачивается в один столбец, чтобы числа не мельчали.
Блок группы Becar в мобильной версии: своя иллюстрация вместо карты с городами
У блока группы на телефоне своя иллюстрация: карта с городами на узком экране не читается.
Четыре брейкпоинтаРаскладка пересобирается на 1024, 600 и 480 пикселях, плюс отдельные правила для телефона в портрете.
Своя мобильная графикаЧасть иллюстраций на телефоне заменена: там, где на десктопе дерево с городами, на узком экране стоит компактный знак.
Формы работают вездеМаска телефона, проверка полей и модальное окно «Спасибо» одинаково ведут себя на всех разрешениях.
Результат

Что получил клиент

Дизайн, вёрстка, формы и поддержка страницы. Больше о направлении: услуга «Digital»

  • 01Дизайн восьми экранов и вся страница целиком: от первого экрана с доходностью до контактов отдела продаж.
  • 02Вёрстка без конструктора, свои стили и скрипты. Страница осталась лёгкой: шрифты и картинки лежат на сервере проекта, внешних подгрузок нет.
  • 03Три формы заявки: на первом экране, на карте района и в модальном окне, с маской телефона, проверкой полей и экраном благодарности.
  • 04Анимации по прокрутке и карусель арендаторов. Ничего не двигается просто так: движение появляется там, где нужно задержать взгляд.
  • 05Адаптив на все разрешения с отдельной мобильной графикой, проверенный на телефонах, планшетах и широких мониторах.

Давайте сделаем проект вместе?

Отправьте свои данные и мы вам перезвоним