Немного о заказчике
Koblik Group — крупный производитель сельхозтехники, в который входят четыре агромашиностроительных предприятия и сеть дилерских центров. Продукцию выпускают на заводах в России и Беларуси, а продают на просторах всего СНГ. Сотрудники компании ведут сделки в корпоративной CRM-системе, но компания обратилась к нам за разработкой мобильной версии. И вот почему.
CRM в блокноте
Хотя у заказчика 50 дилерских центров в разных городах и странах, продажи часто происходят вне стен комфортных офисов. Торговые представители посещают сельскохозяйственные выставки, заезжают во владения своих клиентов и нередко заключают сделки прямо в поле. Здесь и начинаются проблемы.
Менеджеры по продажам сельхозтехники часто оказываются в местах без интернета
Корпоративная CRM-система на базе 1С работает только на ПК и только с интернетом. Ловить сигнал по пояс в пшенице с ноутбуком в руках не очень уж удобно — сотрудникам было легче записывать информацию о клиентах в бумажные блокноты и переносить заметки в CRM уже в офисе. На это уходило много времени, а важная информация могла затеряться среди других записей и пометок.
Оффлайн-решение
Решить проблему должно было мобильное CRM-приложение с доступом к базе данных компании и синхронизацией заметок. Это информационно-нагруженный проект со сложным бэкендом, но было важно сделать его простым и стабильным. У нас уже был опыт работы с чужим бэкендом, когда работали над криптокошельком и над приложением для умных холодильников. Мы были уверены в своей экспертизе и взяли проект в работу.
У заказчика было несколько требований к приложению:
- Оно должно продолжать большую СRМ-систему. Продажники не должны учить новые нейминги и разбираться в незнакомой логике.
- У приложения должен быть оффлайн режим, а синхронизация с большой CRM-системой должна происходить автоматически.
- Интерфейс должен быть достаточно простым, чтобы им могли без проблем пользоваться сотрудники 40-50 лет.
Исходя из пожеланий заказчика, прикинули, что нам предстояло сделать:
- Изучить массивную CRM-систему и оставить только необходимые функции. Адаптировать привычный для менеджеров UX под мобильный интерфейс, сделать его максимально чистым и понятным.
- Синхронизировать мобильную CRM-систему и десктоп-версию на 1С. Приложение должно не только отправлять данные «с полей», но и подгружать актуальные изменения из базы.
Определили полезное, избавились от лишнего
За годы продаж менеджеры привыкли к интерфейсу CRM и научились ориентироваться в десятках разделов, графиков и списков. ПО заказчика предлагало широкий набор возможностей, но часть из них были бесполезны в командировке и только бы усложнили приложение. Отсюда первая проблема: какие функции оставить в мобильной версии, при этом не нарушить налаженный рабочий процесс?
На этот вопрос отвечал системный аналитик. Он общался с заказчиком, выявлял потребности менеджеров и их привычные паттерны работы. Без лишних функций CRM-ка сократилась до трех разделов, на которых нам и предстояло сосредоточиться:
- Календарь
- Интересы
- Партнеры
Определившись со структурой, системный аналитик разработал BPMN-карту, где описал все элементы приложения, и как с ними будет взаимодействовать пользователь. Мобильная CRM обрела свою логику, и мы могли приступить к дизайну.
BPMN-карта вкладки «Партнеры» — одного из основных разделов нашего приложения
Докрутили айдентику
У клиента уже была своя айдентика: логотип и фирменные цвета. Мы взяли их за основу, но адаптировали с учетом особенностей приложения.
Цвета компании — черный, оранжевый и белый — рассчитывались в первую очередь на печатную продукцию, поэтому были тускловатыми. Мы сделали их яркими и контрастными, чтобы интерфейс распознавался даже под солнцем.
Изменили изначальную цветовую палитру для лучшей контрастности
В качестве основного шрифта выбрали Noto Sans. Это популярная гарнитура без засечек и с множеством начертаний. Округлые формы делают шрифт дружелюбным, что хорошо подходит нашей возрастной аудитории. Весь текст в приложении мы сделали большим — читать под открытым небом стало легче.
Фон сделали белым — это привычно для аудитории, а на улице добавляет читабельности
Переизобрели разделы в «Интересах»
Хотя при создании приложения мы ориентировались на 1С клиента, ее интерфейс нам совсем не подходил. Большая CRM-система работала только на десктопе, и чтобы перенести ее на смартфон, дизайн пришлось изобретать заново. Начнем с раздела «Интересы».
Так выглядит вкладка интереса в CRM-системе клиента. О чистоте и простоте говорить не приходится
Когда менеджер договаривается о сделке с партнером, появляется «интерес». Это не продажа, а только намерение сотрудничать, хоть и подробно описанное. Чтобы удобно следить за интересами и быстро доводить их до продаж, менеджер заносит их в CRM.
Процесс создания интереса никогда не бывает быстрым: менеджер вносит в приложение данные о партнере и о типе сделки, ее статус, номенклатуру техники и еще много всего. Чтобы помочь продажникам не потеряться в этой процедуре, мы добавили в приложение прогресс-бар. Теперь торговые представители заполняют интересы в формате опроса и могут посмотреть свой прогресс на индикаторе сверху.
Пользователь не пропустит важный этап и всегда может узнать, сколько шагов ему осталось пройти
Раздел с интересами реализовали в виде канбан-доски: процесс продаж разделен на этапы, по которым перемещаются карточки интересов — от поступления до завершения. В таком формате удобно следить за рабочими задачами, поэтому его часто используют в CRM-системах.
Канбан-доску тоже оптимизировали под смартфон: перемещение между этапами сделали горизонтальным свайпом, а просмотр интересов внутри этапа — вертикальным. Чтобы пользователю было легче ориентироваться на доске, ввели цветовое кодирование. Каждому этапу — свой цвет.
На случай, если этапов станет больше, предусмотрели дополнительные цветовые решения
Сохранили привычные элементы в «Календаре»
Интересы могут длиться несколько месяцев и содержать до 30 «взаимодействий» — так продажники называют встречи с клиентом, звонки и письма. Удобнее всего следить за ними через календарь.
В нашем календаре есть два режима просмотра — месяц и день. В первом случае мы видим все дни месяца, а нагруженность на день отображается точками разных цветов. Менеджеры привыкли проверять уровень загруженности в календаре, и мы сохранили эту возможность.
Просмотр взаимодействий на месяц
Если нажать на дату, можно подробно изучить взаимодействия на этот день. При этом в верхней части экрана есть шкала с остальными днями недели, по которой можно легко перемещаться.
Просмотр взаимодействий на день и неделю
Помогли сэкономить в «Партнерах»
Менеджеру в приложении всегда доступен список «партнеров». Это могут быть как покупатели, так и поставщики техники, с которыми сотрудничает компания. Если при создании интереса партнера не оказалось в базе, его обязательно нужно добавить — это ускорит создание будущих сделок и не даст контактам потеряться.
Добавить партнера, найти его в базе и посмотреть основную информацию можно даже оффлайн
Покупатели и поставщики сильно разнятся между собой: юрлица и физлица, дилеры и лизингодатели из разных отраслей и регионов. Все эти подробности о партнере нужно указывать в десктопной CRM-системе, и заказчик планировал перенести такой подход на смартфон.
Дополнительная информация добавляла несколько разветвлений в флоу, а разработка увеличивалась на десятки часов. Проект становился значительно дороже, чем предполагалось.
Так изначально выглядело создание партнера — половина от всего Figma-проекта
Вместе с заказчиком мы сократили флоу «Партнеров» и попали в изначальный бюджет. Большинство подробностей были не нужны в полях — их можно добавлять и редактировать уже в офисе.
Так раздел выглядит в итоге
Составили API-контракт и подружили фронт с бэком
Разработку начали с обширного проектирования. На этом этапе мы обсуждали с заказчиком технические требования к проекту, разбирались с логикой большой CRM-системы и вместе искали способы подружить ее с приложением.
Этот процесс усложнялся загруженностью разработчиков на стороне клиента — параллельно с заботами о мобильном приложении компания совершенствовала свою CRM-ку. Но ежедневная связь в чате, созвоны и здоровая взаимопомощь помогли избежать багов и ускорили работу над приложением.
Итогом проектирования стал API-контракт — свод правил, по которым наши системы будут взаимодействовать. В нем описывалось, какие данные поддерживает приложение, какие запросы будут поступать на сервер и что ожидается в ответ. API-контракт позволил нашему фронту и бэку заказчика бесперебойно обмениваться информацией, и теперь мы могли приступить к созданию оффлайн-режима.
Внедрили оффлайн-режим
Базы клиентов на смартфоне и на сервере должны быть одинаковыми и постоянно обновляться. Чтобы приложение работало корректно даже без интернета, мы создали механизм, который запоминает все действия менеджера и отправляет их на сервер, когда связь восстанавливается. Похожая схема работает и с другой стороны.
Порядок работы оффлайн-режима в нашем приложении
Разработку вели на React Native. Этот фреймворк позволяет создавать код одновременно под iOS и Android, что экономит клиенту 30%-35% времени и бюджета. В короткие сроки заказчик получил ровно то, что хотел. CRM была готова на две недели раньше запланированного.
Итог
От клиента была огромная отдача. Он активно участвовал в обсуждениях и объяснял, что хочет видеть в мобильном приложении. Во многом благодаря этому дизайн был готов уже через 2 месяца, а разработка заняла 2,5 месяца.
CRM уже опубликовали в AppStore 🎉
Android-версия будет распространяться в виде APK.
