DOU Проектор: Как мы создавали "идеальный" онлайн-конструктор веб-страниц

От редакции:
В рубрике DOU Проектор все желающие могут презентовать свой продукт (как стартап, так и ламповый pet-проект). Если вам есть о чем рассказать — приглашаем поучаствовать. Если нет — возможно, серия вдохновит на создание собственного made in Ukraine продукта. Вопросы и заявки на участие присылайте на  Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. .

Идея

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

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

В разработке проектов на заказ, особенно если вы делаете такие заказы для определенного сегмента рынка, прослеживается мода. Если к вам пришел заказчик и попросил разработать некий функционал, например, рассылку сообщений, будьте уверены, что другой заказчик это тоже попросит. В каждом проекте, который мы разрабатывали, всегда была предусмотрен модуль для создания одной личной страницы и личного блога для каждого пользователя, зарегистрированного на сайте. Личная страница заполнялась в обычном визуальном редакторе, CKeditor. Это было очень востребовано, несмотря на существование narod.ru, ucoz и тому подобных.

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

Реализация

Поскольку мы работали уже не один год, у нас было достаточно наработок, чтобы быстро сделать проект. Поэтому, как таковое, программирование заняло максимум месяц. Дизайн нарисовали, сверстали, натянули. Платежные системы подключили. Проект готов. Рабочее название было SalesPages, Для публикации планировали BusinessPages. Да, его можно было улучшать, но те функции, которые были озвучены в постановке задаче, мы реализовали. При этом мы никогда не сидели без работы. К нам постоянно поступали новые заказы, заказуха, как мы её любим называть. И мы практически подписывались под все. А в это время, как специально, навалили заказы под завязочку, да так, что наш стартап запылился в репозитории аж на добрых 10 месяцев.

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

Реанимация

Попробуйте догадаться, что дало нам толчок к реанимации проекта. Закончились заказы? Они до сих пор не заканчиваются. Появилось больше денег? Нет. Диаграмма Ганта из редмайна? Туда некогда было заглядывать. Мы настолько забыли о своем собственном проекте, что спустя 10 месяцев в феврале 2013 ведущие менеджеры едва ли вспомнили, что означает слово SalesPages. А как вспомнили...

Очередной раз проклиная заказуху, завидуя собственным заказчикам, мы подумали, а почему бы нам не сделать свой собственный проект.
— Стоп. Ребята. Мы уже сделали свой собственный проект!
— Какой?
— Ну как, SalesPages!
— А что это?
— Ну... Редактор страниц, вспомните.
— Точно. А давайте поднимем. Давайте продавать.

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

Архитектура идеального веб-редактора

Попытки продаж показали, что пользователям не просто создать красивую страницу для себя. Как пользователь представляет себе идеальный редактор? Идеальный редактор — это не только тот, который позволяет редактировать текст и вставлять картинки. Пользователям крайне нужна функция перетаскивания любого элемента. Ну какой смысл от редактора, если картинку с продуктом нельзя подвинуть так, как тебе надо? Точнее, можно было, но для этого надо было заглянуть в свойства объекта, а порой и в исходный код страницы. Да, еще пользователь должен уметь отличать position: absolute от static и relative. Возможно, вы никогда с этим не сталкивались, но даже в такой продвинутой программе, как Microsoft Word, довольно не просто создать красивую страницу, назначение которой выходит за рамки обычного документа. Те же картинки попробуйте разместить не понимая, что такое абсолютное и относительное позиционирование.

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

В Ckeditor была возможность редактировать текст и картинки в одном окне. Но с функцией перетаскивания было сложно. Мы прикрутили в этот редактор дополнительные скрипты, которые давали возможность свободного перетаскивания. Но функционал был довольно глючный. Изначально нам казалось, что принудительно установив на перетаскиваемые объекты position: absolute, мы раз и навсегда решим проблемы пользователей. Но как только мы это сделали, появились те, кто вставлял форму обратной связи посредине текста. Потом добавлял сверху текст, и этот текст не двигал форму. Я надеюсь, вы понимаете, почему мы даже не пытались объяснить людям поведение объектов в зависимости от их position.

