7 заметок с тегом

кейс

Кейс Авито: как благодаря тексту деньги пользователей стали на 55% реже зависать между счетами

В интерфейсах редко бывают чисто редакторские задачи. Обычно ты рука об руку с дизайнером пилишь макет, потому что пользователи воспринимают экран целиком. Этот кейс — исключение.

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

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

Место действия: Авито
Период работы над задачей: июнь — август 2023
Команда: UX-исследователь Алтана Кашкалдыкова, дизайнер Катя Шаньгина, я редактор.

Проблема: чем плохи нераспознанные платежи

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

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

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

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

Поиск решения: выясняем, почему ошибаются пользователи

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

В счёте на оплату указаны данные получателя и назначение платежа — их нужно вручную указать у себя в онлайн-банке

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

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

Нюанс в том, что мы ждём от людей правильных переводов, но сами правила в интерфейсе никак не объясняем.

Таким был экран со счётом раньше: в нём нет информации про назначение платежа, зато есть ещё ряд проблем

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

  • объяснить, как делать перевод;
  • дать лайфхаки вроде копирования текста из счёта;
  • не сломать метрики;
  • максимально сохранить интерфейс, ведь изменения в монолите — это долго, дорого и больно.

Из всех нераспознанных платежей 97,6% приходится на юрлиц — мы договорились, что пока запускаемся только на них и только на десктопе.

Решение: делаем чек-лист и собираем подсказки

Когда мы только обсуждали задачу, всем казалось, что достаточно где-то в первом абзаце добавить пару предложений с посылом «Заполняйте назначение платежа» — и задача закрыта. Но сразу вскрылись другие проблемы: хромает логика, фактические ошибки, вопросы не объясняют, что будет под ссылкой.

Первым делом я поделила наши знания о процессе на две группы:

  • основное — где взять счёт, как заполнить платёжку и когда придут деньги;
  • дополнительное — это то, без чего в принципе можно обойтись.

Из основной информации получилась ёмкая инструкция: делай раз-два-три, и деньги придут в течение дня. Она встала перед кнопкой, потому что так больше шансов на прочтение. Кстати, кнопку мы тоже решили поднять, раньше она терялась.

Из дополнительной информации я собрала что-то вроде FAQ. Два первых ответа были полностью новыми — там лайфхаки по быстрому заполнению реквизитов и объяснение, почему важно назначение платежа. И еще в два пункта упаковалась информация, которая уже была на экране.

Такой получилась первая итерация — этот текст я показала команде

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

Дальше мнения команды разделились. Вот что обсуждали:

  • каким делать баннер. Я и дизайнер предлагали лаконичный с одной главной причиной, а ребята из бизнеса — более исчерпывающий и со ссылкой на подробности;
  • какой использовать tone of voice. По одной из гипотез, этой страницей будут пользоваться бухгалтеры, у которых свой язык, как у юристов. Пусть он в чём-то канцелярский, но для них более привычный и понятный.

К счастью, в Авито такие споры решаются по-взрослому — через UX-исследования 😋 Мы сделали макеты с двумя версиями баннеров и проверили, какой из них выиграет и действительно ли наш tone of voice окажется непонятным.

Для UX-исследований мы взяли макеты с такой вводной частью

До сих пор мы фокусировались на интерфейсе, но пользователь наверняка закроет сайт Авито, чтобы перейти в онлайн-банк. Максимум перед глазами у него будет наш PDF-счёт с реквизитами. Поэтому мы решили и там поработать с подсказками, а сам счёт захватить на UX-исследования.

Одна из первых попыток доработать счёт — её мы взяли для UX-исследований

UX-исследования: получаем инсайты о пользователях

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

Вот что мы узнали:

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

Ещё лично меня одна респондентка поразила до глубины души. Она понимала, как важно копировать данные счёта в точности и даже прилежно это делала. А когда мы спросили, что именно она вставляет в поле «Назначение платежа», респондентка показала на… заголовок документа.

Доработки: разделяем аудиторию и фиксируем tone of voice

Исследование позволило нам определиться с финальным видом экрана: мы остановились на длинном баннере, а остальной текст оставили без изменений — он не вызвал проблем у пользователей.

Так изменился текст к концу проекта

А вот со счётом продолжили работу:

  • изменили заголовок на более нейтральный, чтобы не было соблазна скопировать его и вставить в поле;
  • скорректировали формулировки и подачу. Ориентиром здесь стал опыт коллег, которые много работают с бухгалтерией — это позволило не только опираться на знания аудитории, но и проводить мини-коридорки.

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

Так изменился PDF-счёт к концу проекта

Результат: кратно уменьшили число нераспознанных платежей

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

  • по замерам в первую неделю — на 30,42%;
  • по отношению к месяцу — на 55%.

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

Послесловие: что я поняла благодаря этому кейсу

Напоследок хочется поделиться парой мыслей:

  • Как и в этом кейсе, в реальной работе UX-редактора написание текста часто занимает меньшую долю времени. Остальное — разбираться в задаче, экспериментировать, участвовать в исследованиях, договариваться.
  • Иногда отстоять свое решение не получается — это нормально. В работе всегда должно быть место компромиссам, пока они не мешают пользователям.
  • Отдельный кайф — видеть результаты и посчитать их в цифрах/деньгах/трудозатратах команды. Пусть даже и не всегда их можно озвучить публично.


