Ломать — не строить: как Surf помог «Петровичу» создать приложение для строителей

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

Вы в блоге Surf, с 2011 года мы разрабатываем мобильные и веб-решения для бизнеса.

📱Узнайте больше о нашем опыте мобильной разработки

✅ Подписывайтесь на наш VC-блог

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

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

В этом кейсе:

Кто такой «Петрович» — коротко о проекте

«Петрович» — сеть строительных магазинов, работает с 1995 года. Так как компания давно на рынке, у неё сложилась своя лояльная аудитория, значительную долю которой составляют профессионалы в сфере строительства и ремонта. Как любой развивающийся в русле современных тенденций проект «Петрович» усиливает IT-направление: помимо официального сайта — классического интернет-магазина, компания создала собственный сервис для удобной работы со строительными проектами — Петрович.BRO.

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

Игорь Заиченко, руководитель группы маркетинговых проектов «Петрович»

Сервисом пользуются прорабы и руководители строительных фирм. Функциональность позволяет вести сразу несколько проектов разной сложности на одной платформе: от небольшого косметического ремонта до стройки частного дома. Для того чтобы ничего не упустить из виду и не ошибиться в расчётах, в сервисе предусмотрена смета и учёт финансов, где можно составлять списки для закупки нужных материалов и покупать товары прямо из сервиса на petrovich.ru, считать метраж, погонные метры для проектов, а также отслеживать процесс оплаты от заказчиков.

Пример сметы в веб-сервисе «Петрович.BRO»
Пример сметы в веб-сервисе «Петрович.BRO»

Сервис был реализован в десктопной и мобильной версиях. Однако компания решила разрабатывать приложение для удобства своих клиентов. Перенести всю базовую функциональность «Петрович.BRO» в мобильное приложение доверили Surf. О том, почему мы выбрали для реализации этой задачи Flutter, и как она менялась с ходом проекта, расскажем далее.

Как нам помог анализ конкурентов

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

При разработке приложения «Петрович.BRO» мы учли эти особенности. Например, в первый скоуп работ решили вносить ключевую функциональность, необходимую для ведения строительного объекта, которая будет понятна как новичку, так и бывалому мастеру.

CJM — всему голова: почему мы начали разработку с исследования

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

После анализа конкурентов, наша продуктовая команда провела CJM — составила карту пути пользователя. На этом этапе мы выделили самые актуальные «боли» и потребности будущих пользователей приложения.

<p>Пример составления CJM для роли «Прораб» в приложении «Петрович.BRO»</p>

Пример составления CJM для роли «Прораб» в приложении «Петрович.BRO»

Основная сложность целевой аудитории «Петрович.BRO» была в том, что руководителям строительных бригад и прорабам неудобно пользоваться веб-версией: большую часть времени они проводят на объектах, где нет доступа к компьютеру. После посещений объектов они садились за компьютер и сводили все заметки из блокнота в единую таблицу Excel. На это уходило много времени и сил, заполнять таблицу со смартфона неудобно: нужно часто переключаться из одного экрана на другой, что снижало скорость обработки данных. Внести же информацию в мобильное приложение можно с телефона и «на ходу».

На этапе CJM мы поняли, что в приложении будут использоваться большие объёмы данных, а уместить больше ста строк таблицы в экран мобильного приложения почти невозможно. Для решения этой задачи мы использовали объектно-ориентированный подход — создали иерархию всех сущностей, которые фигурируют в приложении. Исходя из свойств каждой сущности прописали её роль: смета, объект, исполнитель, адреса и документы — всё это главные действующие лица приложения. Это позволило наглядно представить все объекты, которые сейчас в работе у мастера. В списке карточек отображается краткая информация: название проекта, адрес, контактное лицо (заказчик) и цена. Объект можно редактировать, перемещать в архив и удалять.

Узнайте подробнее о том, как работает наша продуктовая команда

Управление объектами в приложении «Петрович.BRO»
Управление объектами в приложении «Петрович.BRO»

Почему мы выбрали Flutter и как это повлияло на срок разработки

Мы работаем с кроссплатформой Flutter с 2017 года. Что такое кроссплатформа и чем она хороша для бизнеса, читайте тут. Команда Surf успела его попробовать в разработке банковских, развлекательных и e-commerce-приложений. Так, с помощью Flutter мы создали для «Риглы» целых 6 приложений для 3 брендов на 1 кодовой базе. Для крупнейшей сети аптек Flutter стал лучшим выбором, потому что помог сэкономить около 40% бюджета на разработку.

В случае с «Петрович.BRO» сыграли другие «киллер фичи» фреймворка от Google:

  • Он оптимален для тестирования гипотез. С командой «Петровича» мы за полгода создали MVP приложения и протестировали бизнес-гипотезу на востребованность потенциальной аудиторией.
  • Он сокращает time to market. Нам удалось сократить время выхода проекта примерно в полтора раза, относительно разработки двух нативных приложений для Android и iOS.

