Всем привет, меня зовут Влад и я запилил собственный IT стартап в одиночку потратив $100. Я давно хотел проверить свои силы и показать самому себе на что я способен, смогу ли я дойти от: создания идеи, проработки ui/ux, разработки frontend & backend, до публикации продукта и его маркетинга.

Для общего понимания я постараюсь кратко описать свой background. В 14 лет я увлёкся веб разработкой поскольку у меня была команда по игре counter strike и для того чтобы заявляться на турниры, нам требовался сайт, по мере его поддержания, я освоил исскуство владения фотошопом. Этот сайт я начал монетезировать и смотрел как его можно продвигать.

Дальше был универ, где я много писал код на c++, python, c#, писал свои нейронки, программировал роботов, проходил алгоритмы и структуры данных. В это самое время вместе с друзьями начали развивать ивент стартап, который помогал пользователям узнавать расписание, изменения, следить за интересными спикерами. Я занимался ui/ux проектированием и frontend разработкой. В это самое время я изучил первые в своей жизни методологии дизайна: google material design guidelines and Apple Human Interface Guidelines.

Писал диплом на тему: примерка мебели в дополненой реальности на свифте.

Потом был момент, когда мы с партнёрами открыли it outsource компанию на 40 человек разработки, где я был CTO и следил за технологиями в компании на стеке: JS, Typescript, React, Vue, Php, python, nodejs, reactnative.

И весь свой накопленный опыт я хотел применить для создания продукта.

Выбор идеи

План был такой, создать продукт, который:

1. был бы полезен владельцам бизнеса

2. распространялся самостоятельно без вложения моего времени

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

4. Без внешних инвестиций, используя только свои ресурсы.

Идей было 2

• Реализовать мобильное приложение на android & ios. Эту идею я сразу отмёл, поскольку рынок мобильных приложений перегрет и если ты хочешь быть успешным у тебя должен быть реально хороший продукт, лучше enterprise конкурентов на голову, либо иметь большое количество инвестиций

• Разработка приложений для saas маркетплейсов таких как ecwid & shopify. Подобные платформы позволяют создать интернет магазин без знаний в программировании в 1 клик.

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

Проработка идеи

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

Ответ был очевиден - это социальные сети. От популярности бренда в социальных сетях зависит его успешность и различные бизнес показатели, например gmv, cmr, cm, clv.

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

Я начал делать ресёрч в магазине приложений Ecwid apps store & Shopify apps store. И пришёл к выводу, что в Shopify есть подобные приложения и для того чтобы переплюнуть конкурентов нужно будет сделать реально что-то круче чем есть на рынке и вложить много денег чтобы мерчанты выбирали тебя.

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

Хорошо, дальше я пошёл в магазин приложений Ecwid и обнаружил что практически нет конкурентов в категории социальных сетей. Это был вин, вот здесь сидят мерчанты и ждут когда им помогут с ведением социальных сетей.

Проектирование

Написано много умных книжек про планирование и проектирование проектов, которые могут помочь с проектированием своего проекта.

Но за много лет работы в IT я сформировал свои принципы проектирования, они достаточно простые и позволяют быстро проектировать малые и средние проекты. Достаточно будет ручки и блокнота.

1. Сначала выписываем, какие Акторы будут в системе

2. Описываем функционал для каждого актора в виде списка

3. На основе функционала проектируем макеты (можно в блокноте)

Разберём проектирование на примере Instagram Autopost приложения

Акторы в моём проекте

• Мерчант – владелец магазина

• Пользователь – потенциальный покупатель в Instagram

Функционал каждого актора

Проектирование макетов

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

• Dashboard page – информационная страница, на которой будем выводить подключенные Instagram аккаунты, список созданных маркетинговых кампаний

• Connect Instagram page – первая страница которую видит пользователь после установки приложение, здесь мы ему кратко объясняем как подключить страницу и как настроить свой аккаунт

• Create/Edit campaign – страница с формой, где пользователь может указать текстовое описание, частоту публикации, указать нужна ли генерация промокодов, выбрать категории из которых будут извлекаться товары + вывод превью поста

• Tutorials widget - виджет который поможет пользователю разобраться в процессах работы с приложением

Я взял ручку и бумагу и примерно раскидал компоновку страниц, это мне поможет при разработке приложения. Когда перед глазами есть визуальное представление, проще проектировать front back приложения и структуру базы данных. Такой подход мне неоднократно помогал.

