Бетховен

Мобильное ecommerce приложение для крупной всероссийской сети магазинов для животных.
Содержание

Клиент

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

У бренда более 100 зоомагазинов по всей России, ветеринарная клиника и интернет-магазин. Работает с 1993 года. В магазинах бренда можно купить более 10 000 товаров для животных. Есть доставка на дом или в пункты выдачи заказов.

Задача

Новое приложение для растущего бизнеса

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

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

Решение

Рисуем «карту» пути пользователя

Работу с «Бетховеном» мы начали с CJM-воркшопа. 

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

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

Дополнительно мы провели серию интервью с клиентами зоомагазинов и удостоверились, что наша «карта» построена верно. После этого приступили к разработке.

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

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

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

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

Фильтры

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

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

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

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

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

Развитие проекта

После запуска первого релиза мы продолжили разработку нативного приложения для 2 платформ — iOS и Android.

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

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

Результат

Первый релиз нового мобильного приложения выпустили в январе 2021

Проект потребовал серьёзной переделки бэкенда. Со стороны клиента с нами работала целая команда — руководитель проекта, технический директор, backend-разработчик, сотрудник отдела маркетинга, тестировщик. Со стороны Surf в проекте участвовали 1 менеджер, 1 аналитик, 2 дизайнера, 2 QA, 3 Android и 3 iOS разработчика. Вместе с командой «Бетховена» мы проделали большую работу, внесли доработки в backend и реализовали быстрое и работающее без ошибок мобильное приложение.

И дизайн, и функциональность

В новом мобильном приложении «Бетховена» мы реализовали следующие возможности:

  1. каталог с фильтрами;
  2. голосовой поиск товара;
  3. поиск удобного магазина на карте;
  4. профиль пользователя с программой лояльности, расчет скидок, накопление и списание бонусов;
  5. виртуальная бонусная карта;
  6. удобное оформление заказов с учетом геопозиции;
  7. возможность повторить предыдущий заказ;
  8. расширенные опции при оформлении доставки;
  9. варианты оплаты, включая Apple/ Google Pay
  10. контроль выполнения заказа.
В приложении можно зачислить или списать бонусы. Товары удобно искать, выбирая нужные фильтры

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

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

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

От старого приложения «Бетховен» полностью отказались. Но если клиент уже покупал в интернет-магазине, то он может использовать свою учётную запись в новом приложении без повторной регистрации.

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

А вот что говорят про приложение пользователи

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

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

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