Как я построил свой побочный проект и получил 31 000 пользователей за первую неделю

1656571831 kak ya postroil svoj pobochnyj proekt i poluchil 31 000

от Юрна В

Я люблю строить побочные проекты. Удивительно видеть, как ваши собственные идеи претворяются в жизнь.

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

Если ваш побочный проект уйдет, он может даже превратиться в стартап. Многие известные компании начинали как побочные проекты — Twitter, Slack, GitHub и Instagram, например.

Недавно я запустил новый побочный проект и смог получить 31000 пользователей в течение первых 7 дней после запуска.

Веб-сайт, который я создал, называется Screely. Это позволяет мгновенно превратить снимок экрана в красивый макет дизайна без хлопот с использованием шаблонов Photoshop или Sketch.

В этой статье я расскажу вам, как возникла идея, как я ее создал и как мне удалось привлечь 31 000 пользователей за первые 7 дней.

Поиск идеи

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

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

Они больше напоминали дизайны, которые вы видите на Dribbble или Behance.

1*pmZbtGBrql8SS3sCqccktQ
Пример скриншота

Оказалось, что он создал свой шаблон в Sketch, чтобы добавить эти эффекты.

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

Я знал о Carbon, инструменте, который мгновенно создает хороший образ код, но я хотел что-то подобное для себя скриншоты.

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

Определите свой минимально жизнеспособный продукт (MVP)

Первое, что я делаю, когда начинаю работать над новым продуктом, это определить MVP.

Существует несколько определений того, что такое MVP. Обычно его описывают как продукт с наименьшим количеством функций, все еще решающий проблему.

Ограничиться созданием только MVP очень важно по двум причинам.

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

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

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

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

Чем быстрее вы доставите MVP, тем быстрее вы сможете подтвердить свою идею и улучшить свой MVP с помощью отзывов пользователей.

Для Screee я определил MVP как:

  • Пользователь должен иметь возможность выбрать локальный файл изображения (jpg, png)
  • Система должна сгенерировать изображение с макетом окна, тенью поля и цветом фона.
  • Пользователь должен иметь возможность изменить цвет фона
  • Пользователь должен иметь возможность скачать сгенерированное изображение

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

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

Подготовка

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

Проведя некоторые исследования, я рассмотрел 3 разных варианта:

  1. Используйте элемент canvas HTML и JavaScript
  2. Используйте обычные элементы DOM и используйте чистый HTML и CSS.
  3. Сгенерируйте изображение на стороне сервера и верните конечный результат

Каждый вариант имел свои плюсы и минусы.

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

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

Остались первые два варианта. Наконец-то я решил использовать HTML <canvas> element и paввод на холст с помощью обычного JavaScript. Кроме того, поскольку я раньше не использовал элемент canvas HTML, а побочные проекты – это отличный способ узнать что-то новое, я был склонен пойти по этому пути. ?

Начнём строить

Наиболее увлекательная часть любого проекта.

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

Через час проекта я уже работал с основными принципами.

  • Имя-заполнитель – сексуальные скриншоты (так мы назвали эти изображения в групповом чате)
  • Входной файл
  • A сгенерировано <canvas> с изображением, которое я выбираю с цветным фоном и с добавленным поддельным окном
1*fhish_gZ0T2hHsC7CBHBDw
Основные функции программы

Я жестко закодировал все, и это работало только с одним (конкретным) скриншотом. Вы не можете изменить цвет фона или использовать снимок экрана с разными размерами изображения.

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

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

1*wU0UwOKhg4ZKZmDyAlG2tA
Демонстрация выбора цвета

Теперь, когда все требования MVP, которые я установил в начале, были выполнены, пора запускать (да, уже)!

Подготовка к запуску

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

1*3VigELJUhmUPCnViE2U3ww
MVP, не готовый к запуску (пока)

После выбора имени (Screely), покупки домена .com и создания целевой страницы, результат был:

1*up1fp28FspXTTdcVVPYuNA

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

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

Есть много вариантов, которые вы можете использовать, чтобы вставить чат в свой продукт. Я использовал Drift, но вы также можете использовать альтернативы, такие как Intercom или Olark.

Стройте под открытым небом

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

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

Когда я начал работать над Screely, я написал в Твиттере о своем прогрессе только через час после начала. Я также твитнул регулярные обновления при создании MVP.

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

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

Запуск

Я разместил Screely на Product Hunt, Hacker News, Reddit, Designer News и нескольких других веб-сайтах.

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

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

Охота на продукт

Запуск Product Hunt прошел очень хорошо и превзошел все мои ожидания. Screely в итоге стал продуктом №1 дня со 1032 голосами «за».

1*oKvwlrmVueEh3mQIyk0sOQ

Screely был продуктом №1 дня, №1 продуктом недели и №4 продуктом луны. Это означало, что он будет появляться в ежедневном и еженедельном бюллетене Product Hunt.

