Webflow’s Path to Product-Market Fit — Lessons on Creating a Market with Rigorous Customer Empathy

Это шестой выпуск нашей серии о product-market fit, которую ведёт партнёр First Round Todd Jackson (бывший VP of Product в Dropbox, Product Director в Twitter, сооснователь Cover и PM в Google и Facebook). О том, что вдохновило его на эту серию, Jackson рассказывает в своём вступительном слове здесь. Обязательно ознакомьтесь и с предыдущими четырьмя выпусками серии Paths to Product-Market — с сооснователем Airtable Andrew Ofstad, основательницей Maven Kate Ryder, основателем Retool David Hsu, Deepak Rao из X1 Card и Felicia Curcuru из Binti.

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

Тогда, чтобы создать сайт для клиента, дизайнеру нужно было скачать тему WordPress, сделать макет в Adobe Illustrator и за свои деньги нанять разработчика, который реализует дизайн. Это был трудоёмкий процесс, который ущемлял дизайнеров и съедал их потенциальный заработок.

Именно этот мучительный опыт подтолкнул Bryant Chou и его команду сооснователей, Vlad и Sergie Magdalin, к созданию Webflow — ведущей платформы визуальной разработки для создания мощных сайтов без написания кода.

Глядя на компанию сегодня — с оценкой $4 млрд, миллионами пользователей и более чем 200 000 клиентов — легко предположить, что Webflow когда-то была идеей, которая с трудом набирала обороты. Но если вы следили за этой серией, то знаете: путь к product-market fit никогда не бывает простым, и Webflow не стала исключением.

От отказа в Y Combinator до трудностей с фандрайзингом — команда основателей повидала немало вызовов. Однако между низкими точками были моменты — решения, разговоры, лучшие практики — которые помогали компании планомерно двигаться к product-market fit и добиться того уровня успеха, который вы видите сегодня. Именно эти моменты мы и хотим запечатлеть в этой статье.

Но чтобы получить полную картину истории Webflow, нужно отмотать время назад в 2008 год, когда Chou работал инженером в Intuit.

ОТМАТЫВАЕМ ЧАСЫ К НАЧАЛУ ИСТОРИИ WEBFLOW

Хотя компания, занимающаяся финансовым ПО, может показаться далёкой от выращивания стартапа с нуля, три года Chou в Intuit оказались значимыми по двум причинам. Во-первых, именно там он встретил одного из своих будущих сооснователей, Vlad. Во-вторых, именно там он понял истинный смысл клиентской одержимости.

«Scott Cook, сооснователь Intuit, считал, что новым сотрудникам крайне важно глубоко понимать своих клиентов. Он настолько верил в этот принцип, что через 30 минут после начала моего первого рабочего дня — когда я думал, что буду настраивать среду разработки или оформляться в HR — мы вышли за дверь и поехали в офис клиента, чтобы буквально сесть рядом и посмотреть, как он пользуется QuickBooks».

Эта программа, называвшаяся «Customer Follow-Me Home», была обязательной для всех новых сотрудников — и, по словам Chou, это лишь один из многих способов, которыми Intuit демонстрировала свою клиентскую одержимость.

«Руководители Intuit воплощали такую клиентскую эмпатию, о которой в Кремниевой долине нечасто услышишь», — говорит Chou. «Когда вы были рядом со Scott, он всегда задавал вопросы вроде: „Как это делает жизнь наших клиентов лучше?“ и „Чем наше решение в 10 раз лучше, быстрее или дешевле?“»

Эта культура с самого начала карьеры научила Chou очень критически относиться к проблеме, которую он пытается решить, прежде чем вообще думать о решении. Он тогда и представить не мог, насколько уроки (и связи) из его времени в Intuit замкнут круг.

ОТТАЧИВАЕМ ИДЕЮ

После работы в Intuit Chou и Magdalin пошли разными путями. В 2011 году Chou присоединился к Vungle, платформе видеорекламы внутри приложений, в качестве CTO. Magdalin, который экспериментировал с идеей создания визуального конструктора веб-приложений, в июле 2012 года решил уйти в Webflow на полный день. Вскоре он привлёк своего младшего брата Sergie, который тогда работал дизайнером.

