Интервью с основателем сервиса по подбору HTML-цветов с доходом в $1,300 через Adsense

17 декабря Spryt опубликовал твит:

С ссылкой на статью HTML Color Codes. Я не стал читать весь текст и сразу отдал его на перевод, подумав, что речь пойдет о том, как они подбирали цветовую палитру на сайте и как конкретно улучшали юзабилити сайта, чтобы увеличить доход с Adsense, но увы, это оказалось не так. Это больше интервью о том, что нужно любить свой проект и т. п. Первая часть интервью довольно скучная, где-то с середины читать уже интересней. Никаких секретов нет, просто история одного проекта. Может будет кому-нибудь интересно. 

Веб-дизайнеры Dixon & Moe делятся опытом по выводу своего проекта, разработанного с использованием свободно распространяемого программного обеспечения и инструментов с открытым исходным кодом, на ежемесячный доход в $1300.

Привет, ребята! Расскажите нам о себе, и над чем вы сейчас работаете?

Наш совместный проект HTML Color Codes, позволяет легко найти цветовые HTML-коды с помощью палитры или таблицы цветов как в Material Design. Цветовые коды технически очень похожи на ряд других веб-инструментов, но – и это очень важно – их отличительная особенность – интенсивный акцент на дизайне.

Снимок экрана HTML Color Codes

Кто такие Dixon & Moe? Мы – лучшие друзья, некоторое время назад окончили факультет архитектуры Массачусетского технологического института (MIT). Несмотря на то, что мы долгих 8 лет посвятили получению архитектурного образования, нас с самого начала привлекали IT-технологии, создание сайтов на базе jQuery и Flash.

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

С чего вы начинали свой бизнес?

Когда мы задумали создать Dixon & Moe, у нас не было никакой поддержки или больших денег. Вооружившись терпением и упорством, с помощью рассылок по электронной почте мы смогли получить несколько внештатных проектов, реализация которых должна была помочь нам оплачивать счета. Вскоре убедившись, что сотрудничество с удаленными клиентами полно взлетов и падений, мы начали поиск альтернативных методов заработка. Огромную помощь в освоении лабиринтов ИТ-технологий и разработке цифровых продуктов нам оказали инди-хакеры (независимые программисты), имена которых мы упоминали ранее. Среди них 37signals, Patio11, Wildbit, NeedWant.

Снимок экрана сайта HTMLArrows.com

Начиная свою деятельность в качестве внештатных разработчиков, нам пришлось использовать множество бесплатных веб-инструментов (мы и сейчас не пренебрегаем этим), некоторые из них были ужасно сырыми или уже устаревшими. Во время пауз в работе с клиентами мы решили восстановить один из наших наиболее посещаемых сайтов HTML Symbol Code. Этот ресурс предоставляет доступ к кодам таких классных символов как эти ☃☂. Через две недели мы запустили HTMLArrows.com, и, проведя небольшую маркетинговую работу, меньше чем за два месяца вывели сайт на первую позицию в поиске Google по запросу «HTML Arrows». Было очень приятно, что проект был по достоинству оценен, и это стало для нас первым шагом на пути к реализации масштабной идеи.

Анализируя ключевые слова для HTML Arrows, мы обнаружили, что еще больший потенциал имеет поисковая фраза «html color codes». Как дизайнеры, использующие редактор Sketch и другое программное обеспечение для создания цветной графики, мы были немного ошеломлены популярностью этого ключевого слова, но перед почти 5000 запросами в день устоять, согласитесь, невозможно.

Комментарий Аллена Кортленда (члена сообщества инди-хакеров):

Совпадение целей при решении частной проблемы с потребностями рынка позволило получить неплохие преимущества для достижения успеха (в данном случае – процесс исследования ключевых слов).

После некоторых предварительных согласований мы узнали, что домен htmlcolorcodes.com был на тот момент свободен и договорились с владельцем о его приобретении всего за $600! И это было большой удачей, так как уже существовал действующий проект html-color-codes.info.

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

Как вам удалось выделить два месяца на разработку и запуск проекта? И из каких источников он финансировался?

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

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

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

Технологический стек: Middleman, ColorJoe и ColorHarmony

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

В качестве хостинга мы предпочли AWS с его сервисами S3 и CloudFront (читай: дешево и надежно). Вне интеграции с Google Adsense, сайт грузится молниеносно, что неплохо способствует повышению его рейтинга.

Но мы не можем не признать, что стоим на плечах гигантов, предоставляющих программное обеспечение с открытым исходным кодом. Основные элементы Color Codes базируются на ColorJoe.js, для реализации отдельных функций используется ColorHarmony.js от skratchdot и One Color от разработчиков one.com.

Что вам помогло в продвижении Color Codes?

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

Естественный приток трафика не смог бы поднять Color Codes на вершины рейтинга, поэтому нужно было придумать способ построения обратного канала.

Мы задействовали профессиональные ресурсы (Awwwards, CSS Design Awards, Site Inspire), новостной компонент (Hacker News, Designer News, Reddit, Product Hunt), а также социальные сети (Twitter, Facebook, Google Plus, Pinterest).

Комментарий Аллена Кортленда (члена сообщества инди-хакеров):

Я использую подобную стратегию для продвижения своих новых проектов.

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

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

Диаграмма роста трафика: сентябрь 2015 — декабрь 2016

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

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

Из чего складывается ваш доход?

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

