​​Зарелизили новый проект: сделали московский интернет-магазин цветов Elli Fiori и редизайн его логотипа. Это наш первый магазин в портфолио «Биодинамики», но, надеюсь, не последний :—)

Когда заказчик пришёл ко мне за сайтом, то одно из главных требований было такое: «Делай что угодно, только чтобы без квадратно-гнездовой вёрстки». А вообще ему надо было проверить гипотезу, как букеты будут продаваться через интернет вместо привычного инстаграма. Инста отнимает много сил и времени на общение с клиентом — а с сайтом можно сразу снять большинство вопросов. То есть всё, как мы любим: нужно сделать не очень дорого и красиво. Это же гипотеза, не надо проверять её за дикие миллионы, чтобы понять, если что-то не работает.

Чтобы получилось недорого, мы решили исключить разработку вовсе и собрать сайт на Тильде. Но, увы, стандартные блоки интернет-магазинов именно «квадратно-гнездовые». Чтобы избавиться от этого эффекта, мы использовали крупные фотки и чередование ритма. Да, это трудозатратнее, зато красивее.

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

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

Ещё мы постарались сделать корзину и оформление заказа простым и понятным. Заполняя поля, клиент последовательно отвечает на вопросы: «От кого» и «Кому», как доставить, куда и в какой день. А не вот эти вот кошмарные «Адрес нахождения получателя» или как там...

Заходите на Elli Fiori и смотрите, а лучше заказывайте. Если при заказе допишете в комментарии «Я от Троицкой» — будет в подарок какой-то сюрпризик.

Команда проекта
Дизайн, вёрстка: Анна Быковская
Текст и управление: Ника Троицкая

Часто на сайтах застройщиков я встречаю криво записанные номера телефонов: (495) 111-11-11, 8 495 111-11-11, 8-499- 111 11 11. Продолжать можно долго. Так писать — отстой, и тому четыре причины: скобки вокруг кода, неиспользование «+7», левые знаки в номере и переносы из-за пробелов.

Скобки вокруг кода

Вообще, скобки используют для поясняющей, необязательной информации. В нашем случае без кода Москвы 495 или 499 или без кода мобильного оператора не дозвониться, а значит, это не дополнительная, а как раз обязательная информация. Нельзя с мобильного набрать 111-11-11 и попасть в офис питерского застройщика, например. Поэтому код города в скобки брать нельзя.

Восьмёрка вместо +7 или без +7

Тут всё просто. Стоит мне уехать за пределы разумного страны, и я снова вам не дозвонюсь. А если у вас номер мобильного с восьмёрки, то не факт, что я вам и СМС смогу отправить. Даже внутри России. А если написать вообще без +7, то я просто не смогу позвонить с мобильника в один тап.

Пробелы, звёздочки внутри номера

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

UPD. Переносы из-за пробелов

(За дополнение и код спасибо Жене Лазареву)

Если номер телефона окажется в конце строки или сайт откроют на мобильнике, есть шанс, что из-за пробелов и дефисов часть номера перенесётся на другую строку. Решение — обернуть телефон в код:

<span style="white-space:nowrap;">...</span>

Нормальный формат записи: +7 999 123-45-67.

См. также:

• Василий Никоноров. О записи телефонных номеров
• Артём Поликарпов. О вёрстке телефонных номеров

Если вы застройщик, у вас наверняка есть интернет-маркетолог. Он размещает рекламу в интернете, тестирует новые рекламные каналы, отключает неэффективную рекламу. Чтобы понять, правильно ли работает реклама, маркетолог измеряет конверсию. Часто это конверсия трафика в лиды: сколько из всех, кто пришёл на сайт, позвонили или отправили заявку. Всякий эксперимент или увеличит конверсию, или нет. Чем выше конверсия, чем дешевле обходится каждый клиент.

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

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

• Вот размещаете вы контекстную рекламу в Яндекс.Директе. Приходит по рекламе 30 000 посетителей — это и есть выборка.

Размер эффекта показывает, на сколько процентов изменилась метрика — например, выросла конверсия в лиды. Если вам важно увидеть малейшее изменение в конверсии, например, на 0,1%, — это маленький эффект. Маркетолог обязан убедиться, что конверсия изменилась именно из-за эксперимента и что это не случайное совпадение. Для этого ему придётся собрать большую выборку.

Люди покупают квартиры куда реже, чем смартфоны или одежду в интернет-магазинах, поэтому за месяц в интернет-магазин приходит 10 000 000 посетителей, а на ваш сайт — 30 000. При конверсии в лиды в 2% интернет-магазин получит 200 000 лидов, а вы — 600.

