Uber для портных: как подготовить и запустить MVP на Bubble.io

Всем привет! Меня зовут женя, я frontend-разработчик, а это кейс разработки небольшого MVP для тестирования гипотезы - выстрелит ли маркетплейс портных в Санкт-Петербурге на nocode.

Водичка

По специальности я инженер автоматизированных систем управления, и уже 4 года отвечаю за разные технические задачи в своей компании — обслуживаю серверы и коммутаторы, настраиваю виртуальные машины и прокладываю линии. Еще во время обучения в вузе я увлекся созданием веб-сайтов и стал осваивать Joomla, WordPress и Bitrix. В то время я делал корпоративные сайты, лендинги, интернет-магазины и пробовал чуть-чуть в код...

Мне нравится создавать продукты с нуля и заниматься более креативными задачи, чем переустанавливать Windows и настраивать виртуальные машины на серверах. Поэтому на текущий момент я уже освоил разработку и сменил сферу деятельности, вот уже месяц как я junior веб-разработчик в небольшой команде и пилю фронтенд на React, пока мне все нравится) А этот кейс берет начало в первой половине 2022 года (февраль-март), когда я занимался разработкой на Bubble.io.

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

Needle - маркетплейс для портных

Время на разработку: 80 часов (в течение 1,5 месяцев).

Бюджет на разработку: 90 тыс. руб.

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

Проджект-менеджер студии провел всю подготовительную работу самостоятельно, а ко мне обратился за реализацией на Bubble.

Как работал над проектом

Перед началом разработки мне прислали следующие документы:

  • техническое задание с подробным описанием, как должен работать сервис для клиентов и исполнителей;
  • схемы в Miro, иллюстрирующие путь клиента, исполнителя и заказа;
  • дизайн-проект в Фигме, который был сделан сторонним дизайнером.

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

Подробное ТЗ в Гугл доке
Подробное ТЗ в Гугл доке
Общая схема в Miro, которая показывает путь клиента
Общая схема в Miro, которая показывает путь клиента
Подробная схема в Miro, которая показывает каждый этап заказа
Подробная схема в Miro, которая показывает каждый этап заказа
Эти загадочные круги иллюстрировали радиус работы портных в разных районах города
Эти загадочные круги иллюстрировали радиус работы портных в разных районах города
Дизайн-проект в Фигме
Дизайн-проект в Фигме

Еще один документ — смету работ — я заполнил сам. Для каждого этапа разработки я прописал срок его сдачи и примерное количество времени, которое я на него потрачу.

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

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

Смета работ в Гугл доке
Смета работ в Гугл доке

Что получилось

В сервисе было два типа пользователей:

  • клиенты — заказчики услуг,
  • исполнители — портные.

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

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

Следующий шаг — выбрать, что нужно сделать: ремонт или индивидуальный пошив, затем — указать тип одежды и конкретные услуги. Например, можно выбрать «деловой костюм» и «замена подклада».

Uber для портных: как подготовить и запустить MVP на Bubble.io

На сайте можно выбрать ремонт одежды или индивидуальный пошив.

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

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

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

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

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

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

Финальная стадия заказа — выбор способа и времени доставки
Финальная стадия заказа — выбор способа и времени доставки
А календарь я решил сделать с 0 кастомный, чтобы не привязываться к готовому функционалу и дизайну плагинов
А календарь я решил сделать с 0 кастомный, чтобы не привязываться к готовому функционалу и дизайну плагинов

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

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

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

Все процессы «под капотом»
Все процессы «под капотом»

Про будущее проекта

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

Подводя итог

В этой статье я хотел показать некоторые возможности nocode-решений сообществу, рассказать про возможность быстрого и недорого запуска веб-приложений для тестирования гипотез. Я думаю, что данный кейс может заставить начинающих предпринимателей задуматься об использовании nocode-платформ (тот же Bubble для разработки адаптивных веб-приложений или PWA, например, или FlutterFlow для нативных мобильных приложений) в целях быстрого запуска приложения и проверки идеи. Действительно неплохой продукт на ноукоде можно сделать недорого и силами одного разработчика, а не команды. А ещё классный ноукодер имеет большое преимущество перед фронтенд или бэкенд-разработчиком — он глубже понимает бизнес-процессы, несет ответственность за работоспособность приложения и напрямую влияет на успех проекта. Хотя для бизнеса это несет дополнительные риски.

PS. На данный момент зерокодинг для меня — это уже пройденный этап. Сейчас я полностью ушел в классическую разработку (на то есть экономические причины). Я уверен, что в дальнейшем, с карьерным ростом, опыт в Bubble даст мне конкурентное преимущество при трудоустройстве на middle, senior или руководящие позиции. А связаться со мной можно в Телеграме)

Начать дискуссию