Анна Акулова для выставки достижений редакционного хозяйства — 2023.

 542   2 мес   UX   вызов главреда   кейс   портфолио

Как мы перевели оферту с юридического на человеческий. Кейс Ozon Marketplace

Даже компании с самым дружелюбным tone of voice часто упускают из виду, что cкучную ошибку 404 или рассылку с «Вы» и «Доброго времени суток» пользователи могут и не заметить, а вот самый ужас наступает, когда приходится открыть договор.

Но в Ozon редакция — лапушки-задроты. Мы решили протянуть нашим продавцам руку помощи даже там, где обычно это невозможно.

Место действия: Ozon Marketplace
Проект: договор, который заключает каждый продавец перед работой на площадке.
Период работы: с марта по июль 2021 включительно. Дальше просто правили и дополняли в соответствии со всеми изменениями оферты.
Команда: главный юрист маркетплейса Майя Лаврова, главред Оля Литченкова, я как редактор. Дизайнер, продакт-менеджеры и разработчики маркетплейса.

Что было раньше

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

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

Так выглядел договор в марте 2021 года. Естественно, когда нашлись ресурсы на его переделку, я не могла отказаться от удовольствия поучаствовать в проекте

Как работали над офертой

Решили действовать сразу в трех направлениях:

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

Шаг 1. Собрать референсы и подготовить дизайн

Первым делом мы стали смотреть, как показывают свои договоры другие компании. Нашлись два подходящих референса, на которые мы ориентировались: это лицензионное соглашение игры Cyberpunk и договор Бюро Горбунова.

Так выглядели сайты, которые мы отдали дизайнеру в качестве референсов

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

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

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

Шаг 2. Подготовить подсказки к договору

Когда новый текст договора был готов, у меня началась самая активная фаза. Как я работала:

  1. Проводила созвоны с главным юристом Майей, где мы прошлись почти по всем пунктам. Я старалась проговаривать каждый тезис, даже если вопросов по смыслу не было — нередко оказывалось, что сама я могла бы упустить нюансы. Чтобы досконально разобрать оферту, понадобилось 4-5 созвонов.
  2. Писала текст подсказок в гуглдокументе, стараясь передать весь смысл пункта, а кое-где даже давать дополнительные пояснения — в этом наше отличие от референсов, в которых информация передана только крупными мазками. Мы же сделали полноценный перевод, чтобы продавцы могли его читать вместо юридического текста.
  3. Согласовывала текст сначала с юристом, потом с главным редактором и руководителем отдела.
  4. Отдала готовый текст техническим специалистам. Они создали недостающие элементы по макету и подготовили страницу для дальнейшей работы в GitLab. После этого я проверяла верстку, дополняла текст и вносила все нужные изменения перед публикацией.
Работу вели в одном гуглдокументе, общались там же в комментариях. Все изменения я отмечала цветом, а кусочки для согласования — заливкой

Шаг 3. Опубликовать обновленную оферту

Пока технические специалисты занимались версткой, мы еще доводили подсказки до идеала. Поэтому получив верстку, я приступила к проверке:

  • обновила текст подсказок там, где он перестал быть актуальным;
  • проверила правильность верстки — например, где-то не оказалось списка, а где-то забыли зашить ссылки или они были битыми;
  • настроила навигацию на главной странице раздела — где можно открыть договор, любое приложение или регламент;
  • добавила предупреждение, что подсказки не имеют юридической силы;
  • поставила задачи на редиректы, чтобы по старому URL пользователи не видели ошибку 404 вместо договора и регламентов.

Все это делалось в GitLab. Это было мое первое столь тесное знакомство с сервисом — скажу честно, сначала было страшно. Но потом освоилась, узнала, что такое «коммиты» и «пайплайны» — настолько, что впоследствии GitLab стал постоянным рабочим инструментом наравне с гуглдоками. Надо добавить это в резюме :)

Как договор выглядит сейчас

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

Фрагмент договора на момент публикации этого кейса. Насколько я знаю, к концу 2022 года структура изменится, потому что страница объединит версии для продавцов из разных стран
Примеры подсказок к договору. Вместе с переводом писали дополнительную информацию. Например, в пункте про семплинг (п. 2.20) я решила объяснить, что вложения не повлияют на стоимость доставки — мы знали, что это одно из главных возражений
Анонс подсказок. Текст написала Оля Литченкова

Шаг 4. Сформировать правила подготовки архива

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

Держать договор в отдельном документе без подсказок неудобно, потому что можно запутаться в версиях + все новые правки придется вносить и туда, и на сайт. Значит, нужно снимать PDF прямо с сайта. Вот как я придумала действовать:

  • открывала инструменты разработчика в браузере и скрывала все подсказки. Нужно на вкладке Элементы найти div с нужным классом, а затем в стилях для него прописать display: none.
  • генерировала PDF с помощью расширения для Хрома Print Friendly & PDF. Просто скриншот страницы нам не подходил, потому что он не подготовлен для печати, сохраняет элементы интерфейса и не дает ссылку на сайт. А это расширение делает просто идеальные доки для нашей цели.
  • добавляла файл в хранилище и прописывала на странице архива суть каждого изменения и дату вступления в силу.

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