• Привёл маркетолог на сайт 30 000 посетителей, причём уже тёплых, конверсия в лиды — 2%, как у хорошего интернет-магазина. Берём специальный калькулятор для статистики и считаем, как должна меняться конверсия при такой выборке, чтобы результат не был случайным совпадением.

• Выборки хватит, чтобы увидеть статистически достоверный результат, только если конверсия в лиды вырастет на 31,9%. Была 2% — должна стать 2,638%. В результате эксперимента вы должны получать с 30 000 посетителей не 600 лидов, а 791.

Проверьте, на каких данных ваш маркетолог принимает решения. Одна из самых частых ошибок маркетологов — нехватка выборки.

• Пришёл к вам маркетолог и говорит: «Раньше мы получали по рекламе 50 000 посетителей и конверсию в 2%. Я изменил кампанию так, что за те же деньги увеличил конверсию этих 50 000 на 10%. Я молодец, потому что мы приросли в лидах: на 100 лидов больше благодаря новой рекламе».

• На самом деле не факт: чтобы утверждать статистически достоверно, что новая реклама сработала, при конверсии в 2% и её изменении на 10% маркетологу нужна выборка в 90 000, а не 50 000.

Нехватка выборки не означает, что ваш маркетолог плохо сработал. Вам просто не хватает данных, чтобы верить взаимосвязи между изменением рекламы и увеличением трафика. Может, и правда реклама повлияла на трафик, а может, это только совпадение. ¯\_(ツ)_/¯ Подождите и соберите больше статистики.

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

Запустили вторую версию промостраницы Земактива и новые страницы двух посёлков: «Вяземских садов» и «Кореньков».

Промостраница Земактива рассказывает о посёлках и о компании. Полезное действие — направить читателя на один из посёлков или получить телефон читателя, который с посёлком не определился.

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

Новость выглядела, как заголовок, а заголовок был плохой. На фотографиях не хватало домов, а в тексте — рассказа о посёлках. Банка с вареньем отвлекала и была не к месту. Заголовки слева от текста в блоке «О компании» не выглядели, как заголовки. Были общие проблемы вёрстки, а ещё мы нарушили принципы теории близости.

Сравните первую и вторую версии:

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

Сделано в «Биодинамической редакции» и «Кодельной». Советом помогли Михаил Нозик, Максим Ильяхов и Артём Горбунов.

В апреле мы написали, нарисовали, сверстали и запустили две промостраницы для посёлков «Берег Вяземских» и «Берег Вяземских Плюс».

Задача

За две недели сделать новую промостраницу для посёлка «Берег Вяземских»: Земактиву мало звонков.

• Земактив хотел промостраницу для посёлка «Берег Вяземских»

В феврале компания «Земактив» начала строить посёлок «Берег Вяземских» и продавать в нём участки. От Москвы до посёлка 79 км, он состоит из двух кварталов: северного и южного. Рядом река Нара, лес и село Гавшино. Земактив проведёт в северный квартал только электричество, а в южный — ещё газ и воду. Посёлок классный, трафик по рекламе классный, но покупатели мало звонят.

Гипотеза

Мы предположили, что читатели путались в особенностях кварталов. Текст на старой промостранице адресовали одновременно и тем, кому нужен «ол инклюзив», и тем, кто хочет сэкономить. Это всё равно, что продавать на одной странице Айфон CE и Айфон 6 Эс Плюс.

• Разным аудиториям нужны разные предложения

Кроме работы над сайтом мы полезли в продажи и маркетинг.

Решение в продажах

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

• Мы предложили разделить посёлок на два отдельных

Кому-то нужен участок «на потом» и подешевле, кому-то — всё включено и сразу. Клиент принял наше предложение.

В маркетинге

Важно было сохранить название «Берег Вяземских», потому что его уже используют в брендинге и продажах, — то есть сделать из одного названия два.

У Вики — Мск +3, а я проснулась рано. Утро оказалось действительно мудренее вечера, мы нашли решение

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

• Делаем две промостраницы — свою для каждого посёлка

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

Земактив согласовал логику именования посёлков и новые названия.

В редактуре

К началу проекта мы написали и согласовали черновик о посёлке. Готовый черновик не означает, что ничего не изменится в тексте. Но когда у редактора готова структура промостраницы, проект стартует быстрее.

• Готовый черновик не означает, что ничего не изменится в тексте

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

Сначала пишем и делаем предвёрстку в гуглодоке

