Аудит, редизайн сайта и создание PWA для цветочного маркетплейса

Заказчик

«7ЦВЕТОВ» — крупнейшая биржа по продаже цветов B2B-клиентам, среди которых цветочные сети и студии флористики в Москве, Петербурге, Новосибирске и регионах.

Задача

Обновить сайт и разработать мобильное приложение для бизнеса по продаже цветов, чтобы увеличить средний чек и вовлеченность клиентов за счет современного UX/UI и встроенных механизмов удержания.

Цветочный b2b маркетплейс «7ЦВЕТОВ» отсчитывает свою историю еще с начала 2000-ых годов. Несмотря на обширную клиентскую базу, компания столкнулась со снижением конверсии. Пользователи сайта уходили, бросая корзину, и было непонятно, где источник проблемы. Руководству было очевидно, что необходим редизайн сайта, но только ли в нем дело?

Компания обратилась в Siberian.pro за аналитикой и исследованием UX/UI сайта. 

Мы приступили к проекту как аудиторы: выполнили аудит UX/UI сайта биржи (десктоп и мобильной верстки), выявили и записали все найденные проблемы. Однако устаревший дизайн — лишь верхушка айсберга. Найти подлинный источник проблем нам помогла продуктовая аналитика:

• Мы провели ряд интервью с клиентами «7ЦВЕТОВ».

• Затем наши специалисты из отдела дизайна составили 4 портрета целевой аудитории и проработали по каждому сегменту детальную CJM: от регистрации/авторизации пользователя до оформления и отслеживания статуса заказа.

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

• Также собрали бэклог востребованных функций, которые еще предстоит реализовать. 

Аналитика и разработка UX/UI

Оказалось, что типичный user flow пользователя очень плохо соотносится как с бизнес-метриками нашего заказчика, так и с целями самого пользователя. Многие типовые действия (получение актуального прайса, выборка товаров для заказа, фильтры по типу растений, отслеживание поставок и т.д.) выполнялись через громоздкие UI-конструкции или вообще требовали согласования менеджера. Очевидно, каждая такая преграда ухудшала пользовательский опыт и затрудняла конверсию клиентов.  

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

Поэтому нашей первой задачей стало именно получение метрик. В соответствии с потребностями бизнеса мы определили основные метрики и сформулировали дополнительную задачу по расширению количества собираемых событий в аналитике продукта. В результате разработали дерево метрик на доске в Miro. 

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

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

Ниже пример улучшения UX/UI. Старый интерфейс работы с заказами в корзине. 

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

Разработка PWA-приложения

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

В качестве альтернативы нативным технологиям (Kotlin/Swift) мы предложили технологию PWA (Progressive Web App), которая позволяет «превратить» веб-приложение в универсальное мобильное приложение под платформы Android и iOS.

Преимущества такого подхода:

• низкая стоимость разработки;

• короткие сроки реализации;

• возможность быстрой доставки обновлений до конечного пользователя.

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

Основные функции приложения: 

• Новая главная страница со спец.предложениями и новостями

• Каталог с карточками товаров и фильтрами

• Оформление заказа

• Применение промокодов

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

• Подача претензий

• Онбординг пользователя

• Камеры и схемы торговых залов

• История заказов и отгрузок товара, статус отгрузок

• Сканер штрих-кода товаров

Вызовы

Основная сложность в разработке была обусловлена бизнес-моделью биржи. Нам пришлось придумать и воплотить удобный интерфейс для работы сразу нескольких значительно отличающихся способов приобрести товар на маркетплейсе. 

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

• Кроме того, это еще и биржа, работающая по принципу аукциона.

• Юридические лица могут заказывать по разным адресам, с разными формами оплаты, следовательно, нужна функциональность множества заказов и возможность бесшовно переносить или копировать товары между ними.

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

• Для быстрого заказа ранее заказанных позиций именно в нужном формате (например, коробка по 100 цветов) мы добавили в мобильное приложение сканер штрихкодов. Тогда клиент может отсканировать коробку и сразу добавить в новый заказ такой же товар без необходимости даже открывать историю покупок на маркетплейсе.

Результат

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

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

Перейти на сайт