Что получилось в итоге

Это тот контентный проект, результаты которого очень легко посчитать в цифрах. Смотрите:

  • снизилось количество запросов в поддержку по теме договора на 26% уже в первый месяц внедрения подсказок. Дальше при постоянном росте количества продавцов на площадке контактность продолжала снижаться: например, в январе 2022 пользователей было уже в 2 раза больше, чем в июне 2021, при этом запросов по теме договора на 4% меньше.
  • Customer Satisfaction Index (CSI) страницы с договором лучший из всей Базы знаний. Это показатель, с помощью которого измеряют удовлетворенность клиентов, в нашем случае — оценки статей. У оферты он держится на уровне 80%, а его влияние на общий результат портала — 32%.

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

Вот такие отзывы на договор мы получаем от продавцов. Посмотреть кейс бренда и оригинал отзыва в Инстаграме


🔔 Подписывайтесь на телеграм-канал «Аня учится пилить проекты»

Собираю там примеры интерфейсов и делюсь размышлениями про работу UX-редактора → ссылка на канал

Чем занимается коммерческий редактор. Кейс Ozon Premium

Мне кажется, проблема работы в больших компаниях в том, что часто ты не замечаешь результата. Ну отправил ты 256 писем и написал 183 подсказки — но разве это повод сказать себе «Я молодец»? А ведь работа коммерческого редактора часто и складывается из писем, подсказок, скриптов для поддержки и кучи контента, который кажется незаметным в общем потоке.

Как я училась UX-писательству в Нетологии

Я тоже с этим столкнулась, но вовремя попала на воркшоп Иры Моториной, который она проводила для курса UX-писателей в Нетологии. Ира рассказывала, зачем нужно «отзумливать» проект и как это сделать. «Отзумливать» — значит подняться от отдельных экранов и подсказочек на уровень продукта, чтобы увидеть полную картину, оценить взаимосвязи и, что греха таить, разглядеть нестыковки, которые мы не заметили.

Примерно такую же процедуру можно провести и со своей работой. Вжух — и ты уже не просто написал каких-то 256 писем и 183 подсказки, а закрыл несколько важных участков в сценарии. В этой статье попробую провести такую терапевтичную работу на примере проекта Ozon Premium, а заодно собрать что-то вроде кейса и показать, чем вообще занимается коммерческий редактор в корпорации. Погнали!

Место действия: Ozon Marketplace
Проект: Ozon Premium — это программа лояльности для продавцов, у которых выгодные цены, быстрая доставка и высокие оценки от покупателей. Участники программы должны давать кэшбэк клиентам со специальной подпиской, а сами за это получают плюшки от маркетплейса.
Период работы: с апреля по июль 2021 включительно. Дальше уже идут рутинные задачки, которые будут за пределами этого кейса.
Команда: главред Оля Литченкова, я как редактор. Дизайнер, продакт-менеджеры и разработчики маркетплейса.

До запуска: тестируем программу и готовим интерфейс

FAQ. В апреле в редакцию пришла задача на первую версию скриптов. Программу только начали тестировать, и в поддержку приходили вопросы:

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

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

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

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

Такое письмо менеджеры стали отправлять продавцам, которых хотели пригласить в тестирование Premium-программы

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

Таким лендинг видели продавцы, которых мы звали в программу. По клику на «Подключиться» открывалось дополнительное соглашение
Остальные продавцы видели другой текст на первом экране. Еще мы предусмотрели три попапа с информацией о том, что будет дальше

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

UX-тексты. Здесь понадобится небольшое отступление. Стать Premium-продавцом могут только самые крутые, а крутость мы отслеживаем с помощью показателей качества, которые уже были у Ozon. Для программы установили порог, и все, кто хотя бы по какому-то показателю опустился ниже, получали штрафные баллы. Набрал больше пяти — вылетаешь из программы.

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

Фрагменты виджетов, которые продавцы видели в личном кабинете. На картинке отображены не все состояния + некоторые уже изменились спустя время

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

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

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

Запуск: прогреваем аудиторию и анонсируем программу

За две недели до старта программы Ozon устроил большой форум для предпринимателей. Там один из топ-менеджеров рассказал о новом проекте. Поэтому все дальнейшие активности были привязаны к этой дате — так мы стали постепенно прогревать аудиторию.

Прогревающие коммуникации. Первая была в день форума: тогда же PR-служба выпустила пресс-релиз, а мы — анонсы на свою аудиторию. На самом деле, это выглядело почти как спецоперация: анонсы должны были улететь сразу же после объявления, поэтому за выступлениями мы следили с особым вниманием.

Так впервые проанонсировали Premium-программу по email и в ТГ-канале

За несколько дней до официального старта снова напомнили о программе — на этот раз поделились статистикой за время тестирования. Публикация была только в телеграме.

Анонс. Здесь главным инфоповодом стали точные условия программы: мы еще оттачивали детали, поэтому точные значения анонсировали только вместе с широким запуском. Рассылка была обычная, а вот для Телеграм-поста главный редактор Оля придумала классную аналогию с Хогвартсом.

Посты в Телеграме

После запуска: оттачиваем детали и делимся новостями

