Мы упаковали и реализовали MVP состоящий из двух приложений. Идея стартапа: дать любому девелоперу возможность предлагать потребителю услугу отделки и меблировки на сайте, где покупатель смог бы, как конструктор, «собирать» дизайн для квартиры и подбирать мебель на свой вкус. Стоимость мебели и ремонта можно включить в ипотеку.
Для оформист.рф – это способ поиска клиентов, а для девелопера – способ повысить конверсию за счет расширения целевой аудитории.
Мы реализовали как сам инструмент внедрения – конструктор квартир, так и административную панель для заказчика, где он может добавлять застройщиков, стили, загружать фото и описания, оперативно изменять проекты.
Через месяц после реализации проекта заказчик получил первые 2 контракта с застройщиками.
Главное о кейсе
Цель заказчика: получить долю на высококонкурентном рынке отделки и меблировки, предложив удобный инструмент для расширения спроса и повышения маржинальности.
Наша задача была сделать инструмент, который одновременно соответствует следующим требованиям:
Для потребителя: удобный, понятный конструктор ремонта, который показывает стоимость квартиры в ипотеку с учетом выбранного ремонта и мебели.
Для девелопера: быстро интегрируемый инструмент, который бы не нарушал общую архитектуру сайта.
Для оформиста.рф (заказчика): инструмент, который можно будет представить потенциальным партнерам, оперативно внедрить и начать зарабатывать.
Решение от нас:
Пошаговый конструктор мебели и дизайнерского ремонта, который двумя способами можно встроить в сайт застройщика. Первый (быстрый)- в виде всплывающего окна, чтобы появилась возможность внедрять продукт как можно быстрее – не изменяя архитектуру, и второй (оптимальный), в интерфейс сайта через отдельный модуль с кнопкой или чекбоксом. Для удобного взаимодействия с конструктором мы создали админ-панель для менеджеров заказчика. Там они видят все отклики и может их оперативно обработать, добавить новые варианты стилей, сетов и прикрепить их к определенным квартирам застройщика.
Технические детали
Панель управления контентом.
В качестве основы для создания панели управления контентом мы использовали Node.js фреймворк Strapi, предоставляющий из коробки готовую бэкенд и фронтенд оболочки.
В ходе кастомизации бэкенд части приложения были написаны несколько плагинов для кастомизации и создания новых контроллеров и сервисов, добавления крон-задач (сron jobs), функций жизненного цикла записей, модулей для работы с Excel-таблицами.
Помимо этого, была значительно расширена фронтенд-часть приложения: реализованы кастомные модули для управления контентом, настроена система прав, доступов к модулям и плагинам.
Виджет
В ходе разработки виджета использовались популярные инструменты экосистемы React.
В качестве инструмента сборки был выбран Vite, основными преимуществами которого являются ускорение процессов сборки проекта и обновления сервера разработки, что позволило сократить время разработки.
Анимационные эффекты были реализованы с помощью библиотеки Framer Motion.
Процесс создания и взаимодействия с заказчиком
В процессе создания мы столкнулись несколькими проблемами, здесь их описание и решение:
Упаковать сложную систему выбора в какое-то простое визуальное решение.
Мы создавали не типичную архитектуру, с которой пользователь мог не сталкиваться раньше, а значит, не иметь подобного пользовательского опыта. От первой идеи, когда все находится в одном окне, почти сразу отказались.Такой UX путал пользователя, не знакомого с ним.
Как объяснить клиенту, что сначала выбирается стиль и он единый на всю квартиру? А то, что для комнат уже подбираются мебельные сеты только из выбранного стиля? Как показать ему то, что категория ремонта зависит от стиля и она также единая для всей квартиры?..
После анализа конкурентов мы поняли, что вдохновиться не получится даже у крупных застройщиков, предлагающих квартиры с ремонтом. Тестирование на пользователях показало, что решения довольно запутанные, поэтому пришлось делать логику с нуля. Функционал мы поделили на шаги. Объяснить то, что пользователю делать проще, когда глаза не разбегаются. Мы смогли уложить всё в 2 шага, хотя первоначально отталкивались от трех, чтобы не испугать потенциального покупателя числом шагов.
2. Уложиться в сроки и реализовать именно MVP, который нужен был стартапу для проверки его жизнеспособности.
Тут мы определили функционал, который закладываем в MVP продукта, а также прописали то, что сможем добавить в скором времени. В разработке мы заложили возможность для роста, чтобы, если гипотеза стартапа подтвердится: ни нам, ни заказчику не пришлось “пилить с нуля”.
3. Убедить заказчика отказаться от брендбука и использования элементов оттуда, отдав предпочтение более универсальному дизайну.
Наша задача была сделать что-то универсальное, чтобы не было необходимости адаптировать продукт под каждого заказчика и тратить на это время. Интерактивные элементы и фирменные цвета из брендбука для этого не подходили, так как мы хотели исключить инородность интерфейса. Например, когда на преимущественно синем сайте с определенным стилем открывается зеленый попап с другими элементами, это может вызвать недоверие.
Мы сделали лаконичный черно-белый дизайн. На презентации визуальной концепции заказчику все понравилось. Ограничились тем, что добавили название бренда в левый нижний угол.
Единственный камень преткновения, от которого мы пытались, но не смогли отвертеться: заказчик настаивал на использовании фотографий собак на виджетах. В итоге мы сделали 2 варианта: с собаками и мебелью, а решение того, что лучше, оставили на A/B тесты. Кстати, чем больше мы на этих собак смотрели, тем сильнее они начали нам нравиться.
Подробнее ознакомиться с итоговым решением можно посмотрев прикрепленное видео.
Прочая информация
В дальнейшем мы планируем реализовать функционал, когда после выбора дизайна формируется PDF документ с выбранным дизайном и ремонтом. Его пользователь сможет сохранить, поделиться в мессенджере, использовать для сравнения и т.д.
Мы также хотим сделать третий шаг с формой, которая будет интегрирована с CRM девелопера и заказчика (оформист.рф): в самом продукте.