Бетховен

Мобильное e-commerce-приложение, с которым клиенты стали покупать в 3 раза чаще
Содержание

Клиент

«Бетховен» – один из лидеров розничной торговли товарами для животных. Работает с 1993 года.

Задача

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

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

Коробочное решение было недостаточно гибким, для того чтобы подстроить его под потребности бизнеса. Поэтому компания «Бетховен» решила создать новое приложение с нуля. Главным в нем они считали удобство пользователя при выборе в каталоге и оформлении заказа. Мы решили эту задачу, соединив в проекте свое продуктовое видение, сформированное за 10 лет работы с ведущими e-commerce-продуктами и экспертизу в дизайне. В результате, получилось удобное современное приложение, которое повысило продажи через этот канал втрое. 

Команда «Бетховена» очень основательно подготовилась. Они пришли со списком «болей» и готовы были уделять проекту много времени. Мы вместе продумывали флоу и рассматривали все юзкейсы. Такой подход команды заказчика помог эффективнее и быстрее пройти исследовательскую фазу и создать успешное e-commerce- приложение. 

Вызовы

Реализовать удобное и понятное клиентам flow заказа

Совместно с командой Бетховена мы провели CJM-воркшоп и серию глубинных интервью. Это помогло нам определить основные потребности клиентов, найти многие возможные проблемные ситуации и барьеры. Проработка каждого шага в пути клиента в приложении помогла нам выстроить идеальный flow. 

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

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

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

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

Как мы это сделали

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

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

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

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

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

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

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

Для первого релиза — самые приоритетные опции

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

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

Функциональность в основе дизайна

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

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

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

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

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

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

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

Фильтры для удобной работы с каталогом

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

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

Информативная карточка товара

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

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

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

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

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

Программа лояльности

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

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

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

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

Анимация при ошибках

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

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

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

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

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

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

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

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

С технической точки зрения реализовать этот инструмент несложно: Google и Apple предлагают готовое API для интеграции.

Результат

В первые же 2 недели работы нового приложения мы получили 800 заказов, конверсия составила 15%. Для нашего направления деятельности это очень сильный результат. Процесс работы с клиентом в Surf построен максимально удобно. Все проблемы, вопросы и идеи обсуждают мгновенно. Каждый flow воспринимается и прорабатывается командой проекта как собственный.
Александр Линин

Директор по электронной коммерции «Бетховена»

Давайте создадим мобильное приложение под ваши задачи вместе
Обсудить проект
Обсудить проект