Половина модулей в страницах у нас совпадает: что рядом, как купить, кто строит. Сначала мы думали сделать общую часть: и для поисковой оптимизации хорошо, и по логике. В итоге от этой мысли отказались. Не страшно повторяться на разных страницах. У Яндекса на выдачу влияют 800 критериев, а не один про совпадающий текст. Когда читатель изучает посёлок, ему неважно, что написано на другой странице.

• На каждой странице — та информация, которая в моменте важна для читателя

Читателю важно получить об этом посёлке всю информацию, которая поможет принять взвешенное решение о покупке.

Запуск

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

• Запуск сайта не заканчивает работу над ним, дальше смотрим метрики и анализируем результаты

О проекте

Старт работы: 10 апреля, пуск: 26 апреля 2016 года

Арт-директор: Ника Троицкая
Маркетинг и аналитика: Виталий Бахвалов
Текст: Вика Плотаненко
Дизайн и вёрстка — команда «Кодельной»: Алексей Проворов, Лиза Позднякова, Кирилл Чернаков, Илья Страйкóв

Нарисован, свёрстан и запушен «Земактив»: http://promo.zemaktiv.ru — сайт об участках и домах в Подмосковье.

Дизайнил Алексей Проворов, верстал Арсений Максимов, технически руководил Илья Страйкóв.
Текст писала Вика Плотаненко.
Главредила Ника Троицкая, флексила вместе с Виталием Бахваловым, которому тоже збазиба.

Текст для промостраницы Сибакадемстроя.
Аудитория: иногородние посетители сайта. Хотят купить квартиру в Новосибирске, но переживают
Цель: Записать на тест-драйв
Задача: Рассказать о пользе тест-драйва. Почему он хорош и что в него входит

Тест-драйв квартир

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

Что такое тест-драйв квартир

Тест-драйв — бесплатная программа, по которой мы встретим вас в аэропорту или на ж.-д. вокзале, проведём экскурсию по кварталу на Декабристов и Панораме. После обеда в ресторане «Бирман на речке» привезём вас в микрорайон «Европейский берег». В Европейском береге разместим в двухкомнатной квартире, в которой вы живёте до следующего дня.

Что входит в тест-драйв

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

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

Почему тест-драйв полезен

Главная идея тест-драйва — самостоятельно прочувствовать, каково жить в «Европейском береге». Похлопать входными дверьми, окнами, проверить напор воды в душе. Пообщаться с жителями — посмотреть, какие люди и как у нас живут. Мы считаем, это важно знать, чтобы покупать квартиру взвешенно.

Как записаться на тест-драйв

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

(форма) (кнопка «Записаться»)

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

Sastroy.com: обновления марта

2015 год в Сибакадемстрое объявили «Годом риэлтора», но в онлайне мы дополнительно анонсировали «Год постоянных улучшений сайта». Статья посвящена самым интересным изменениям на сайте Сибакадемстроя, которые мы сделали за март.

Улучшили поля ввода информации

Было: «Представьтесь, пожалуйста» и «Как с вами связаться?». Нам писали имена с маленьких букв и электронную почту вместо телефона.

Сложно продавать, когда общаешься только в почте.

Сперва мы переименовали поля в более очевидные «Имя», «Телефон» и «Электронная почта». Потом добавили «подсказки». Теперь при заполнении поля «Имя» пользователь видит их:

В зависимости от того, что пишет пользователь, сайт предлагает варианты имени, отчества и фамилии:

Та же логика работает при заполнении поля «Электронная почта». Предлагаем наиболее распространённые почтовые сервисы не писать, а выбрать из списка. C корпоративными доменами не всегда всё гладко, но yandex.ru, gmail.com и даже ngs.ru наш сайт понимает.

В поле «Телефон» добавили так называемую «маску ввода». Когда ставишь курсор в поле, сразу видишь, в каком формате писать телефон:

Изменили навигацию в разделе «Пресс-центр»

Раньше нужно было нажать в верхнем меню «Пресс-центр», потом выбрать «Новости», «Публикации» или «Отзывы» — и снова нажать. Чем отличались новости от публикаций, было непонятно.

Мы слили новости и публикации в один раздел, назвали его «Новости». Любому теперь понятно — здесь всякие тексты про компанию и около стройки. И открывается в один клик — без меню-выпадайки. А отзывы перенесли в раздел о компании.

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

UPD. Сегодня меню выглядит так:

Упростили звонки в офис для мобильных

Теперь пользователи, которые зашли на наш сайт с телефона, могут позвонить нам в два нажатия:

Зелёная анимированная кнопка вызова работает только на мобильных, с компьютера не отображается. Когда пользователь нажимает кнопку, телефон предлагает позвонить нам. Решение подсмотрели в московском Лексусе.