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

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

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

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

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

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

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

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

Онлайн-журнал «Ева инвестирует», который мы создали по заказу брокера «Регион Инвестиции», попал в галерею лучших проектов пользователей Tilda в разделе «Медиа».

Команда проекта
Дизайн, вёрстка: Анна Быковская
Авторы статей: Лена Жернова, Ольга Грачёва
Иллюстрации: Михаил Голев
Арт-директор: Ника Троицкая

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

Май—август 2020 года

Ева — пока что лучшее моё изобретение в 2020 году. Я придумала её для брокера «Регион Инвестиции», у которого есть приложение для инвестиций — «Эволюция». У брокера была задача по обучению своей целевой аудитории, и я предложила сделать бренд-медиа — журнал об инвестициях, ценных бумагах и том, как на этом зарабатывают.

Помимо организации редакции важно было ещё придумать айдентику и нейминг, которые будут:

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

Ева — производное от Evolution → Evo → Eva → Ева. Чтобы читателю было сразу понятно, о чём речь в журнале, я добавила про инвестиции в название. Так получился журнал «Ева инвестирует».

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

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

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

У Евы был домашний питомец Харитон: это поросёнок, который выглядит, как свинья-копилка. Как всякая порядочная копилка, Харитон должен был предлагать Еве консервативные способы сбережения денег.

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

В этом случае оказалось лучше пожертвовать одним поросёнком, но сохранить весь проект. Сохранили :—) В следующих постах я расскажу, как мы сделали сам журнал.

Идея, нейминг, позиционирование: Ника Троицкая
Иллюстратор и создатель Харитона: Миша Голев
Стиль и одежда для Евы: Мария Букаева

Отредактировала газетную статью для застройщика «А101» и записала процесс на видео. С черновиком помогала Настя Расстегаева.

Вместе с дизайнеркой Ниной Прохоровой сверстали буклет об отделке квартир в жилом районе «Скандинавия», который строит застройщик «А101». А потом ещё разок переверстали. Это — вторая итерация:

Рендеры: застройщик «А101»
Дизайнер: Нина Прохорова
Главред и менеджер проекта: Ника Троицкая

См. также:
Первая итерация, PDF, 1 Мб
Вторая итерация, PDF, 4,5 Мб

К выставке «Недвижимость 2017» написали и заверстали листовку о коммерческой недвижимости А101. Дизайнила Нина Прохорова. Для меня это была одна из самых сложных задач за последнее время. Обычно я работаю с жилой недвижкой и лучше разбираюсь в мотивах покупателей квартир, а не офисов. Конечно, вторая итерация тоже будет.

Застройщику «А101» я написала текст и собрала структуру листовки о таунхаусах. Дизайнили вместе с Ниной Прохоровой, она дизайнер в А101.

Было

Стало

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

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

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

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

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

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

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

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

Задача

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

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

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

Гипотеза

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

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

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

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

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

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

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

В маркетинге

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

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

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

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

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

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

В редактуре

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

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

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

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

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

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

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

Запуск

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

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

О проекте

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

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