Flutter — оптимальная технология для реализации нашего проекта.

Игорь Заиченко, руководитель группы маркетинговых проектов «Петрович»

Почему начали с MVP? Для команды «Петрович.BRO» было важно понять, насколько такой сервис нужен потенциальной аудитории, удобен ли он в использовании и снимает ли «боли» прорабов и руководителей ремонтных бригад. Чтобы ответить на эти вопросы, мы создали MVP с необходимым набором функций.

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

Благодаря тому, что мы выбрали Flutter, вносить изменения нужно было в единую кодовую базу, а потом раскатывать для Android и iOS. С нативной разработкой каждую правку пришлось бы вносить в две кодовые базы, что увеличило бы срок разработки.

Как Flutter помогает сокращать срок разработки в разных проектах

Когда дизайн — больше, чем картинки

При создании дизайна мы ориентируемся на правило — функциональность проекта определяет его внешний вид. Для приложения «Петрович.BRO» простой и понятный дизайн был необходимостью: в строительстве фигурирует много данных: цифр, адресов, названий. При добавлении сложного дизайна и дополнительных визуальных элементов мы бы получили приложение, с которым невозможно работать — оно оказалось бы слишком перегруженным. Наш подход оценила команда «Петрович.BRO».

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

Анна Белик, product-менеджер «Петрович.BRO»

Собери сам: как «Справочник» помогает считать стоимость работ

Чтобы автоматизировать часть рутинной работы прорабов, мы создали «Справочник» — набор типовых работ, которые можно собирать как конструктор и быстро посчитать смету для проекта.

«Справочник» в приложении «Петрович.BRO»
«Справочник» в приложении «Петрович.BRO»

Работы из «Справочника» можно группировать для понимания: сколько и какие работы будут проведены на объекте. Безусловный плюс как для пользователей, так и для бизнеса заключается в том, что сервис интегрирован с сайтом магазина «Петрович», в котором можно купить нужные товары. Кроме того, пользователь сразу видит цены и ему не нужно ждать «сюрприза» с увеличением сметы на 30 и более процентов при визите в магазин. В результате, прораб не тратит время на актуализацию сметы, а заказчик всегда видит, что цены меняются не по желанию прораба.

Составляем смету и рассчитываем стоимость ремонта

Основная функциональность как MVP, так и приложения в целом — составление смет. Это язык, на котором прорабы общаются со своей командой и заказчиком. Для тех, кто хотя бы раз пережил ремонт ясно, что зачастую сметы — это тёмный лес. Часто недобросовестные команды обыгрывают это в свою пользу, а заказчик остаётся в неведении: за что именно он заплатил и почему именно столько.

Совместно с командой «Петрович.BRO» мы сделали сметы прозрачными — в приложении на каждую сумму есть разбивка: сколько стоит работа, а сколько товар. Причём стоимость первой можно проверить в «Справочнике», а цены на стройматериалы обновляются автоматически. Чтобы сравнить цены из других магазинов, пользователи должны внести и обновлять их самостоятельно.

Создание новой сметы в приложении «Петрович.BRO»
Создание новой сметы в приложении «Петрович.BRO»

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

В приложении «Петрович.BRO» можно подобрать нужные материалы и отправить смету клиенту
В приложении «Петрович.BRO» можно подобрать нужные материалы и отправить смету клиенту

Каждый, кто пережил ремонт, замечал, насколько это сложная сфера. Найти хороших профессионалов на современном развитом рынке — задача сложная, но решаемая. Однако, если посмотреть на индустрию глазами исполнителей заказов, вскрывается множество нюансов и сложностей. Как, например, ездить весь день по разным объектам, держать в голове, на бумаге или в заметках телефона одновременно информацию о заказчиках, адресах, пожеланиях. А если таких проектов не один, а с десяток? Или, к примеру, вы востребованный профессионал и ваш строительный бизнес процветает и проектов становится около сотни? В таком случае точно понадобится рабочий инструмент, который всегда будет под рукой. В нём будет бережно храниться вся важная информация о каждом проекте, до миллиметра.

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

2525
22
6 комментариев

название у строительной компании топовое

1
Ответить

Это магазин

1
Ответить
Автор

Идеальный нейминг для отрасли, согласны :) Но да, как ответили ниже, это сеть строительных магазинов

Ответить

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

1
Ответить
Автор

Всё верно, информации на проекте, действительно, обрабатывается очень много. Backend в этом проекте на стороне магазина "Петрович", так как сервис связан с основным сайтом. Связь происходит через API.

1
Ответить

Прикольно! Да, строителям реально иногда трудно конкуренцию перебороть

Ответить