Диаграмма роста прибыли: март — ноябрь 2016

На первых порах отдача была невелика, но со временем доход стал более ощутимым. Сегодня наш банковский счет ежемесячно пополняется на $1,300, без всяких усилий с нашей стороны. Конечно, почивать на лаврах пока рано, но это определенно начало успеха. Мы знаем, что существует много других возможностей для монетизации, просто у нас пока не было времени для дальнейших экспериментов.

Каковы ваши цели на будущее?

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

Ближайшие планы – это возвращение к нашим корням, то есть работа над SaaS-проектом Monograph, который сфокусирован на сферу промышленной архитектуры и уже приносит ежемесячную прибыль в $350.

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

Если бы вам пришлось запускать свой проект заново, что бы вы сделали по-другому?

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

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

На первом этапе мы создавали автономный продукт, который, согласно его идентификационным данным, предназначался для ограниченного круга пользователей. Хотя это сработало для той аудитории, на которую мы изначально ориентировались, произошло ограничение наших возможностей распространять продукт за рамки ранее очерченного рынка. Делая это снова, можно было бы создать, например, ряд свободных инструментов анализа прототипа цветовых кодов для веб-дизайнеров, что стало бы либо отдельным экспериментальным продуктом или же набором дополнительных функций, объединенных под общим брендом. Сегодня так сложилось, что Color Codes – всего лишь инструмент для идентификации имени веб-цвета, и ничего с этим не поделаешь.

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

В конечном итоге мы затратили почти 9 месяцев на реализацию проекта, что, исходя из уровня наших доходов от фриланса в то время, обошлось в сумму около $36,000. С нынешней ежемесячной прибылью $1,300 окупаемость займет примерно 28 месяцев. Следует также учитывать, что разрабатывая Color Codes, мы одновременно трудились над другими проектами для удаленных клиентов, поэтому соотношение 1:1 нельзя считать абсолютно точным для оценки приложенных нами усилий.

Что позволило вывести Color Codes на высокие позиции, на которых сайт находится сегодня?

Существует ряд бесплатных инструментов, которые мы использовали при разработке Color Codes, многие из них полезны для отслеживания эффективности SEO и ключевых слов. Google’s Keyword Planner Tool стал основополагающим для обнаружения поисковой фразы «html color codes» и помог нам в составлении других более длинных ключевых запросов, которые также могли быть целевыми. Инструмент не требует кредитной карты (то есть денег с вас не возьмут), но он дорогого стоит!

Google Analytics отражает статистику посещаемости в реальном времени, но с увеличением пользовательской активности, мы нашли его полезным для отслеживания обратных ссылок, которые мы получаем с других сайтов (через вкладку «Источники трафика» > Medium tab).

Инструменты Google для веб-мастеров (Google Webmaster Tools) – это еще один ресурс, который мы активно использовали на начальных этапах, для того чтобы изучить эффективность ключевых фраз, которые потенциально нуждались в оптимизации. У Google также есть и другие полезные инструменты, например, Structured Data Testing Tool (проверка структурированных данных) для тестирования семантической разметки посредством ресурса Schema.org (если вы еще не используете эту возможность, настоятельно советуем начать).

Диаграмма роста прибыли: март — ноябрь 2016

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

Какой совет вы могли бы дать новичкам в сфере интернет-бизнеса?

Начать с малого.

Эми Хоу и Джейсон Фрайд уже рассказали об этом подробно, но когда вы только начинаете, нужно иметь за спиной несколько маленьких побед. Если вы по натуре творец, а не бизнесмен, то не всегда получается набирать обороты и учиться делать прибыль. Вам нужно начать с небольшого проекта с монетизацией, который создаст привязанность к продукту. Нам искренне жаль, что раньше у нас не было этого совета, и мы полагаем, что нам было бы проще принять факт, что…

Предпринимательство дано не каждому.
Color Codes – наша пятая попытка создать цифровой продукт, и на настоящий момент она – самая успешная. Конечно, главным образом от остальных 4 продуктов нас удерживает то, что «мы многому научились за это время», но нам всё же жаль, что мы не делали больше попыток «сделать то, что люди хотят получить». Можно сказать, что это всегда сложно. Предпринимательство (особенно в самом начале) – это монотонность, а само создание продукта больше походит на стиль жизни, нежели на работу. Но если тебе это нравится, то тебе повезло!

Создай свой базис знаний и опыта (миру нужно больше дизайна)
Появляется все больше советов для знатоков дизайна, но взгляните на те области и сферы, о которых не говорят, и вы поймете, что они выглядят не так уж хорошо. Существует огромный неосвоенный рынок, которому отчаянно необходим дизайн (проекты с открытым кодом, компании, только набирающие обороты, сайты с бесплатными ресурсами). Как только вы найдете область, в которой может потребоваться помощь, разыщите проекты или продукты с хорошим послужным списком и спросом, и попытайтесь понять, как посредством дизайна можно передать свои наилучшие наработки. Существовало 20 с лишним сайтов, делающих то же самое, что и Color Codes, но мы смогли выйти вперед, выведя дизайн на новый уровень.

Комментарий Аллена Кортленда (члена сообщества инди-хакеров):

У основателя компании SOLO Роба Воллинга (Rob Walling) есть прекрасная книга «Начните с малого, сконцентрируйтесь на мелочах». Этот труд является руководством к действию для деловых людей, находящихся на пороге запуска стартапа.