Триггерные письма. Это сообщения, которые приходят автоматически по разным событиям. Я не особо понимаю, как они настраиваются, зато подготовила для них текст и верстку.

Мы выделили три события, для которых нужен триггер:

  • когда продавец набрал много штрафных баллов, и его пришлось исключить;
  • когда продавец сам решил выйти из программы — тогда мы подтверждаем, что все получилось, платить больше не нужно;
  • когда продавец впервые получил приглашение в программу — например, новичок или прокачал свои показатели. Без напоминания здесь не обойтись, потому что мы зовем в программу дважды в месяц (1 и 16 числа) — держать в голове даты и проверять баннеры не так-то просто.

Позже информацию о программе встроили еще и в онбординг для новых продавцов.

Так выглядели триггерные письма для тех, кого мы зовем и кого выгоняем из Premium

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

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

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

Самое классное — когда удавалось убить двух зайцев и встроить аналитику в что-то полезное само по себе. Ниже добавила пример такого письма.

Примеры коммуникаций с аналитикой: рассылка сделана в июле, а пост — аж в октябре

Что дальше

Я вела проект до конца 2021 года. Там было еще много коммуникаций, обновления в программе и куча всего интересного. Потом уже я целиком сфокусировалась на работе над UX и  Базой знаний, но это — совсем другая история :)


🔔 Подписывайтесь на телеграм-канал «Аня учится пилить проекты»

Собираю там примеры интерфейсов и делюсь размышлениями про работу UX-редактора → ссылка на канал

 405   2022   UX   кейс   портфолио   редактура

Как за год удалось увеличить базу подписчиков на 92% без магии и затрат

Однажды моя коллега Катя Данькина обратила внимание, что за год моей работы в Vigbo сильно выросла база подписчиков на блог. Я посмотрела старые отчеты и выяснила, что ее собирали с марта 2016. Когда я пришла в Vigbo (сентябрь 2019), в базе было 2 132 подписчика. Прошло чуть больше года, и сейчас там 4 612 адресов, из них 4 098 (+1 966) подписаны на рассылку. Для меня это стало открытием: ну я же вроде ничего такого не делаю, просто пишу себе статьи да отправляю рассылки. А потом я поняла, что все не так просто.

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

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

Шаг 1. Информативные темы письма

Чтобы побороться за внимание читателя в большом потоке писем у нас не так много инструментов:

  • тема письма,
  • прехедер,
  • поле «От кого».

Есть разные подходы к тому, какими они должны быть: кто-то пытается создать интригу, кто-то добавляет шутки и прибаутки — якобы так можно выделиться. Я предпочитаю быть скучной занудой и сразу обозначить, что будет в письме. Во-первых, если мы хотим, чтобы человек потратил на нас свое время, нужно показать пользу. А во-вторых, нам не нужны оправданные ожидания: ничего страшного, если письмо откроют не все подписчики, зато большинство из них перейдут на сайт, а не уйдут с воплями «Фигня какая-то, где тут кнопка для отписки».

Теперь я стала писать:

  • в поле «От кого» — Блог Vigbo. Писем от сервиса приходит много, поэтому было важно сразу выделить их в общем потоке. Теперь сразу понятно, что здесь про статьи и полезные плюшки, а не про обновления или продление подписки.
  • в теме письма — одна-две главные темы статей. Рассылка с дайжестом уходит раз в месяц, и к тому моменту я уже знала по отклику в соцсетях, что зашло больше всего.
  • в прехедере — важная информация, которая не вошла в тему. Удачный вариант — рассказать о нестандартных штуках вроде чек-листов и готовых шаблонов. Еще часто я в прехедере указывала количество статей. Так проще понять, что тебя ждет и стоит ли сейчас читать письмо.
Эволюция рассылки: теперь статьи не прячутся в прехедере, а выносятся сразу в тему

Шаг 2. Информативное слово редактора

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

Приветственное слово стало заметно длиннее, зато можно оценить, найдешь ли ты для себя что-то полезное

Шаг 3. Полезные материалы за подписку

Когда с косметическими улучшениями писем было покончено, возник вопрос: а что дальше? У нас в блоге есть удобная форма для подписки, где подписываются читатели. Но нам нужно было привлечь холодную аудиторию, которая еще не с нами. Я знаю только один способ — польза.

Мы в Vigbo любим разные полезности для клиентов. Например, дизайнеры делали шаблоны открыток, планеров и календарей. А еще мы делали чек-листы, чтобы клиентам было проще заполнять сайт. Они целиком продуктовые, поэтому отдаем их бесплатно. Я подумала, что такие штуки — отличный способ собрать базу. Только нужно сделать их так, чтобы они были полезны всем — даже не нашим клиентам.