В общей сложности, Product Hunt привел около 11 тысяч посетителей за первую неделю!

Хакерские новости

Screee начал довольно медленно, но спустя несколько часов он внезапно вышел на первую страницу Hacker News. Несмотря на то, что самая высокая позиция Screely была «лишь» №15, это все равно привело к большому трафику.

1*iT9BB1q5pPgjDXrfGJ6TGA

Я подсчитал, что из Hacker News пришли от 5 до 10 тысяч пользователей.

Неясно, сколько именно пользователей пришло из HN, поскольку он не добавляет ?ref= параметр к URL-адресу. Я включил более подробный обзор источников трафика позже в этой статье.

Новости дизайнеров

Третьей наиболее успешной платформой (по количеству трафика) стал designernews.com.

Screee попал в №2 на первой странице, и это привело к появлению чуть менее 3 тысяч новых пользователей.

Вирусный

Я размещал Screely на многих других местах, таких как Reddit и Indie Hackers, но предыдущие три были безусловно наиболее успешными.

Отличным побочным эффектом успеха в таких местах как Hacker News и Product Hunt является то, что ваш продукт появляется во многих других местах — в твитах, информационных бюллетенях, небольших блогах, агрегаторах и т.д.

К примеру, Screely был упомянут трюками CSS для своих 360 тысяч подписчиков.

Screely также был включен в Codrops Collective #416, популярный среди дизайнеров информационный бюллетень.

В общей сложности в первую неделю Screely было чуть меньше 31 000 пользователей.

1*8o3Y-DGgGAYpRbyVF2A0yQ
Слева: общее количество пользователей в день, справа: источник трафика. Источник: Google Analytics

Улучшайте с помощью отзывов пользователей

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

Помните функцию чата, которую я применил для подготовки к запуску Screee? Он был наполнен запросами на функции и отзывами пользователей Screee.

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

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

1*XafYwAWmCGni0K5DDAMf7w
Поддержка перетаскивания

Другой часто запрашиваемой функцией было автоматическое согласование цвета фона с изображением. Таким образом, вы сразу получите фон, соответствующий вашему скриншоту.

Я добавил сценарий, который анализирует изображение, создает цветовую палитру и выбирает наиболее доминирующий цвет для фона.

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

Если вы хотите получить обновления о Screely. Подписывайтесь на @getScreely в Twitter или подпишитесь на ежемесячное обновление продукта по электронной почте на scree.com.

Советы по доставке ваших побочных проектов (скорее)

  • Не усложнять: Держите свой MVP максимально ограниченным. Используйте знакомые вам языки программирования вместо любых модных фреймворков. Чем сложнее становится ваш проект, тем больше времени требуется для доставки и получения первых пользователей.
  • Доставка ежедневно: Очень важно поддерживать импульс в ваших побочных проектах. Старайтесь работать над проектом каждый день. Реорганизуйте одну функцию или устраните крошечную проблему CSS. Неважно, насколько небольшая задача, которую вы выполняете, продолжайте доставку! Если вы пропускаете день (это случается), поставьте первоочередной задачей сделать что-нибудь, неважно, насколько небольшое, сделать на следующий день.
  • Используйте ярлыки: По возможности старайтесь найти ярлыки, чтобы побыстрее доставить ваш продукт. Если вы можете найти хорошее решение проблемы с открытым кодом, используйте его вместо того, чтобы писать с нуля. Используйте такие инструменты, как Netlify, для размещения и развертывания вместо того, чтобы настраивать собственный сервер.
  • Запустите, прежде чем думать, что готовы: Не увлекайтесь усовершенствованием своего продукта. Вы можете избавиться гораздо больше, чем думаете.
  • Программирование – это инструмент, чтобы донести вашу идею до мира: Не переделывайте свой побочный проект. Ваших пользователей не волнует ваш набор технологий, для них важно преимущество, которое они получают от использования вашего продукта. Их не волнует, используете ли вы Docker или React, они сосредотачиваются на том, какую проблему может решить ваш продукт.
  • Вы знаете достаточно: Многие учащиеся кодировать откладывают работу над собственными проектами. Они часто думают, что им нужно читать больше учебных пособий, покупать больше курсов и читать больше книг. Не продолжайте учиться вечно, начните строить! Даже опытные разработчики все еще ищут простые вещи, например, как удалить элемент из массива.

Удачи!

Если вы нашли эту статью полезной, дайте мне несколько аплодисментов. ?

Я голландский внештатный дизайнер UI/UX и Front-end разработчик. Я также управляю некоторыми успешными партнерскими веб-сайтами и создаю побочные проекты для развлечения и прибыли.

Если вы хотите знать, над чем я сейчас работаю, подпишитесь на меня в Twitter или посмотрите мой блог.

Обязательно пишите мне в Твиттере с любыми вопросами, я всегда рад помочь!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *