Как компания RealtimeBoard использует Setka Editor

Руководитель направления бренд-маркетинга Егор Коробейников — о том, как отличаться от большинства блогов технологических компаний

Аня Бугаева

Автор

аЛЕКСЕЙ Гущин

Фотограф

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

RealtimeBlog — блог компании, которая делает сервис RealtimeBoard и имеет несколько офисов: в России, США, Голландии и Австралии. Руководитель направления бренд-маркетинга компании Егор Коробейников рассказал о результатах внедрения Setka Editor и дизайне блога как о способе постоянно удивлять читателя.


Елена Колобаева

продакт-менеджер Setka Editor

Мы всегда рады комментариям наших пользователей Setka. Наша команда прислушивается ко всем замечаниям и постоянно улучшает продукт на основе фидбэка клиентов. Именно поэтому мы публикуем честные кейсы — в них компании, использующие Setka, честно рассказывают о преимуществах и недостатках наших инструментов. Если вы хотите рассказать о своем опыте использования Setka Editor или Setka Workflow, пожалуйста, свяжитесь с нами: hello@setka.io.


ДАТА ОСНОВАНИЯ

с марта 2018-го в новом дизайне

посещаемость

15 тыс. уникальных посетителей в месяц

Команда

5 человек, не включая фрилансеров

Город

Пермь, Лос-Анджелес, Амстердам

Егор Коробейников

руководитель направления бренд-маркетинга

Идея проекта

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

Долгое время у нас не доходили руки до блога: он существовал как бы «по умолчанию», но мы не до конца понимали, какие преимущества можем получить от работы над ним. Одна из причин в том, что первые несколько лет существования продукта мы искали нишу и пытались понять, каким образом клиенты будут использовать RealtimeBoard чаще всего. Например, шесть лет назад такой продуктовой категории, как «online whiteboard», на рынке просто не существовало.

К настоящему моменту компания подросла и поменяла видение того, что мы должны делать, каким образом конкурировать с другими решениями в нашей продуктовой категории (например, с похожими сервисами от Google и Microsoft) и как рассказывать о себе. Блог становится важной частью маркетинговой стратегии и способом объяснить, что RealtimeBoard — это не просто наклеивание цифровых стикеров на цифровую доску.

Мы делаем интервью с лидерами мнений и специалистами в области UX-дизайна, продуктовой разработки, маркетинга и дизайна в целом. Также у нас есть сугубо прикладные материалы о том, как пошагово делать те или иные вещи, например, проводить ежедневные 15-минутные скрамы или планировать спринты. Конечно, мы пишем и о том, как клиенты RealtimeBoard преодолевают вызовы, стоящие перед распределенными командами.

Пока у блога небольшая команда, плюс мы работаем с фрилансерами: авторами и фотографами. У нас есть шеф-редактор: ее задача — продюсировать материалы (придумывать идею, структуру, подачу) и руководить фрилансерами. Арт-директор следит за тем, чтобы стиль блога соответствовал гайдлайнам, и создает дизайн для объемных и сложных материалов, например, фичеров и клиентских историй. Остальные материалы блога верстает веб-дизайнер, который также делает для нас классные видео. Отдельный специалист занимается дистрибуцией контента.

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


СОВЕТ ДЛЯ начинающих

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

Фирменный стиль

Мне всегда нравилось все, что делает в области эдиториал-дизайна Сергей Родионов, арт-директор Setka. Когда мы плотно взялись за блог и решили, что верстать будем в Setka Editor, мы предложили ему сделать дизайн для RealtimeBlog.

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

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

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

Для нас стиль — это некая эстетика, цвета, шрифты, подача, акценты: то, что входит в понятие «look and feel». При этом для каждого типа материалов у нас, можно сказать, отдельный фирменный стиль. Мы хотим постоянно удивлять и развлекать читателя. Если мы будем верстать по одним шаблонам, это наскучит людям, и нам в любом случае придется все перепридумывать заново.

Setka blog

Как использовать шрифтовые пары: простые советы для медиа

Процесс

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

Наши дизайнеры достаточно быстро разобрались в редакторе — результат можно увидеть на сайте. Для advanced-дизайнера возможности Setka Editor ограничены лишь собственной фантазией, по крайней мере, наш веб-дизайнер не сталкивался с какими-то серьезными ограничениями редактора. Все, что было задумано, удавалось сверстать. Если и возникали какие-то трудности, на помощь приходили разработчики, и все решалось кастомным CSS.

Кастомный дизайн помогает нам привлечь внимание читателя, произвести на него впечатление. Часто мы делаем целые посты с необычной версткой и авторскими иллюстрациями, например, «How to use neuroscience insights in design». Иногда мы задаем кастомный CSS для отдельных элементов — например, в статье «How to deal with challenges of Agile transformation» мы сделали «хайлайт» для текста. В спецпроекте «Reshaping the future of teamwork» мы использовали отдельный плагин, чтобы читатели смогли «твитнуть» выноски с интересными фактами.

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

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

Setka blog

Фотография в медиа

Лайфхаки

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

В работе нам сильно помогает и собственный сервис: дизайнер выгружает макет статьи на онлайн-доску, и участники нашей распределенной команды добавляют комментарии прямо туда. Это позволяет нам быстро все обсудить, не созваниваясь. Плюс к этому наша доска интегрирована со Sketch: как только дизайнер меняет что-то в макете, тот автоматически обновляется в RealtimeBoard. Второй дизайнер, который находится в другом городе, просто скачивает готовый макет и верстает в Setka Editor.

Мне кажется, лайфхаки нужны, когда инструмент тебе неудобен, но других попросту нет и тебе приходится придумывать какие-то «костыли», чтобы упростить работу. Когда нам чего-то не хватает в Setka Editor, я пишу продакт-менеджеру Лене Колобаевой, и она помогает найти нестандартные решения для наших задач.

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

Посмотрите все возможности Setka Editor

Цели и планы

Сейчас перед блогом стоит несколько целей. Разумеется, нам нужно растить аудиторию: мы планируем к концу года увеличить посещаемость с 15 тыс. уникальных посетителей в месяц до 100 тыс. Почему мы вообще решили, что она должна расти?

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

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

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

Сергей Родионов

арт-директор Setka

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

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

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

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