Сегодня мой первый кейс на Habr и решил его начать с проекта, который мы подхватили после исчезнувших разработчиков и за суперкороткое время создали рабочий MVP стартапа, который начал зарабатывать сразу после релиза.
![стартовая страница проекта стартовая страница проекта](https://habrastorage.org/getpro/habr/upload_files/1dd/429/f7b/1dd429f7be024ce38517cb65f4941323.jpeg)
Меня зовут Валерьян, я директор продуктовой компании. Сегодня я расскажу о том, как быстро можно спасти и запустить продукт.
В статье:
Особенности проекта
Пропавшие разработчики и их наследие
Задача: сделать как у 9-летнего конкурента, только лучше
Архитектура проекта
Разработка веб-платформы
Функционал для добавления экскурсий
Элегантное решение для оптимизации скорости взаимодействия с базой данных
Чаты и уведомления
Проработка SEO
Разработка приложении на Flutter для iOS и Android
Как устроено приложение
После запуска. Результаты первых месяцев работы
Планы, выводы и рекомендации
Особенности проекта
Проект — агрегатор экскурсий — изначально задумывался как стартап: быстро разработать и запустить MVP продукта, проверить гипотезы, найти product-market fit — и масштабировать решение сразу на российском рынке, а затем и на международном.
Разработкой должна была заниматься сторонняя компания, которую клиента нашел сам. Наши партнеры при этом выступали как подрядчики по SEO и продвижению, чтобы включиться в работу сразу после релиза и обеспечить быстрый набор аудитории.
Так как большого бюджета на продвижение не было, заказчик решил сделать ставку на SEO — сразу сделать все правильно, чтобы после запуска получать максимум органического трафика и не так сильно зависеть от платной рекламы.
По плану наши партнеры должны были курировать процесс разработки и проследить за тем, чтобы проект был сделан правильно с точки зрения поисковой оптимизации.
Пропавшие разработчики и их наследие
Все пошло наперекосяк, когда в марте 2022 после 10 месяцев работы и более 1 000 000 рублей предоплаты компания-разработчик перестала выходить на связь.
Когда наши партнеры стали разбираться, оказалось, что к разработке компания фактически не приступала. Разработчики кормили заказчика завтраками и показывали якобы рабочие кусочки кода во время встреч, при этом не передавая их клиенту и максимально затягивая сроки.
В итоге еще до их исчезновения проект сильно вышел за первоначально обозначенные дедлайны.
Ну а после их пропажи оказалось, что из готового на руках у заказчика осталось только несколько дизайн-макетов будущего сайта и приложений. Ни одного готового и функционального модуля — только картинки.
Конечно, ситуацию мы знаем только со слов заказчика и не в курсе, какие были первоначальные договоренности и условия. Хочется верить, что команда, которая работала с проектом до нас — крутые ребята, но что вышло, что вышло.
Ситуация осложнялась тем, что в разработку были вложены деньги инвесторов. А это значит, проект нужно было в любом случае запускать кровь из носу.
Именно с такими вводными заказчик пришел к нам:
За 3 месяца разработать и запустить функциональный MVP.
Со старта проработать SEO, чтобы сайт хорошо ранжировался.
Реализовать киллер-фичи, которые бы могли выделить проект на фоне конкурентов и привлечь аудиторию с одной стороны и гидов с другой.
Задача: сделать как у 9-летнего конкурента, только лучше
Ни документации, ни техзадания, ни рабочего кода — на старте не было ничего, кроме сжатых сроков и желания сделать проект, у которого будет потенциал на достаточно развитом и конкурентом рынке.
Со стороны заказчика задача звучала амбициозно: «Сделайте, как Tripster, только лучше!»
![платформа конкурента платформа конкурента](https://habrastorage.org/getpro/habr/upload_files/760/799/f74/760799f748b6e2c5eee7641f16bd8e65.jpeg)
На самом деле, для стартапов это довольно типичное желание: создать новый Амазон, Озон, Букинг, Юбер (только лучше) и взорвать рынок.
В нашем случае просто «сделать лучше» было невозможно:
На все пожелания не было ни бюджета, ни времени.
Другая логика: в Tripster все экскурсии добавляют администраторы сервиса, они же следят за тем, чтобы страницы экскурсий выглядели привлекательно. Мы же изначально хотели сделать бесшовный интерфейс, чтобы экскурсии добавляли сами гиды и туристические компании.
В этом главная сложность таких продуктов: чтобы сделать красивую страницу, нужно добавить много данных → пользователям лень этим заниматься → они не добавляют экскурсии → сервис не конкурентоспособен.
Поэтому очень важно соблюсти баланс, чтобы страница выглядела привлекательно, а ее создание отнимало у пользователя минимум времени и сил.
Слишком много сценариев экскурсий: в Tripster были индивидуальные, груповые, короткие, многодневные экскурсии, путешествия и т.д. Мы просто не могли себе позволить насколько усложнить все с самого начала. Это бы сильно затянуло разработку и отпугнуло пользователей: никто не хочет разбираться с обилием вариантов и сложным интерфейсом на никому неизвестном новом сайте.
В итоге мы приняли единственное верное решение: ориентироваться на Tripster, но не копировать его. Хорошие идеи и решения переделывать под себя, от плохих и сомнительных — отказываться. Работать спринтами и постепенно наращивать функционал по мере развития проекта. Идти своим путем, но с оглядкой на рынок.
Архитектура проекта
Чтобы уложиться в сроки, мы постарались максимально упростить архитектуру MVP. Ключевой задачей на этом этапе было продумать все так, чтобы проект был одинаково удобен как для гидов и туркомпаний, которые размещают экскурсии, так и для конечных пользователей, которые их покупают.
При этом нужно было обеспечить бесшовное функционирование как веб-платформы, так и приложений на iOS и Android.
В итоге общедоступную информационную архитектуру мы выстроили так:
Главная
Каталог
Поиск
Сортировка
Фильтрация
Карта
Страница экскурсии
Покупка экскурсии
Информационные страницы в блоге
В закрытой зоне сайта и приложений находятся:
Личный кабинет гида
Личный кабинет путешественника
Для управления контентом проекта мы также разработали CMS, которая тоже является важной частью проекта.
Архитектура приложения для путешественников (конечных пользователей) аналогична веб-версии.
Приложение для гидов (добавляющих экскурсии) решили отложить на потом и реализовать уже после релиза в ходе работ по развитию проекта.
Разработка веб-платформы
Так как у нас было всего 3 месяца на разработку, нужно было придумать процесс, который бы позволил создать рабочий проект с нуля и запустить его за предельно сжатые сроки.
Классический подход к продуктовой разработке предполагает, что проект проходит через ряд последовательных этапов:
Техническое задание
UX design
UI design
Front-end / Back-end
QA
Наполнение контентом
Продакшн
Только наполнение контентом здесь занимает обычно больше месяца, не говоря уже про индексацию поисковиками.
Всю работу мы разбили на четыре блока:
1. Создание страниц под каждую страну и город.
Быстро создаем информационные страницы на HTML, прописываем метаданные и открываем для индексации.
Сделано за 2 недели, после чего сайт уже индексируется поисковиками, SEO-шники занимаются своими задачами по повышению видимости, а мы продолжаем разработку.
2. Создание и модерация страниц гидов и экскурсий.
Гиды в бета версии создают и оформляют профили как ранние последователи. Мы на ходу поправляем неудобные моменты и прикручиваем создание экскурсий.
В итоге, к тому моменту, как первые гиды регистрируются на платформе, у нас уже готов полный функционал: страницы городов и возможность создавать в них экскурсии.
Все в реальном времени выводится на страницы — SEO растет.
3. Создание и модерация пользователей.
К тому моменту, как на платформе появляются гиды и экскурсии, на них уже идет целевой трафик из Яндекса и Google.
Не усложняем и на первом этапе даем пользователям возможность оставить заявку в один клик вместо полноценной регистрации.
4. Заказ и оплата экскурсий пользователями.
Оцениваем удобство заказа экскурсий, дорабатываем юзабилити и уже после этого прикручиваем полноценный кабинет с возможностью бронирования и оплаты.
В итоге к моменту релиза у нас полностью рабочий проект с живыми пользователями, настоящими экскурсиями и целевым трафиком.
По сути, такой подход дал нам возможность за предельно короткое время запустить не просто продвинутый MVP для проверки гипотез, а полностью готовый, пусть и сырой, продукт.
Функционал для добавления экскурсий
В отличие от конкурентов мы даем пользователям возможность самостоятельно добавлять экскурсии. С одной стороны, это дает им больше гибкости, с другой — экономит время и ресурсы администратора платформы.
Процесс добавления экскурсии достаточно сложный по сути: нужно подготовить достаточно много информации и добавить ее на платформу. И это проблема, потому что, чтобы не отпугнуть гидов, этот процесс должен быть очень простым. Страницы экскурсии при этом должны получаться визуально привлекательными, чтобы привлекать пользователей и подталкивать их к заказу.
В итоге, мы придумали, как его упростить и разбили процесс на пять простых шагов.
Шаг 1. Общая информация
Понятные поля для заполнения, информативные подсказки, гибкие настройки — заполнение занимает буквально пару минут.
![пример создания экскурсии: общая информация пример создания экскурсии: общая информация](https://habrastorage.org/getpro/habr/upload_files/dfe/405/0ac/dfe4050acb619493ab6628f67908910f.jpeg)
Шаг 2. Расписание
Интуитивно понятный интерфейс для установки расписания экскурсии. Все по-прежнему предельно просто и занимает минимум времени.
![пример создания экскурсии: расписание пример создания экскурсии: расписание](https://habrastorage.org/getpro/habr/upload_files/860/4db/4ca/8604db4ca67a6f3245c5b0fad8c292dc.jpeg)
Шаг 3. Цена
Все точно так же просто и интуитивно понятно, как и на предыдущих этапах. Можно задать стоимость экскурсии, дать скидку, понизить или повысить цену на конкретный день и время.
Например, мы знаем, что в понедельник утром мало желающих — делаем скидку, а в субботу днем желающих много — можно поставить более высокую цену.
Сколько бы ни было экскурсий (а каждый гид проводит их в год до 1500 раз), мы даем возможность создать ее один раз и назначить сквозные цены с возможностью точечной корректировки.
![пример создания экскурсии: цена пример создания экскурсии: цена](https://habrastorage.org/getpro/habr/upload_files/e8f/df7/380/e8fdf7380a4548f33be5296449f66692.jpeg)
Шаг 4. Оформление
Самый сложный этап: чем больше информации и фото загрузит гид, тем привлекательнее будет выглядеть страница экскурсии.
Но с точки зрения функционала мы и здесь максимально все упростили и сделали все интуитивно понятным.
![пример создания экскурсии: оформление пример создания экскурсии: оформление](https://habrastorage.org/getpro/habr/upload_files/d95/584/7a6/d955847a623c39a15b9906fc63327ff0.jpeg)
Шаг 5. Карта
Сделали удобную систему подсказок, чтобы гиды могли добавлять достопримечательности на маршрут и делать описание экскурсии еще более информативным и привлекательным для туристов.
![пример создания экскурсии: карта пример создания экскурсии: карта](https://habrastorage.org/getpro/habr/upload_files/1c7/017/a07/1c7017a07b831b56d64a539b8a11eeb5.jpeg)
Чаты и уведомления
Так как со стороны заказчика не было владельца продукта, который мог бы нас направить, весь функционал полностью реализовала наша команда: от идеи и логики до финальной реализации.
На выходе — самый удобный на рынке функционал для самостоятельного добавления экскурсий.
В итоге: каждый гид за очень короткое время может создать привлекательную страницу экскурсии, даже если не разбирается в верстке и оформлении. Элегантное решение для оптимизации скорости взаимодействия с базой данных
В процессе разработки функционала для добавления экскурсий мы столкнулись с серьезной проблемой.
Когда гиды задают расписание экскурсий на год вперед — создаются миллионы записей в базе данных, что замедляет сайт. Это делает его менее удобным для пользователей и очень негативно влияет на SEO.
В больших проектах это не проблема: оптимизацией скорости в рабочем режиме занимаются back-end разработчики и DevOps-ы. Но у нас MVP, и у заказчика нет ресурсов на этих специалистов.
Чтобы устранить проблему, мы нашли простое, но очень эффективное решение: вместо создания записи под каждую экскурсию мы создаем запись с общим расписанием. Отдельная запись для экскурсии в БД создается только в момент бронирования.
![пример создания экскурсии: настройки расписания пример создания экскурсии: настройки расписания](https://habrastorage.org/getpro/habr/upload_files/9c9/64b/9a5/9c964b9a5795dee69ab843ddd4fad70b.jpeg)
В итоге количество записей сократилось во много раз, и скорость работы сайта не снизилось, даже когда гиды начали активно добавлять экскурсии каждый день.
Чаты и уведомления
Чтобы не было соблазна перейти в Телеграм или Whatsapp, внутренние чаты должны быть простыми и удобными как для пользователей, так и для гидов.
Чтобы этого добиться, мы построили чаты на основе сокетов. В итоге они работают без перезагрузки, сразу видно, когда кто-то вам пишет и когда сообщение прочитано.
Интересная особенность: чаты открываются только после бронирования.
![пример UI: чаты пример UI: чаты](https://habrastorage.org/getpro/habr/upload_files/28d/2c4/ed0/28d2c4ed0c691481bb2d5782ea60a721.jpeg)
Для реализации мы использовали библиотеку Laravel Echo, которая является стандартной для решения таких задач. Обычно она используется с коммерческим сервисом Pusher, но мы хотели сделать решение независимым и масштабируемым без дополнительных затрат.
Чтобы этого добиться, мы интегрировали Echo с Open source библиотекой socket.io — результат оказался даже лучше, чем мы ожидали изначально.
Это же решение мы использовали для отправки уведомлений о событиях на сайте: изменение статуса экскурсии, новые сообщения в чате и т.д.
Проработка SEO
Фронтенд сайта изначально был реализован при помощи vue.js. Все страницы сайта и метаданные рендерились только в момент загрузки js скриптов.
Хотя Google и Яндекс говорят, что такие сайты индексируются хорошо, на самом деле все совсем по-другому: содержимое сайта они или не видят совсем, или видят частично.
Нам очень хотелось сохранить реактивность, удобство и возможности vue.js, но при этом не использовать сторонние библиотеки для встраивания кода в html. Реализовывать SSR (server side rendering) мы не стали, так как для нас было важно не нагружать сервер: на проекте было очень много данных и потенциально их должно было стать еще больше.
В итоге мы решили, что наиболее оптимальным вариантом будет верстка с помощью шаблона Blade от Laravel для тех страниц, которые должны быть проиндексированы поисковыми системами.
Вынесли всю важную для поисковых роботов верстку в php, там же прописали метаданные, а необходимые для дальнейшей работы страницы и функции оставили в vue.js и использовали данный функционал только в момент взаимодействия пользователя со страницей.
Таким образом, на выходе мы получили страницу, содержимое которой без проблем сканировалось поисковыми роботами, а весь функционал работал плавно, без перезагрузок.
В сочетании с хорошо проработанной структурой, удобным дизайном и быстрой скоростью работы это дало возможность нам сделать почти идеально соответствующий требованиям поисковых систем проект.
В результате он хорошо индексируется и привлекает целевой трафик по нужным запросам, что дает возможность серьезно экономить на платной рекламе и привлекать пользователей из органической выдачи.
Разработка приложении на Flutter для iOS и Android
Для удобства конечных пользователей мы разработали приложения, которые дают возможность быстро и удобно искать и бронировать экскурсии и туры, переписываться в чате и многое другое.
![мокапы приложения мокапы приложения](https://habrastorage.org/getpro/habr/upload_files/f5b/49e/87f/f5b49e87fadaaf4c700acc30deca085a.jpeg)
Приложение реализовано с помощью кросс-платформенной технологии Flutter. Это фреймворк от Google с открытым исходным кодом, который дает возможность создавать приложения для разных платформ с применением единой базы кода.
По сути, Flutter дает возможность создать интерфейс и запрограммировать логику один раз — и приложение автоматически будет работать и на iOS, и на Android.
Это сильно экономит ресурсы разработки и ускоряет запуск приложений. Функция горячей перезагрузки дает возможность быстро проверять и тестировать изменения в приложениях одновременно на обеих платформах. Стоимость поддержки благодаря этому также ниже, чем при разработке отдельных приложений под каждую платформу.
Сэкономить время и ресурсы нам помогло также то, что API на back-end писался для front-end на vue.js и этот же API сразу же можно было использовать на Flutter, что мы и сделали.
Как устроено приложение
При попадании в приложение пользователь без регистрации может знакомиться с экскурсиями.
После выбора экскурсии может зарегистрироваться и прямо в приложении общаться с гидом. Чат, о котором мы уже упоминали выше, тоже кросс-платформенный и работает на любых устройствах.
Еще одна полезная и интересная фича — это возможность проложить маршрут от своей точки к точке сбора. Сервис работает на основе карт Google. Для туристов, которые не ориентируются в городе, это суперважная функция.
Также прямо в приложении можно делать покупки. Для оплаты экскурсии используется пакет webview_flutter для перехода в платежную систему.
Оповещения о важных событиях внутри приложения реализованы через Firebase: пользователям приходят пуши с уведомлениями.
В общем, приложение само по себе полностью закрывает все потребности путешественника и может работать само по себе. Турист может даже не знать о существовании веб-платформы и все делать через приложение.
После запуска. Результаты первых месяцев работы Findgid
Всего за 3 месяца, с очень ограниченным бюджетом мы разработали продвинутый MVP со всем необходимым для старта бизнеса функционалом и огромным потенциалом для развития.
Проработанная архитектура, удобный интерфейс, широкий функционал как для гидов, так и для конечных пользователей — все это дало возможность привлекать целевой трафик буквально с первых дней после полноценного релиза.
Без дополнительной рекламы за первые 3 месяца после релиза проекта в августе 2022 года в нем зарегистрировались 61 гид и 24 пользователя, которые забронировали 235 экскурсий.
![примеры из яндекс метрики: цели примеры из яндекс метрики: цели](https://habrastorage.org/getpro/habr/upload_files/8b6/beb/6e8/8b6beb6e8f8e0eb6ab0b1ed72d691494.jpeg)
Дополнительно менеджеры сами приглашают гидов и помогают им добавлять экскурсии, чтобы дать больший выбор пользователям и увеличить конверсию в бронирование из поиска.
Менее, чем за год после релиза, сайт вышел на посещаемость 1000+ визитов в день, что для нового сайта является очень хорошим показателем.
![примеры из яндекс метрики: посещаемость примеры из яндекс метрики: посещаемость](https://habrastorage.org/getpro/habr/upload_files/c40/aec/191/c40aec191a04637c9f464ddcbba2bfb5.jpeg)
Трафик стабильно растет и будет расти дальше за счет постоянной работы над сайтом, хороших поведенческих факторов и увеличения его авторитета в глазах Яндекса и Google.
![пример из яндекс метрики: целевые запросы пример из яндекс метрики: целевые запросы](https://habrastorage.org/getpro/habr/upload_files/d70/d03/440/d70d034409fe91065e7764c115166934.jpeg)
Рост позиций по целевым запросам в Яндексе.
![пример из яндекс метрики: целевые запросы пример из яндекс метрики: целевые запросы](https://habrastorage.org/getpro/habr/upload_files/151/fb0/f8d/151fb0f8de95673ccf6f96bed6a9038a.jpeg)
Рост позиций по целевым запросам в Google.
Планы, выводы и рекомендации
Спустя год после релиза проект стабильно растет. В планах уже в ближайшее время выйти на 30-50 бронирований в день.
Со своей стороны мы все это время занимаемся доработкой проекта и расширением функционала. В результате платформа за очень короткое время прошел путь от MVP до полноценного работающего и зарабатывающего продукта.
Если вы выходите на рынок, где уже есть похожие продукты — начните проект на месяц позже, но сделайте исследование. Это поможет отстроиться от конкурентов и четко понять, что в проекте должно быть обязательно, а от чего можно отказаться. Вы также поймете, какие недочеты есть у конкурентов и как сделать свой продукт лучше. Исследование поможет сэкономить бюджет и запустить крутой продукт.
Просто сделать продукт сегодня не достаточно. Бум платформ прошел. Пользователи хотят качественного сервиса и бесшовного интерфейса. Продукт должен быть на уровне MVP идеальным в своей основной задаче.
Если ваша платформа заточена на трафик — SEO закладывайте на уровне архитектуры проекта. Поисковая оптимизация — долгий процесс, и чем раньше вы начнете, чем лучше заточите под нее проект — тем больше трафика получите после запуска и тем меньше будет стоить привлечение пользователей.
Буду рад в целом обсудить процессы создания продукта. Как параллелить процессы, как считать экономику таких продуктов и так далее. Сам готов поделиться всем, что знаю.