В итоге получилось четыре лид-магнита:

  1. Чек-лист по запуску интернет-магазина. Это классический чек-лист, в котором кратко и без тонкостей расписаны 16 шагов до запуска своего онлайн-магазина. Опубликован 16 июня 2020, на 11 декабря 2020 скачали 753 раза.
  2. Чек-лист по съемке видеоурока. По сути, это конспект мастер-класса видеопродюсера Vigbo, который поможет новичку на всех этапах — от подготовки техники до монтажа. Опубликован 23 июня, скачали 311 раз.
  3. Чек-лист по работе с блогерами. Я бы назвала это анкетой: в чек-листе не только описаны этапы подготовки рекламы, но и оставлены места для записей по ходу. Опубликован 15 октября, скачали 553 раза.
  4. Чек-лист по оформлению сайта фотографа. И пусть он зашел хуже остальных, я особенно им довольна, потому что там собраны азы дизайнерской гигиены, которые помогут сделать крепкий сайт. Для него я внимательно читала вопросы клиентов, отбирала правила, советовалась с дизайнерами и придумывала иллюстрации (да, там есть иллюстрации — все по-взрослому!). Потом ребята смогут его использовать на марафонах по созданию сайта. Опубликован 19 ноября, скачали 216 раз.
Так мы присылали чек-лист: в блоге предупреждали, что подпишем на рассылку, а в письме поясняли, что дальше делать. Заодно в письмах анонсировали акции, вебинары или новые фичи платформы

Что дальше

Дальше предстояло сегментировать базу, ведь там очень разные клиенты: кто-то фотограф, кто-то предприниматель — им интересен разный контент. А еще неплохо было бы почистить базу и попробовать реанимировать тех, кто перестал читать письма.

Но это уже другая история.

 1224   2021   кейс   портфолио   редактура

Кейс: онлайн-интенсив по таргету для фотографов

Последний год я работала в компании Vigbo — это конструктор сайтов для фотографов и творческих предпринимателей. Мы помогаем превратить хобби в бизнес.

Однажды маркетолог Катя Данькина увидела на форуме Mywed ветку, где фотографы обсуждали продвижение в Инстаграме. И мы вспомнили, что самый топовый запрос от наших клиентов-фотографов — расскажите в статьях, постах или вебинарах про таргет и привлечение клиентов. Стали думать, какую активность мы можем провести, чтобы помочь фотографам разобраться с рекламой в Инстаграме. Решили запустить серию бесплатных вебинаров. И понеслось 🚀

Я вебинары не вела, зато активно работала за кадром. Вместе с Катей мы составляли программу, смотрели тестовые записи и помогали спикерам подготовиться к вебинарам. А потом я написала тексты для анонсов и коммуникации с участниками, спроектировала лендинг, отредактировала презентации, подготовила раздаточные материалы и даже настроила чат-бота. В этой статье я расскажу о работе над проектом и поделюсь какими-то наблюдениями. Спойлер: будет много скриншотов.

Такой отзыв одна из участниц интенсива написала в директ приглашенному спикеру Жене Светлой

Формат

Раньше в Vigbo были марафоны с прямыми эфирами в Инстаграме, но в этом случае формат показался не самым удачным — в Инстаграме не так много инструментов для взаимодействия с аудиторией. Поэтому остановились на вебинарах, которые мы проводили через Youtube.

Интенсив длился 2 недели — сначала получилось 8 вебинаров, но потом по просьбам участников сделали еще один бонусный вебинар с разбором аккаунтов.

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

Промостраница

Чтобы участники могли изучить программу и записаться на интенсив, сделали лендинг. Я отвечала за текст. Ничего сверхестественного придумывать не стала и сделала стандартную структуру: обложка, выгоды, подробная программа, а в конце — блок с фотографиями спикеров.

Сразу оговорюсь: на первый взгляд имена спикеров могут показаться неизвестными и вроде бы бессмысленно ставить фото. Но мы продвигали интенсив только среди своей аудитории, поэтому все четыре специалиста Vigbo так или иначе знакомы — кто-то ведет эфиры в Инстаграме, кто-то проводит консультации, а кто-то выступал с вебинарами. Приглашенный спикер Женя Светлая тоже многим была знакома.

Я сделала прототип лендинга в Фигме, а наши дизайнеры собрали красивую страницу на конструкторе Vigbo. На мой вкус получилось мелковато, но спорить уже не стала

Продвижение

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

Анонсировали всего за неделю: за это время отправили рассылку по своей базе фотографов, сделали пост в блоге и на форуме Mywed, а еще рассказывали об интенсиве в соцсетях. Я подготовила тексты для постов, блога и рассылок. А ребята-спикеры записали видео для сторис. Там каждый рассказал о том, что будет на его вебинаре. Мы публиковали эти сторис всю неделю перед интенсивом.

Так мы рассказали об интенсиве в рассылках и блоге
А таким был анонс в соцсетях

Регистрация

Регистрация участников через email в Vigbo отработана четко: так регистрировали на марафоны, вебинары и мастермайнды. Но так много людей не доходит — у кого-то письма попадают в спам, а кто-то регистрировался на личную почту, а под рукой рабочая... Поэтому мы решили протестировать новый для себя инструмент — ботов в Телеграме и ВКонтакте.

Полностью отказаться от email мы пока не решились. Сделали так: на лендинг добавили стандартную форму для подписки. Когда человек оставлял почту и нажимал «Записаться», его адрес попадал в наш список рассылки, а ему открывалась страница success с кнопками для подписки на бот. В следующий раз решили делать напрямую в ботах, тем более что там тоже можно собрать email-адреса.

