Разработали кроссплатформенное мобильное приложение для клиентов и консультантов МейТан на Flutter.

О клиенте

МейТан –  это косметическая компания, которая реализует свою продукцию через сеть консультантов. Один из наших давних клиентов, с которыми мы работаем уже почти 7 лет, развивая их сервисы.

Цели и проблемы

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

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

Задача

Разработать MVP кроссплатформенного мобильного приложения на Flutter. Под MVP мы подразумеваем не пару экранов с базовыми кнопками, а полноценное приложение с множеством функций, которые нужно было перенести с сайта.

Решение

Мы развивали сайт МейТан 6 лет. Там накопилось много нужной и полезной функциональности. Например: многовалютность, возможность заказа в другую страну (актуально для подарков), оплата несколькими банками и платёжными системами, в зависимости от страны и валюты, и многое другое. Нашей задачей было в обозначенный срок доставить максимум полезных функций в приложение. 

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

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

Мы постарались заморозить доработки сайта на время разработки API для мобильного приложения, но бизнес не ждёт, поэтому мы в процессе оптимизировали функциональность под изменившиеся условия доставки. 

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

Техническое решение

Для разработки мобильного приложения выбрали Flutter. Он позволяет разрабатывать кроссплатформенные (iOS и Android) мобильные приложения с нативным дизайном в короткие сроки, сокращая стоимость для заказчика и оптимизируя ресурсы для администрирования и управления изменениями.

Интеграции

Сервисы онлайн-оплаты

Для оплаты покупок в мобильном приложении, пользователя редиректит на платежную страницу сервиса онлайн-оплаты с передачей суммы покупки по REST API. 

Интегрируемся по API с платежными системами:

• Ю-Касса;
• Альфа-банк.;
• Сбербанк;
• PayPal.

 Виджет Яндекс.Карты

Для встраивания виджета в мобильное приложение использовали SDK MapKit. Адрес пользователя определяется автоматически по геолокации его устройства и на него устанавливается метка пользователя на карте.

Push-уведомления

Для отправки Push-уведомлений мы интегрировались с сервисом Pushwoosh через API. На сайте МейТана уже была функциональность уведомлений, которые приходили консультантам в личный кабинет и на email: поздравления с праздниками, получение нового статуса и т.д. Мы доработали эти оповещения так, чтобы они стали Push-уведомлениями.

Регистрация постоянных клиентов и консультантов

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

Тан – внутренняя валюта, которая измеряет стоимость товаров и объемов личных закупок консультантов, используется для расчетов бонусов.

Постоянные клиенты – люди, которые покупают продукцию МейТана до 45 тан. Их скидка составляет 10%.

Консультанты – люди, которые покупают продукцию МейТана от 45 тан. Их скидка больше и составляет 33%.

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

Итоги

Мы разработали многофункциональное мобильное приложение на Flutter, которое стало дополнительной точкой контакта с пользователями, в том числе благодаря push-уведомлениям. Мы выполнили интеграцию с сервисами онлайн-оплат, Яндекс.Картами, системой аналитики AppMetrica, а также подключили push-уведомления. Push-уведомления позволяют чаще контактировать с аудиторией, а ещё они дешевле смс ;) 

Фишки приложения: 

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

Мы всегда глубоко погружаемся в бизнес клиента, чтобы исходить из его потребностей и реальных целей. Это нам помогло и в этот раз: мы смогли быстро и чётко определить всю нужную функциональность в приложении, так как понимали, что необходимо бизнесу и как он устроен. Разработка на Flutter позволила сэкономить время и разработать кроссплатформенное приложение сразу для iOS и Android, а не делать для разных платформ отдельные приложения.

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