Начиная этот проект, у Vlad было отложено $25 000, но всего через несколько месяцев деньги стали заканчиваться. В надежде получить вливание средств братья подали заявку с идеей Webflow в зимний батч YC 2012 года — и получили отказ.

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

В 2013 году он официально согласился войти в команду как сооснователь. Их первая задача: чётче определить, что именно они собираются строить.

«Vlad и Sergie пытались переизобрести то, как создавать веб-приложение визуальным способом. Но они начали со слишком большой проблемы и слишком широкого набора возможных решений», — говорит Chou. В итоге Webflow вырастет до решения этой широкой проблемы (об этом позже). Но первоначальный отказ YC стал для них сигналом: нужно конкретизировать ICP и построить более узкое решение.

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

Погружайтесь в проблему

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

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

В этом плане Chou и его сооснователям повезло. Им не нужно было выстраивать в очередь множество интервью с клиентами, потому что они сами были целевым клиентом Webflow. Опыт Vlad и Chou в веб-разработке вместе с дизайнерским бэкграундом Sergie давали им глубокое знание персоны — и они верили, что Webflow решит огромную проблему для этой аудитории.

«Vlad был лучшим фронтенд-инженером, с которым я когда-либо работал, а Sergie — лучшим дизайнером, которого я видел. Я был довольно неплох в бэкенд-инфраструктуре. В сочетании с тем, что мы трое глубоко понимали проблемы, которые решали, это дало нам почти идеальный founder-market fit».

Теперь оставался вопрос: согласятся ли с этим другие?

ВАЛИДАЦИЯ ИДЕИ

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

Рынок

Валидация рынка для Webflow была непростой, потому что, по словам Chou, его попросту не существовало, пока они строили продукт. «Мы пытались объединить две дисциплины, которые никогда не сосуществовали: веб-дизайн и веб-разработку. И мы строили продукт для дизайнера-разработчика — персоны-единорога, для которой на тот момент не существовало рынка. По сути, мы создавали свой собственный рынок», — говорит Chou.

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

Продукт

В конце 2012 года команда начала строить бету продукта. Но они осторожно постукивали ногой по тормозу, а не торопились с запуском — и не зря.

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

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

Нам нужно было сделать так, чтобы Webflow был просто чертовски отполирован. Иначе мы понимали, что наш продукт будут разбирать по косточкам и каждое несовершенство получит отдельный пост на Hacker News.

После примерно трёх месяцев кропотливой сборки, тестирования и итераций они запустили бету продукта на Hacker News — по сути, урезанную интерактивную версию Webflow, с которой могли поиграть дизайнеры — в марте 2013 года. (Любопытный факт: бета жива до сих пор.)

Ожидание того стоило. Мягкий запуск Webflow стал огромным успехом, попал в топ Hacker News и продержался там 27 часов. Бета также завирусилась в Twitter и собрала почти 35 000 заявок в листе ожидания за первые две недели. Было ясно, что что-то работает.

ЗАПУСК И ПЕРВЫЕ ДНИ

После успеха мягкого запуска Webflow снова подала заявку в YC в 2013 году. На этот раз их приняли. Примерно в этот период у Chou и его сооснователей случился первый «ага»-момент с продуктом.

«В самый первый раз я понял, что Webflow окажет влияние, когда мы с Vlad залили последнюю версию кода, чтобы продукт работал от начала до конца. Мы посадили Sergie попробовать. И я смотрел, как он перетащил div на канвас, а затем добавил класс к этому div».

Прямо у нас на глазах Sergie создавал первый в истории сайт на Webflow. За пять минут он сделал то, на что у опытного разработчика ушло бы пять часов — и нас это просто потрясло.

За две недели до Demo Day Webflow снова запустила полный продукт на Hacker News. Как и в первый раз, это попало в точку — 25 000 регистраций и $5K MRR за первые две недели.

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

Оглядываясь назад, Chou выделил несколько лучших практик, которые подготовили Webflow к успеху в первые дни — многие из них компания применяет до сих пор:

1. Используйте тикеты клиентской поддержки как метрику вовлечённости

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

«На самом деле мы использовали тикеты поддержки как коррелят к удержанию. У нас просто инстинктивно появилось чутьё на то, насколько вовлечены наши клиенты. Мы также понимали, какие фичи нужно строить следующими и где у нас пробелы в документации», — говорит Chou.

2. Различайте коммерческие потребности и потребности продуктового бренда

Одной из первых функций, которую построила компания, была Webflow Interactions. Это было детище их первого сотрудника, инженера с бэкграундом в motion-графике, который считал, что платформа должна привнести тот же уровень цифровой работы, что и инструменты видеомонтажа.

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

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

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

3. Выстраивайте дисциплину приоритизации

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

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

СНОВА ДОСТИГАЕМ PRODUCT-MARKET FIT

Но как знает любой основатель, который получил первоначальный взлёт, хитрость product-market fit в том, что это постоянно движущаяся цель. Вы можете найти его в конкретный момент времени, но если вы не продолжаете развивать продукт, расширять TAM и поспевать за спросом, он легко ускользнёт из поля зрения.

Эта точка перегиба настала для Webflow в 2015 году. Команда прожигала деньги, продукт не генерировал достаточно выручки, чтобы обогнать расходы, и компания не была default alive.

Они также всё ещё расходовали свой посевной раунд $1,2 млн, привлечённый ещё в октябре 2013-го, и небольшое посевное расширение, привлечённое в 2014-м. Это был, как описывает Chou, момент «do or die». Опасаясь снова собирать раунд из-за трудностей прошлого опыта, они остались с единственным вариантом: стать прибыльными.

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

«Одна из главных вещей, которую мы усвоили в Intuit, — не слушать своих клиентов слово в слово», — говорит Chou. «Вместо этого один из моих менторов научил меня делать root cause analysis. Это очень простой фреймворк, который помогает добраться до сути того, что говорят клиенты».

Фреймворк «5 почему».

Фреймворк популярен не случайно: он невероятно прост. После того как клиент делится обратной связью, задавайте «почему» пять раз подряд — независимо от ответа. Именно эту тактику он и команда Webflow использовали, чтобы понять следующий шаг.

«Мы слышали от клиентов, что они хотят, чтобы мы построили плагин для WordPress. Мы спросили, почему. Они ответили, что хотят использовать Webflow и WordPress вместе. Почему? Оказалось, что им нравится UI-конструктор Webflow, но они используют CMS WordPress. Почему? У WordPress был плагин custom fields, дающий им бо́льшую гибкость. В итоге мы выявили возможность решить эту проблему, создав собственную CMS — такую, которая объединяет мощь WordPress Custom Fields и дизайн-инструменты Webflow».

Опираясь на то, что они извлекли из этого root cause analysis, Chou и его команда взялись за работу на следующие шесть месяцев. В октябре 2015 года они запустили первую в мире визуальную CMS, которая до сих пор предлагает уровень кастомизации и мощности, не имеющий аналогов. В течение месяца Webflow вырос MRR на 25%, достиг $1 млн ARR и вскоре начал приносить прибыль.

ВЗГЛЯД ВПЕРЁД

После гиперфокуса на пути к прибыльности Webflow взлетел. Компания вырастила свой ARR с $1 млн до $18 млн за четыре года. Это позволило им поднять Series A на $72 млн в 2019 году, а затем Series B на $140 млн в 2021-м — и попутно собрать ещё больше крупных клиентов, таких как Yelp, Dell, Dropbox, PwC и TED.

Недавно команда привлекла Series C на $120 млн при оценке $4 млрд, доведя общий объём финансирования компании до более чем $330 млн — это разительно отличается от того времени, когда им приходилось растягивать посевной чек на два года.

И то, что начиналось как трио основателей, строящих продукт для самих себя, сегодня обслуживает 200 000 клиентов и 3,5 миллиона пользователей, а количество визитов на сайты, размещённые на Webflow, теперь превышает 10 миллиардов в месяц.

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