Изначально мы планировали для настройки бота обратиться к фрилансеру. Но им нужно было четко прописать всю цепочку целиком, а мы этого сделать не могли. Мы запускали не автовебинар, а живой интенсив — все быстро менялось и корректировалось на ходу. Поэтому я попробовала сделать бота сама на платформе BotHelp. У меня получился простой линейный бот в несколько сообщений и с опросом. Дальше основную коммуникацию я построила на основе рассылок — так напоминала о вебинарах, отправляла бонусы и записи эфиров.

Главный плюс рассылок по сравнению с прописанной цепочкой сообщений — гибкость. Цепочку нельзя редактировать, когда бот уже запущен, иначе все изменения будут работать только на новых подписчиков. А рассылки я планировала по ходу интенсива.

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

Ход интенсива

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

Рабочая тетрадь и чек-листы. Информации на интенсиве так много, что мы хотели помочь в ней разобраться. Чтобы слушать вебинары было проще, сделали рабочую тетрадь — она приходила сразу после регистрации на почту и в бот. А чтобы потом было удобно внедрять все в работу, в конце каждой недели отправляли шпаргалки.

Вот что у нас получилось:

Пример страниц из рабочей тетради

Напоминания о вебинарах. Было бы глупо надеяться, что люди будут сами помнить о каждом эфире. Поэтому мы присылали напоминания по электронной почте и в боте. Утром рассказывали о вебинаре подробно: тема, спикер и примерный план. Потом кратко напоминали за 15 минут, а в боте — присылали еще одно сообщение на старте.

Как мы и ожидали, большая часть людей приходила из бота, хотя напоминание в 10 утра больше людей открывали именно на почте.

Напоминания о вебинарах на почту и в бот

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

С помощью этой маленькой и в общем-то простой детали мы решили сразу две задачи:

  • Напомнили о бренде и связали все вебинары в единую систему. Что бы ни было на экране, полоса помогала сохранить целостность. А еще там был логотип Vigbo — мы надеялись, что новичкам он примелькается и запомнится.
  • Скрыли элементы интерфейса. Для многих тем нужно было открывать вкладки в браузере. Участникам ни к чему видеть адресную строку, закладки и расширения. Такая полоса сделала картинку более эстетичной.
Такими были все вебинары: брендированная инфополоса, спикер в кружке и презентации в едином стиле

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

Мы решили использовать похожую механику, но адаптировать ее под наш формат. Я настроила в боте автоматизацию: когда участник писал боту слово ВОПРОС, ему приходила ссылка на гугл-форму для сбора вопросов. В конце интенсива мы прислали всем подробные ответы со ссылками и иллюстрациями.

Скриншоты бота: слева — ответ бота с формой для сбора вопроса, справа — финальная рассылка с материалами, в том числе нашими ответами

Результаты

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

  1. Интенсив помог решиться многим фотографам на запуск первой рекламной кампании. Мы хотели показать, что пусть рекламный кабинет Фейсбука кажется очень сложным, каждому по силам в нем разобраться. Судя по отзывам, нам это удалось.
  1. Материалы интенсива лягут в основу полноценного курса по таргетированной рекламе для фотографов. Команда Vigbo уже начинает работу над программой.
  1. Появилось много контента, который можно бесконечно переупаковывать в другие форматы. Например, уже готовые чек-листы можно отдавать за подписку всем желающим, видео с вебинаров нарезать в короткие видеоуроки, что-то расшифровать и оформить в статью — простор для редактора.
  1. Мы кайфанули. Для всех интенсив стал классным способом на какое-то время уйти от рутины и встряхнуться после всех волнений, которые доставил 2020 год. Все настолько вдохновились проектом, что были готовы делать новые вебинары: так у нас появился бонусный девятый вебинар и чуть не появился десятый 💪

А лично я поняла, что мне близки крутые образовательные проекты. И я с большим удовольствием снова приму участие в чем-то подобном.

Куча сухих цифр и бизнес-результатов из итоговой презентации для команды
 1496   2020   кейс   портфолио

«Билборд Малевича». Как я придумывала наружную рекламу

Для студентов второй ступени Школы редакторов Максим Ильяхов объявил конкурс. Расскажу о том, как я делала свою работу.

Условия конкурса

3 февраля 2020 года в художественной галерее им. Аси Челован открывается выставка о русском авангарде в изобразительном искусстве. Будут выставлены репродукции Малевича, Кандинского, Татлина и других художников. Будут картины, чертежи, плакаты. Выставка по-нормальному объяснит гостям, в чем крутость «Черного квадрата» и всего прочего абстракционизма и супрематизма. Исторический контекст, народные настроения, революция и всё такое.

Для рекламы выставки бюро закупает в Москве 300 билбордов размером 6 × 3 метра. Билборды будут приглашать на выставку.

Место: Большая Новодмитровская, 36, культурный центр «Куб»
Время: 12:00—22:00, пн—пт
Даты: 3—14 февраля
Билеты и запись на экскурсии: chelovan.ru

Задача

Спроектируйте макеты билбордов, которые будут привлекать людей на выставку. Учтите, что билборды будут установлены на оживленных улицах и проспектах. Результат выложите в виде картинок, на которых будет виден макет, наложенный на изображение билборда в городской среде.

Рассуждения

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

Особенности верстки. По условиям билборды будут установлены на оживленных улицах города. Средняя скорость движения автомобиля по городу примерно 60-70 км/ч. Значит, у пассажира есть всего несколько секунд, чтобы рассмотреть и прочитать информацию, а у водителя и того меньше потому, что ему нужно следить за дорогой.