Мы стали рассматривать другой вариант — сделать возможность перетаскивания блоков на странице, как это мы сделали в видео-визитке. А для редактирования самих блоков установить кнопочки на блоках, чтобы они открывали тот же редактор CKeditor. Но и тут нас ждали неприятности. В первую очередь, это вопрос стилей. К примеру, в блоке на темном фоне размещается белый текст. Открыв этот блок в Ckeditor, пользователь не видел своего текста. А почему? Потому что фон у CKeditor был по умолчанию белый. Соответственно, белый текст на белом фоне был не виден. Но самую серьезную проблему нам ставили пользователи, которые просто копировали сложный контент с других сайтов и вставляли его в CKeditor. И, конечно, закрыв CKeditor, они пробовали перемещать мелкие элементы из объемного контента, который скопировали. И это еще не все. Было и такое, что вставка стороннего контента вместе со стилями ломала панель инструментов нашего редактора, так как сторонние стили применялись и для редактора.

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

Хорошая «мысля» об инвесторе

Сентябрь 2013. Нам по-прежнему было мало. Однажды вечером, возвращаясь после работы, мы с партнером обсуждали, где поставить запятую в «убить нельзя помиловать» для нашего стартапа. В итоге, анализируя причины неудач, пришли к выводу, что хорошему стартапу нужно уделять серьезное внимание. Нужна выделенная команда. Нужны деньги. А где взять деньги? Ну конечно же! Нам нужен инвестор!

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

Составили бизнес-план. Полгода разработки, еще полгода на возврат инвестиционных средств. Нашли инвестора. Собрали команду. Дали новое название проекту — PROB2B. Даже в редмайне создали новый проект. На дворе декабрь 2013. Опять запал, энергия — вот-вот, и должны пойти первые продажи.

Работа над ошибками

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

Итак, решено, перешли. Позже об этом я очень пожалел. Трудно описать причины, и скажем, найти виновных. Вообще, виновных я ищу очень просто, по принципу: «рыба гниет с головы». Никто, кроме тебя как руководителя не виноват. Возня с убунтой растянулась на месяц. Ребята никак не могли оседлать SVN. Мои практикумы по работе с SVN из командной строки не давали должного эффекта. Ребятам нужен был привычный оконный интерфейс вроде Tortoise SVN. И, конечно, в довесок куча разных мелочей, которые, в принципе, дело привычки, но как тяжело бывает менять привычки. Месяц без результатов. Вопрос чуть ли не ребром. Надо вернуть всех на Windows. Выделили деньги, купили ПО, пошла работа.

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

Обратная связь

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

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

Хотя оплаты пошли, но их количество и поджимающие сроки заставили уменьшить активную разработку. Уже летом 2014 на проекте оставили только самых основных разработчиков.

Мы продолжали вылизывать функционал сайта. Более того, именно в этот период заложили новую версию редактора — конструктора Landing Page. Исходя из прошлого опыта с CKeditor, мы сделали два важных вывода:
— Текст должен редактироваться прямо на странице без CKeditor. Пользователь должен видеть сразу, что он получает;
— Редактироваться страница должна исключительно в iframe, и вставленные какие-либо стили или скрипты в страницу не должны влиять на панель инструментов или другой функционал нашего редактора.

Так появился новый редактор под название UTIEditor. Данный редактор мы написали используя Backbone.js.

Результаты

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

Больше чем полгода назад случилось то, чего мы и сами не ожидали. Для нашего редактора мы разрабатывали дизайны предустановленных шаблонов. Задание сверстать дали верстальщику. Причем, главных условием было сверстать их прямо в редакторе. Во-первых, мы планировали получить обратную связь. И во-вторых, редактор лучше работает с шаблонами, которые созданы прямо в нем. Но одно дело, когда верстальщику дают задание, и он его выполняет по долгу службы, и совсем другое, когда он самостоятельно без каких-либо указаний и, более того, без готовых дизайнов, начинает клепать шаблоны в редакторе. Мы поняли, что нашему стартапу всё таки жить. И наши выводы подтвердились, когда пошли регулярные оплаты от пользователей.

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

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

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