Разработка мобильного приложения для магазина Бетховен

Сеть зоомагазинов «Бетховен» работает с 1993 года и является одним из лидеров розничной торговли товарами для животных. Сеть включает в себя множество современных зоомагазинов по всей стране и удобный интернет-магазин, который предлагает более 10 000 товаров с доставкой на дом и в ПВЗ.

Когда клиент обратился к команде Surf, у сети уже было приложение, но компания планировала создать собственное нативное приложение для iOS и Android.

Основные задачи, которые нам необходимо было решить:

- реализовать удобный и понятный для покупателей процесс заказа;

- повысить в приложении конверсию в покупки;

Спойлер: Конверсия «визит -> покупка» в старом приложении «Бетховена» составляла 5%. Через 2 недели после запуска первой версии нового приложения конверсия выросла в 3 раза, и это превысило ожидания клиента.

- повысить рейтинг приложения в сторах.

Провели исследование

Чтобы определить основные потребности клиентов, найти возможные проблемные ситуации и барьеры, мы начали работу над проектом с CJM-воркшопа.

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

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

Мы выявили, что есть 2 основных фактора, которые привлекают их в приложение конкретного магазина:

привычный ассортимент;

удобное и быстрое оформление заказа.

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

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

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

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

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

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

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

Команда «Бетховена» вместе с аналитиком Surf подробно проработали каждый прототип и обсудили, какие сложности уже возникали или потенциально могут возникнуть у пользователей. Тщательная проработка позволила создать простое и понятное на всех этапах флоу. Уже начиная с первого релиза, приложение стало получать хорошие отзывы пользователей.

Команда «Бетховена» изначально подготовила собственный UI-kit с фирменными цветами и логотипом. Все эти элементы легли в основу дизайна приложения.

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

В новом приложении полностью переработали процедуру выбора и заказа товара.

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

Сейчас покупатель сети «Бетховен» может:

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

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

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

Полигоны с разной стоимостью курьерской доставки

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

Чтобы пользователь мог быстро ориентироваться в многообразии товаров магазина, мы реализовали фильтры в каталоге товаров.

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

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

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

Слайдер должен перемещаться с увеличением или уменьшением значения, которое вводит пользователь.

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

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

Например, у одного товара могут быть разные по весу упаковки – например, корм с объемом 250 г, 1 кг, 3 кг, 5 кг. Некоторые упаковки могут продаваться по полной цене, а на некоторые может действовать акция. Все это необходимо отразить в карточке товара.

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

При выборе фасовки можно найти самую выгодную акцию

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

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

Пользователь может:

Подарить баллы другому пользователю.

Объединить 2 профиля и посмотреть общую историю заказов.

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

Объединить «задвоившиеся» учетные записи.

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

Выпустить виртуальную карту лояльности или добавить уже существующую.

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

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

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

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

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

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

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

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

Системы пользовательской аналитики (Google Analytics, App Metrica и Firebase) помогают команде «Бетховена»:

анализировать действия пользователей: какое количество пользователей работает в приложении, сколько пришло новых, на каких этапах воронка продаж прерывается чаще и т.п.;

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

Повысили рейтинг приложения в сторах

При запуске первой версии приложения мы столкнулись с тем, что пользователи часто оставляют отрицательные отзывы, причем в случаях, которые напрямую не связаны с работой приложения (например, неправильно указанная цена товара связана с работой бэкенда и никак не зависит от приложения). Тем не менее такие отзывы влияют на общую оценку приложения в сторах. Оценка у «Бетховена» была низкой.

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

Кроме привычных сторов: Google и Apple, приложение «Бетховена» теперь появилось и в Huawei AppGallery. Это позволит владельцам Android пользоваться им несмотря на ограничения.

Результат

По итогам 2022 года процент заказов из мобильного приложения вырос до 40%.