Примерно так водитель видит среднестатистический билборд. Если текста много и нет контраста, прочитать что-то непросто

Из этого следует, что на билборде не стоит:

  • Писать длинный текст, потому что его невозможно прочитать.
  • Использовать мелкий шрифт и графику.
  • Делать сложный дизайн.

Мне нужно сделать простое сообщение о том, что это за выставка. И придумать простой визуальный образ, который создаст настроение и не будет отвлекать от текста.

Расположение. Не все места одинаково удачны для установки билборда. Во время движения водитель обычно смотрит на дорогу и не отвлекается на всякую ерунду. Соответственно, мне нужно:

  • привлечь внимание пешеходов,
  • установить билборды там, где водителям придется остановиться.

Для этого я тщательно отбираю мокапы. Мой билборд должен быть рядом с тротуаром (там его будут видеть пешеходы), на перекрестках и перед светофором (там водитель обязательно затормозит).

Идея. К сожалению или к счастью, основная масса населения не понимает современные течения искусства. Нам ближе реализм, где стол — это стол, а чашка — это чашка. Поэтому основным посылом я выбрала мысль, что «выставка все объяснит». Под «все» я понимаю идеи авангардизма, причины такого восхищения и материальной ценности картин, влияние на все искусство. Решила превратить это в слоганы.

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

Ход работы

Изначально я представляла билборд примерно таким:

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

Я долго двигала, меняла и перекрашивала элементы и в итоге пришла к такому варианту:

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

И тут я поместила макет на мокап. Сразу видна проблема:

Издалека мой красивый листик кажется странным пятном. Невольно думаешь: это так задумано или баннер грязный? Уберем листик:

Мужик становится чужеродным элементом. Почистим:

Немного скучновато, но ничего не мешает читать. Оставляем.

По условиям конкурса в городе будет установлено 300 билбордов. Есть шанс, что человек увидит несколько наших билбордов. Поэтому делаю несколько макетов в разными слоганами. В них играем на разных чувствах:

  • Социальное — подчеркиваем влияние авангардистов на все искусство.
  • Прагматика — обещаем ответ на главный вопрос «И почему эта мазня так дорого стоит»?
  • Эмоция — вызываем интерес и любопытство с помощью провокационных вопросов вроде «Умел ли Малевич рисовать».

В результате у меня получилась серия из 4 билбордов:

Результат

Задачей было разжечь интерес читателя к выставке — достаточный, чтобы захотелось зайти на сайт. Максим Ильяхов оценивал решение этой задачи по 5 критериям:

  • Полезное действие выставки. Почему человек захочет на нее попасть? Каково число людей, которые захотят попасть, исходя из выбранного вами полезного действия? В ответ на какой стимул мы соберем больше людей — на стимул «деньги» или на стимул «стать более культурным»? Чем более попсовый и массовый мотив вы использовали в подаче рассылки, тем лучше.
  • Ясность. Нужно ли расшифровывать плакат? Есть ли там ребусы, мелкие элементы, нужно ли в него вглядываться? Так как это биллборд, лучше, когда всё ясно и читается издалека. Адрес сайта должен быть большим и мощным.
  • Использование формата. Биллборд висит в городской среде, вокруг что-то происходит. Биллбордов может быть несколько, это может быть серия. Используете ли вы эти возможности, чтобы лучше решить задачу? Серия биллбордов лучше, чем один. В идеале — чтобы биллборд как-то взаимодействовал со средой (этого не было ни у кого).
  • Красота. Красивое лучше некрасивого. Так как мы работаем с картинами, полезно было использовать их красоту на пользу. Если есть красивый супрематизм, его нужно было использовать как элемент дизайна плаката.
  • Шок-фактор. Иногда можно нарушить все правила и сделать просто полную дурь, и это запомнится и сработает.

Я считаю, что неплохо справилась с задачей:

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

Проект: страница Лаборатории поисковой аналитики

У нас в «Ашманов и партнеры» есть много крутых собственных технологий. На рынке таких больше нет, и это наше преимущество. Например, есть Лаборатория поисковой аналитики. Она помогает давать рекомендации, основанные на научном подходе к продвижению. Это круто, но никому непонятно, как она работает. Откуда берутся данные? В чем польза для клиента? Нужно об этом рассказать.

На сайте была страница, посвященная Лаборатории. Но она шаблонная и скучная.

Исходная версия страницы

Мы решили сделать редизайн, рассказать о всех направлениях работы, сделать страницу визуально привлекательнее и дать «пощупать» результаты.

Что такое Лаборатория

Лаборатория поисковой аналитики — это несколько технологических разработок, которые позволяют «расшифровывать» поисковые алгоритмы.

Алгоритмы ранжирования постоянно усложняются и оперируют сотнями факторов. К тому же, сейчас поисковой выдачей управляет самообучающаяся машина. Поэтому даже поисковики не знают наверняка, как на самом деле устроено ранжирование.

Эксперты Лаборатории действуют от обратного: они анализируют сайты, которые уже попали в топ. Смотрят, какими характеристиками они обладают и чем отличаются друг от друга. Сравнивают страницы в топе между собой и со страницами, которые в топ не попали. На основе полученных данных выясняют, какие параметры могут влиять на ранжирование.

