Как мы сделали для сети «Бетховен» приложение, с которым пользователи стали покупать в три раза чаще

«Бетховен» – одна из самых крупных российских сетей товаров для животных. Компания пришла к нам с задачей разработать новое мобильное приложение. К тому моменту они уже проверили гипотезу о том, что оно будет востребовано их клиентами. Для этого они запустили простое приложение, созданное на основе коробочного продукта. Гипотеза подтвердилась: пользователи были готовы заказывать через новый для компании канал продаж. Но возможностей коробки активно растущему бизнесу не хватало, и компания решила создать новое приложение с нуля.

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

Мы разработали новое приложение для сети «Бетховен». В первый же месяц после запуска конверсия «визит -> покупка» выросла втрое по сравнению со старым приложением — с 5 до 15%. Рассказываем, как это было.

Первое приложение сети «Бетховен» было ограничено в возможностях: в нём нельзя было делать подборки, размещать акции и спецпредложения, применять промокоды. Процесс оформления заказа был очень негибким, и в нём было много ошибок.

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

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

Основательный подход всей команды в сочетании с нашим продуктовым видением, сформированным за 10 лет работы с ведущими e-commerce-продуктами, и экспертизой в дизайне сразу принесли свои плоды: уже с первого релиза приложение стало получать хорошие отзывы пользователей, а конверсия превзошла ожидания клиента.

Перед запуском проекта провели CJM. CJM (Customer Journey Map) — инструмент, который позволяет выявить потребности клиента, его мысли, желания и проблемы в каждой точке взаимодействия с продуктом от осознания потребности до покупки с учётом его целей, эмоций, сомнений и страхов. Он помогает высокороувнево взглянуть на путь пользователя, лучше его понять, а следовательно, даёт хорошую базу для дальнейшего проектирования. Подробнее про эту услугу рассказываем здесь.

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

• привычный ассортимент;
• удобное и быстрое оформление заказа.

Отдельно рассмотрели все негативные ситуации, из-за которых пользователи могут отказаться от покупки в приложении.

Во время исследования мы обнаружили, что пользователи слабо привязаны к бренду конкретной сети, им важнее бренды производителей. Концепцию приложения строили, отталкиваясь от этой проблемы. Чтобы привязать пользователей к бренду, придумали идею экосистемы для pet-parents с pet-friendly заведениями, грумерами, местами выгула и профилем питомца. При этом сам e-commerce стал не самоцелью, а лишь прочным фундаментом для этого.

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

В итоге, в первом релизе решили сосредоточиться на двух основных моментах:

• создать удобный каталог, в котором просто ориентироваться и выбирать товары;
• реализовать быстрое оформление заказа с простыми и понятными клиенту шагами.

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

Детально проанализировали прототипы. Команда Бетховена вместе с нашим аналитиком подробно проходили по каждому прототипу будущего приложения: обсуждали, какие проблемы уже были у клиентов на этом этапе или потенциально могут возникнуть.

Упростили и ускорили оформление заказа при помощи моделей и хранилища. В интернет-магазине «Бетховен» более 10 000 товаров. Чтобы быстро актуализировать информацию по любому из них использовали сложную логику работы с большими таблицами.

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

Добавили фильтры для удобной работы с каталогом. Сориентироваться в 10 000 товарах без фильтров невозможно. Поэтому их добавление в каталог стало одной из важных задач. Для пользователя, фильтры – это один-два экрана, где он может быстро отметить нужные параметры и найти товар. Но при разработке потребовалось учесть множество моментов:

1. Какие данные клиент может вводить: для поля количества это могут быть только целые числа, а вот вес упаковки корма не обязательно кратен килограмму, там допустимы нецелые значения.
2. Нужно предусмотреть возможные ошибки: например, когда минимальное и максимальное значения фильтра равны между собой.
3. Слайдер должен перемещаться с увеличением или уменьшением значения, которое вводит пользователь.
4. К подборке товаров пользователь может перейти из разных мест – из обычного каталога, с акции или подборки на главной странице. Если он переходит с акции, то товары сразу фильтруются по бренду и размеру скидки. Если из обычного каталога – все фильтры должны быть сброшены.

Сделали информативную карточку товара. Команда «Бетховена» хотела, чтобы информация в карточке товара была подробной и актуальной. Для этого интегрировали приложение с программами лояльности, складского учета и каталогом товаров, откуда подтягиваются актуальные цены, наличие и информация по скидкам.

Одной из сложных в реализации фич стал листинг товаров. У одного товара могут быть разные по весу упаковки — 250 г, 1 кг, 3 кг, 5 кг. На некоторые из них может действовать акция. Все это отразили в карточке: пользователь в ней может переключаться между разными упаковками и видеть акции. Каждый такой тап — это отдельный запрос в базу, который подтягивает изображение и цену, и карточка товара меняется. Но для пользователя этот процесс происходит быстро и бесшовно.

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

Реализовали инструменты для анализа поведения пользователей. Приложение интегрировали с несколькими системами пользовательской аналитики: Google Analytics, App Metrica и Firebase.

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

У сети «Бетховен» развитая программа лояльности: клиенты могут оплачивать до 90% покупки бонусами, получать кешбэк, дарить баллы и многое другое. Все эти возможности нужно было реализовать в мобильном приложении

Мы постарались учесть все возможные юзкейсы, в том числе те, что могут вызвать проблемы. Например, добавили возможность объединить 2 профиля — старый и новый — и накопленные в них бонусы. Для этого потребовалась большая работа для синхронизации «задвоившихся» учетных записей одного пользователя. Так как в интернет-магазине «Бетховен» можно зарегистрироваться и по номеру телефона, и по электронной почте, у многих пользователей было 2 разных учётки: первая — с привязкой к телефону, вторая — к почте. Объединить их самостоятельно пользователи не могли. Кроме того, у них не получалось привязать существующую карту к обоим профилям или выпустить новую. Чтобы решить эту проблему, в приложении реализовали сложный механизм объединения учетных записей.

Ещё реализовали возможность пользоваться одной картой лояльности для всей семьи: все её члены могут привязать карту в приложении и получать баллы за покупки. Списывать баллы при этом может только один из них — тот, на чьё имя карта зарегистрирована.

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

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

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

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

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

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

Приложение Бетховена продолжает развиваться. На очереди новые фичи, которые сделают его ещё удобней и помогут ещё повысить конверсию. На своём примере Бетховен доказал, что один из главных секретов успеха e-commerce-приложения — продуманное флоу, чтобы клиент мог легко работать с приложением на любом этапе, будь то выбор в каталоге, оформление заказа или списание бонусных баллов.