Свадебный сервис «Ladno»: история разработки от идеи до релиза

Перед командой Scrum studio White заказчик поставил задачу создать сервис и мобильное приложение для iOs по планированию свадьбы. Заказчику — Свадебному агентству — был необходим сервис, с помощью которого подготовка к свадьбе показалась бы увлекательной игрой, а все события по подготовке к мероприятию можно было объединить в одном месте. Создавая приложение мы отталкивались от проблем, которые появлялись у невест и молодых пар при организации торжества. Чтобы определить проблемы, наша команда проводила глубинные интервью с невестами, контакты которых дал заказчик.

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

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

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

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

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

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

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

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

Можно подытожить: целью нашей команды при разработке свадебного планировщика стало создание единого пространства для планирования свадьбы “под ключ” и разработка удобного “легкого” интерфейса, для нашей целевой аудитории.

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

Главный дашборд

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

Управление бюджетом

Трекинг задач по подготовке к свадьбе

Поиск и выбор подрядчиков

Создание списка гостей

Подбор образов жениха и невесты

Интеграция каталога свадебных магазинов и подрядчиков

Создание базы полезных статей и советов

Решить поставленные задачи и цели невозможно без исследований проблемы и рынка. Поэтому наша команда провела детальный анализ референса англоязычного сайта по планированию свадьбы https://bridebook.com/uk и свадебного онлайн сервиса https://wedwed.ru/. Это сайты-конкуренты предлагают свой функционал для организации вопросов, связанных с планированием свадебного торжества.

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

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

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

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

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

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

Адаптивный дизайн для различных устройств

Интерактивные элементы для удобного использования

Возможность сохранения прогресса

Систему уведомлений о задачах

Функцию экспорта данных в Excel

Кроме этого мы подумали над важными дополнительными возможностями продукта:

Системой монетизации через подписку

Интеграции с виджетом Pinterest для галереи декора

Системы отзывов и рейтингах о подрядчиках

Сохранения избранных элементов

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

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

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

Важное значение мы уделили функционалу интерфейса и внешнему виду приложения. Это сыграло решающее значение при разработке свадебного планировщика. В итоге, готовая дизайн-концепция свадебного сервиса включает в себя следующие разделы:

Для начала работы с сервисом невесте необходимо зарегистрироваться.

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

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

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

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

Галерея декора с фильтрами по стилю и цветовой гамме позволяет пользователю ознакомиться с подборками фото. Есть возможность добавлять понравившиеся идеи в Избранное. 

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

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

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

Список дел с напоминаниями. Раздел включает в себя список как уже готовых дел, необходимых для любого мероприятия, так и дает возможность добавить новые задачи для выполнения.

Раздел Заметки оформили в формате стикеров.

После обсуждения возможных вариантов технической реализации мы решили остановится на использовании стека React.js + библиотеки Next.js. На этих стеках мы разработали личный кабинет сервиса и iOs приложение (SwIft). Рекламный лендинг мы создали на нативном HTML5 + JavaScript, а в качестве админки использовали 1С-Битрикс.

В итоге набор технологий, инструментов и платформ в стеке выглядел так:

React.js + библиотека Next.js, 

Выделенный VDS-сервер,

Система аналитики (Яндекс.Метрика/Google Analytics),

Резервное копирование данных и Система контроля версий Git,

Отслеживание истории изменений, кто из когда разработчиков и когда вносит правки в код,

Работа с ветками — возможность создавать параллельные версии проекта для разработки новых функций или экспериментов без влияния на основную ветку (master),

Слияние изменений и разрешение конфликтов при одновременной работе нескольких разработчиков,

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

Мы упаковали сайт в прогрессивное веб-приложение (PWA) с расширенными возможностями, которые напоминают нативные мобильные приложения. Сделали мы это в качестве тестирования гипотезы — “Невесты преимущественно скачивают iOs приложение Ladno и используют сервис c мобильного устройства”. PWA отправляют push-уведомления, функционируют без подключения к интернету и хранят данные непосредственно на устройстве пользователя, что очень удобно в нашем случае.

Подводя итоги нескольких месяцев разработки можно поставить статус “выполнено”:

Рекламный лендинг

Личный кабинет пользователя с регистрацией/авторизацией

Главный дашборд

Список дел

План рассадок

Список гостей с фильтрацией

Калькулятор бюджета

Галерея декора с фильтрами

Каталог подрядчиков и магазинов

Библиотека полезных статей

Запущено мобильное приложение (PWA) для iOs

Самое главное, мы справились с поставленной целью, создав свадебный планировщик «Ladno». Результат — веб-сервис и мобильное приложение, в котором вся информация, идеи, бюджет и планирование хранятся в одном месте, прямо под рукой! Этот планировщик стал оптимальным решением для каждой невесты при подготовке к свадьбе. Организация торжества — это ответственное дело, вызывающее стресс, но когда все планы, вопросы, задумки, списки, денежные расходы и документы хранятся в одном месте, невеста может расслабиться и планировать свадьбу на раз-два-три!