Гарантий Лаборатория не дает: наличие статистически значимой связи между значением параметра и попаданием в топ или позицией еще не означает, что Яндекс или Google прямо учитывает данный параметр при ранжировании. Но полученные данные позволяют понять, в каком направлении двигаться.

Страница — для маркетологов и SEO-оптимизаторов

Этой страницей мы хотели решить три задачи:

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

Моя задача — подготовить контент и вести проект

Я в «Ашманов и партнеры» занималась сайтом: писала тексты, создавала страницы, ставила задачи на дизайн и разработку. В этот раз все было так:

  1. Я продумала структуру страницы. Для этого собрала всю информацию: изучила отчеты и опубликованные интервью, побеседовала со специалистами Лаборатории, плзнакомилась с интерфейсом. Потом собрала из этого черновик и согласовала: в первую очередь с руководителем Лаборатории, а с нашей стороны — с исполнительным директором.
  2. Поставила задачу на прототип. Мы хотели, чтобы страница выделялась на общем фоне и имела интерактивные элементы, но при этом оставалась в рамках фирменного стиля. Я не специалист по интерфейсам, поэтому обратилась к профессионалам. В процессе обсуждения скорректировала первоначальную структуру.
  3. Поставила задачи на дизайн и верстку. Следила, чтобы все было правильно: дизайн соответствовал логике текста, верстка была точно по отрисованному макету, во всех браузерах страница отображалась верно и не было ошибок. Когда макеты готовы, показала их руководителю Лаборатории.
  4. Подготовила ТЗ на разработку. Чтобы удобно было размещать контент, а некоторые блоки использовать на страницах других технологий, нужно продумать компоненты и решить, что добавлять в шаблон, а что делать статикой. Потом окончательно проверить, что все работает, как запланировано.
  5. Написала окончательный текст и подобрала иллюстрации. Заполнила весь контент на тестовом домене и окончательно согласовала. Проверила страницу на боевом сайте.

Собираю информацию

Довольно долго мы не знали, с какой стороны подойти к задаче. «Под капотом» Лаборатории сложные технологии, основанные на методах математической статистики. Как это все работает, хорошо знает только руководитель Лаборатории Михаил Волович. Первым делом я обратилась к нему. Михаил посоветовал мне изучить аналитические отчеты, которые Лаборатория готовит с ноября 2017 года.

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

Введение к отчету за 2018 год

На рынке о Лаборатории знают благодаря этим отчетам. Они публикуются в свободном доступе, тиражируются и выдержки из них перепечатываются в отраслевых СМИ. Но еще Лаборатория — это внутренний сервис, который помогает продвигать сайты наших клиентов. Это приоритетное направление, поэтому о нем нужно рассказать побольше.

Уже несколько лет Лаборатория делает бесплатные аудиты сайтов для участников конференции Optimization. Они автоматические: специалисты загружают в систему запросы и страницы сайта, а получают документ с рекомендациями. Результаты обсуждают на мастер-классе. Оказалось, что такой же документ генерируют оптимизаторы, когда работают с сайтами клиентов. Я попросила несколько примеров, чтобы их изучить.

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

Интерфейс внутреннего сервиса, актуальный на февраль 2019 года

Так я узнала, что внутренний сервис экономит оптимизаторам много времени:

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

На самом деле, всю эту работу можно сделать и без Лаборатории. Но этим придется заниматься вручную, а это долго и ненадежно — человек всегда может что-то пропустить.

Готовлю структуру страницы

Когда я получила общее представление о возможностях Лаборатории, выстроилась логика страницы:

  • описание работы сервиса (как работает Лаборатория) и главный вывод, зачем это все нужно
  • описание направлений работы — исследования, аналитика для оптимизатора, отчеты для клиента, задания для копирайтеров. В каждом блоке объяснение, иллюстрация и практическое применение со ссылкой на другой раздел сайта.
  • факты о Лаборатории — как давно существует, сколько параметров отслеживает. Ссылка на интервью с основателем.
  • рейтинг самых главных параметров для поисковых систем, основанный на данных из последнего отчета. На каждый параметр можно кликнуть и узнать подробности. Польза и элемент интерактивности :)
  • все отчеты Лаборатории, которые можно скачать за подписку на рассылку.

Такая структура легла в основу прототипа.

В процессе работы над дизайном мы внесли изменения:

  • полезное действие технологии вынесли на самое заметное место — под заголовком.
  • по просьбе Михаила в блок «Что мы делаем» добавили информацию о сервисах: на данных Лаборатории основаны «Тургенев» и AnalyzeThis.ru.
  • добавили FAQ. Текст этого блока взят из отчета «Факторы ранжирования — 2019. Финансы».

Что дальше

Самое долгое — подготовить контент. Когда готов макет, начинается рутина: поставить задачу верстальщикам, все проверить, передать задачу дальше. Параллельно с версткой и разработкой я редачила текст.

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

7 августа мы выложили готовую страницу на боевом сайте. Сейчас мы накапливаем данные и отслеживаем аналитику. Возможно, в будущем коллеги внесут в нее изменения.

Готовая страница, актуальная на август 2019 года