Welcome page

Это страница первая что видит пользователь, то хочется на ней максимально подробно объяснить по шагам как и что предстоит сделать.

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

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

Dashboard page

Dashboard page источник всей информации по проекту для мерчант, эта страница должна давать полное представление мерчанту о работе приложения и своевременно сообщать ему об проблемах и давать некую статистику об активности приложения.

Разберём страницу на составные элементы:

1. В первом блоке пользователь может увидеть статус по подключённому аккаунту. Если у аккаунта протух токен или у приложения слетели настройки доступа, то здесь будет отображениям реальный статус и описание проблемы.

2. В этом блоке мы отображаем список подключённых страниц Facebook pages или Instagram accounts. Напротив каждой страницы статус имеет ли приложение к ней доступ, есть ли проблемы с постингом на эту страницу

3. Важный аспект любого постинга - это часовой пояс магазина. От этого будет зависеть в какое время приложение будет осуществлять постинг. Например в Лондоне может быть 21:00 GMT+1, а в Нью-Йорке в этот же самый момент только 16:00 GMT-4. В этом блоке пользователь может посмотреть на свой часовой пояс, а также поменять его на другой.

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

Create/Edit Campaign

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

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

   1. С помощью кнопки Add template пользователь может добавлять вариации. Вариации будут отображаться в виде цифр, при нажатии на которые происходит переключение на нужную вариацию.

   2. В текстовом редакторе предусмотрена вставка констант, например пользователь может вставить ссылку на товар с помощью команды {{PRODUCT_LINK}} и ему даже не привиться запоминать все команды, поскольку все они доступны в быстром наборе через кнопку Insert constant. Всего реализовано несколько базовых переменных: название продукта, ссылка на продукт, описание продукта в магазине и цена товара.

2. Для упрощения понимания пользователя как его изменения будут влиять на внешний вид поста, был добавлен блок Preview, в котором воссоздан дизайн поста из Facebook & Instagram. При изменении активного шаблона в блоке 1, будет обновлять текст в превью, при вставке константы в текст сообщения, такая переменная будет распарщена в итоговый вид. Например пользователь указал константу {{PRODUCT_LINK}}, то в превью он увидит конечную ссылку.

   1. В посте отображается фото товара. Если пользователь указал в кампании генерацию скидок, то промокод будет наложен на фото.

   2. Если пользователь меняет аккаунт на который будет производиться постинг в блоке #5, то имя аккаунта поменяется в превью.

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

4. В этом блоке можно выбрать день недели и время постинга поста.

5. В этом блоке даём пользователю выбрать аккаунт в который будет осуществлять публикация.

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

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

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

Дизайн

Разработку дизайна можно разбить на 2 части:

• Дизайн административной панели мерчанта

• Дизайн карточек приложения, рекламные промоакции и иконка приложения

Админ панель

Дизайн административной части я не разрабатывал, т.к. мне будет достаточно прототипа, который мы разработали выше. У Ecwid API есть свой CSS Фреймворк и всё что мне нужно будет сделать это создать сетку и в эту сетку вставлять готовые компоненты. По-мимо простых компонентов у Ecwid API есть сложные компоненты, наподобие таких:

Если вы разрабатываете свой продукт у которого нет собственного CSS Framework, то можно воспользоваться OpenSource фреймворком Bootstrap. Этот Фреймворк знают многие и он имеет большую базу компонентов и собственную сетку.

Разработка фирменного стиля

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

Первое что требует площадка для размещения приложения - это логотип. У меня родилась идея поставить в центр сервис инстаграм, вокруг которого на своих орбитах вращаются лайки, люди и деньги. Концепция приложения – что инстаграм это целый мир для бизнесмена, где существуют миллионы людей, которые хотят узнать о твоём продукте и поскорее им воспользоваться. Так появился этот логотип.

Мне очень сильно упростило задачу наличие у Ecwid'a системы правил и гайдлайнов для отрисовки лого. Я сторонник того что правила и определённые рамки упрощают задачу за счёт уменьшения возможных вариантов расположения элементов и используемых цветов.

Карточка приложения

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

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

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

Продуктовое описание

Дальше было необходимо описать описание продукта из которого пользователю было понятно какие потребности приложение закроет для мерчанта. Здесь я старался быть честным и искренним перед пользователями. Тогда ещё не было gpt technologies.

Итого

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

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

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