Преимущества разработки PWA приложения: Кейс NFM AGRO
О проекте:
NFM AGRO — официальный дистрибьютор сельскохозяйственной техники Case IH в Украине. Компания насчитывает 22 региональных представительства, 13 сервисных центров, 22 склада запасных частей и одну из самых крупных в Украине технических баз в Полтавской области по состоянию на 2020 год.
Не смотря на специфику ниши, конкуренция в этом В2В сегменте в Украине достаточно высокая. В 2019 году руководство NFM AGRO решило предпринять шаги по поиску экстрауслуг и усилению собственного бизнеса. В качестве конкурентного преимущества было решено создать мобильное приложение для операторов и менеджеров. Представители компании обратились к нам, Турум-бурум, как к экспертам в юзабилити с задачей создать мобильное приложение.
Приложение должно было решать главную задачу:
стать правой рукой менеджера, его личным кабинетом, а для нового клиента — удобным и понятным руководством. Здесь пользователь сможет в любой момент ознакомиться с новой техникой, записаться на обучение, получить поддержку сервиса, заказать расходные материалы и прочее.
Погружение в особенности В2В бизнеса
Это был новый опыт работы с B2B сегментом. Для того, чтобы дизайн приложения соответствовал ожиданиям клиента, покрывал бизнес процессы компании и решал задачи пользователей, команда Турум-бурум глубоко погрузилась в бизнес клиента. Мы посетили офис компании в Днепре, тесно общалась с отделом маркетинга NFM AGRO. Они помогли нам узнать особенности ниши и внутренних бизнес-процессов. Подробно описали, как происходит выбор техники, в чем могут возникать сложности и как этот этап можно упростить. Разъяснили отличия товаров, помогли с подбором иконок, чтобы правильно визуализировать технику.
Основная сложность заключалась в том, что основной процент целевой аудитории — это люди старшего возраста, которые не являются активными юзерами мобильных устройств. Поэтому главной задачей стало сделать приложение с максимально простым и понятным интерфейсом.
В качестве образца взяли приложение «Новой почты», так как множество людей успешно им пользуются, функционал сервиса достаточно простой и понятный. Было принято решение протянуть аналогичные паттерны поведения в новом приложении. Для этого нам предстояло упростить процесс сложного выбора и заказа тракторов и прочей с/х техники, а также запчастей для них.
Основные решения в дизайне мобильного приложения NFM AGRO
Мы создали:
- удобный главный экран, чтобы с него за пару кликов можно было попасть в нужный раздел, найти ближайшее представительство в регионе, связаться с менеджером и т.д.
- страницу выдачи оформили аналогично главному экрану — крупные плитки с кастомными иконками техники.
- проработали карточку товара и фильтры, где можно просмотреть фотографии, понять разницу различных модификаций техники и прямо из приложения оформить заявку на приобретение техники.
- упростили процесс создания заявки. Теперь менеджеру не нужно вручную вбивать название, модель и прочие данные о техники, а достаточно выбрать информацию из выпадающего списка.
Также автоматически выводится информация об актуальной технике для постоянного пользователя. Например, при оформлении заявки на ремонт, пользователю не нужно вручную вбивать информацию, так как заявка уже автоматически практически заполнена на основании данных, которые подтягиваются из личного кабинета пользователя.
Наладить этот функционал помогла проработка suggest-поиска. Т.е. когда менеджер начинает вбивать наименование техники, приложение ищет актуальные совпадения и предлагает их на выбор.
В результате работы над проектом мы создали простой, но максимально продуманный дизайн, чтобы и продвинутый, и начинающий пользователи могли решить свои задачи.
От дизайна к разработке мобильного PWA приложения
Изначально проект приложения зашел к нам на дизайн, после чего в ходе работы над интерфейсом наша команда предложила руководству компании NFM AGRO разработать его на технологии PWA.
PWA (Progressive Web App) — технология в разработке веб-приложений, которая позволяет создать сайт визуально и функционально напоминающий mobile app, но оно будет отображаться через браузер.
Подробнее в статье: Что такое PWA и стоит ли использовать его при создании интернет-магазина.
В данном случае разработка на PWA давала следующие преимущества:
- клиент получал не нативное приложение, которое покрывало все задачи бизнеса, было понятное и доступное, без лишних элементов, которые усложняли бы работу продукта;
- дешевле в разработке, так как пишется единый код сразу на две платформы, IOS и Android;
- все изменения в приложении отображаются моментально, не нужно выпускать обновления;
- приложение весит крайне мало, около 1МБ, что намного меньше, чем средний размер нативного приложения.
Особенности разработки PWA приложения
Создание оболочек под IOS И Android
Мы создали специальные оболочки для приложения под операционные системы IOS и Android. Во время запуска приложение через эти оболочки обращается напрямую на сервере, где содержится весь его функционал. Плюс такого решения в том, что любые правки можно вносить, не ожидая валидации со стороны App Store и Google Play. Так как правки вносятся на сервере и они моментально подтягиваются всем пользователям. Например, можно быстро поменять наименование или количество пунктов меню.
В сравнении:
Чтобы поменять какой-то пункт меню в нативном приложении, необходимо:
- выпустить обновление
- опубликовать его, что может занимать от двух дней до двух недель
- пользователю необходимо скачать обновление и только после этого он увидит изменения.
Для не нативного PWA приложения все изменения отображаются моментально на двух платформах.
Полная синхронизация с сайтом
Если клиент оформляет заявку на сервисное обслуживание в мобильном приложении, то в заявку автоматически подтягиваются с сайта все данные о ранее купленной технике. Т.е. пользователю не нужно вручную вводить сложные артикулы, а достаточно выбрать нужные позиции из выпадающего меню. Либо клиент может внести новые позиции, которых ранее не было в базе и они автоматически будут в дальнейшем отображаться в его личном кабинете.
Ограниченный доступ к приложению
Одной из особенностью проекта NFM AGRO является то, что это частично закрытое приложение. Т.е. для использования приложения обязательна авторизация.
Изначально планировалось выпустить полностью закрытое приложение. Но в момент публикации тестовой версии на App Store, мы получили замечание, что PWA приложение имеет часть функционала, которое не требует персонализации. Поэтому нам пришлось в оперативном порядке дорабатывать проект и сделать каталог с техникой доступным для любого пользователя. А оформление заявки на сервис осталось закрытым и доступным только для авторизированных пользователей.
Результаты запуска PWA приложения
Насколько удалось реализовать все задуманное, вы можете протестировать сами в App Store и Google Play. Но благодаря технологии PWA компании Турум-бурум удалось:
- создать простой, понятный продукт, в котором соблюдены все стандарты современной разработки;
- реализовать конкурентное преимущество для компании NFM AGRO, которое позволяет предоставить более клиентоориентированный сервис и доступ к услугам компании в любое время;
- облегчить процесс работы внутри компании.