Лонгрид об одном из лучших проектов, разработка мобильного приложения

Arkadiy Zamaraev
Oct 31 · 10 min read

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


Задачи приложения:

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

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

Фабрика выпускает образцы и отслеживает количество предварительных заказов. В производство передаются модели на которые есть достаточное количество заказов, число пар может меняться в зависимости от политики производителя и цены за пару, обычно это 200–300 пар, если модель «ходовая», но общее количество предварительных заказов на нее недостаточно она не будет отшита, это невыгодно производителям. Как следствие обувь нужно заказывать быстро чтобы успеть отшить, т.к это 100% сезонный товар.

Наш клиент привозит образцы обуви с фабрик, арендует помещение в несколько тысяч квадратных метров, приглашает клиентов на просмотр для отбора и оформления заказа по образцам, обычно это около 12 000 моделей.

Выставка проходит в нескольких городах, обычно в каждом городе от 2 до 3 дней, городов не больше 4-х — это зона присутствия клиента, за полторы недели нужно принять максимальное число заказов, а клиентам выбрать и заказать модели из предложенного ассортимента.

Процесс заказа обуви :

  • Посещение выставки
  • Просмотр моделей
  • Предварительный заказ
  • Корректировка заказа
  • Согласование заказа с персональным менеджером
  • Подтверждение заказа
  • Ожидание поставки моделей на склад
  • Заявка на забор или доставки обуви

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

Цели и задачи проекта:

  • Предоставить альтернативу ик-сканерам
  • Обеспечить корректировку заявок без использования бумажных носителей
  • Сэкономить время менеджера и клиента на корректировку заявки
  • Повысить сервис для клиентов компании
  • Имиджевые задачи
  • Увеличить сумму заказа

Выбор технологий

Опыта и ресурсов для разработки нативного мобильного приложения у нас не было, делать веб-приложение только в телефоне, мы не хотели, предстояло выбрать инструменты:

  • NativeScript отказались по причине его непопулярности и платных компонентов
  • Xamarin не походил по стеку технологий, мы используем Python и JavaScript
  • React Native подходил по параметрам и компетенциям команды

Итоговый стек:

  • React Native
  • Python/Django/JavaScript
  • Sketch/Principle

Срок разработки

  • 4 месяца, до первой версии

Команда проекта:

  • 1 дизайнер
  • 1 back-end
  • 2 front-end

Версия 1.0

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

Пока разработчики разбирались как запустить «Hello world» приложение и подбором модулей, я изучил гайды по дизайну мобильных приложений: Material Design и Human Interface Guide, могу сказать что Material Design был намного понятнее и с огромным количеством примеров, однако Human Interface Guide давал больше свободы.

Прошло около 4 недель разработчики научились запускать приложение, были наработки по бэкенду, по задумке клиенты могли сделать заказ через приложение и корректировать на сайте в своем личном кабинете.

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

Во время верстки экранов, первое с чем я столкнулся, модель позиционирования Flexbox очень сильно отличалась от привычной Flexbox в CSS, написание стилей и классов в другом синтаксисе сильно тормозило работу, последние 10 лет я привык писать CSS(PostCSS).

Мы начали верстку первого шаблона, за 3 часа создали экран с красным квадратом по середине на синем фоне и были очень довольны собой.

Стоит сказать что первую версию мы делали для iOS т.к клиенты согласившееся учавствовать в тестировании использовали исключительно айфоны, в React Native было очень много встроенных компонентов для iOS которые я следуя гайдлайнам решил применить. Когда пришло время Android версии такого количествах компонентов не оказалось, но был большой выбор от комьюнити.

Основная механика работы с приложением:

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

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

Публикация в магазинах приложений

Через три месяца мы начали готовится к публикации приложения и плановым доработкам, регистрации в Play Market и Apple Store прошли быстро, мы купили лицензию для частного лица.

Отправив на модерацию приложение в Apple Store мы стали ждать, и за два дня до начала выставки получили одобрение приложения. Казалось все прошло хорошо, но понадобилось внести срочные изменения в формулировки цен и мы обнаружили несколько ошибок в расчете стоимости моделей и приложение отправилось снова на модерацию с версии 1.0.1.

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

В итоге в первые три днях выставки мы устанавливали приложение через iTunes и кабель при помощи двух mac привезенных на выставку, единственное что по лицензии было возможно всего 100 установок нам хватило 45.

Обратная связь от пользователей

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

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

Редактирование заявки осуществлялось с помощью печатной версии которую распечатали несколько раз в течении дня, объем доходил до 80 страниц, далее с помощью карандаша и ручки пользователь корректировал ее с менеджером используя электронную почту или телефон.

На успешное сканирование модели с помощью приложения, мы сделали не звук а вибрацию, чтобы отличатся от ик-сканера, клиенты в буквальном смысле «чувствовали что приложение работает».

Отзывы о приложения были положительными, идея оказалась «рабочей», увидев перспективу мы совместно с клиентом определили дальнейший план по развитию второй версии.

Версия 2.0

По итогам тестирования первой версии образовалось много задач как для сайта и личного кабинета так и для приложения.

Следующая выставка была через 5 месяцев в Москве, к ней мы определили необходимые функции:

  • Авторизация с помощью номера телефона и смс кода, многие клиенты забывали пароль и логин
  • Интерфейс менеджера, у VIP-клиентов есть персональный менеджер, необходимо было обеспечить возможность, добавление в заказ моделей не только клиентов но и его менеджером, в итоге встал вопрос о синхронизации данных в реальном времени.
  • Рейтинг моделей на выставке, формируется на основе анализа заявок и учета количества пар на которые оформлен предварительный заказа клиентами.
  • Каталог доступных к заказу моделей, в первой версии после завершения выставки клиент не мог использовать мобильное приложение для добавления новых моделей в заявку, необходимо было использовать личный кабинет на сайте.

Для второй версии были созданы новые сценарии и экраны около 32.

Пока программисты проводили рефакторинг программной части приложения, я прибирался в UI kit.

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

Я освоился в верстке экранов, мы готовили новый релиз и планировали первое открытое тестирование, ожидалось около 300 одновременно работающих пользователей системы.

Обмен данными с 1С системой

Основное что нас не устраивало это способ обмена данными с 1С, мы хотели обмениваться данными: новая заявка, новый товар, изменение количества и так далее. Это бы решило проблему актуальности данных, в заявку поступают данные из 4-х источников:

  • Приложение — клиент сканирует на выставка
  • Сайт — клиент редактирует заявку на сайте
  • Ручной ик-сканер — клиент сканирует на выставка загружает данные в 1С
  • Менеджер редактирует заявку в 1С системе компании или на сайте

Между приложением и сайтом связь была в реальном времени, но данные из 1С доходили с задержкой обычно около 15–30 минут, также мы сталкивались с тем что 1С создавала файлы и загружала созданные сайтом не давая обратной связи об успешной и неуспешной загрузках. Клиенты же хотели видеть свою заявку актуальной, которая часто находилась в 1С т.к все дальнейшие бизнес процессы шли через 1С.

Уйти от файлов до версии 3.9 не удалось, но нами был разработан формат минимальных данных в файле и предложены механизмы работы менеджерам.

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

В определенных случаях, политика Apple Store требует чтобы аккаунт компании были непременно зарегистрирован на юридическое лицо, более того с нас требовали, чтобы название приложения совпадало с названием юридического лица на которое оформляется аккаунт.

Смена аккаунта разработчика

Отправив приложение версии 2.0 в apple store, мы сдали ждать одобрения модераторов, но приложение не прошло модерацию, отказ был с ссылкой на один из пунктов пользовательского соглашения, связавшись с сотрудниками apple по телефону. мне сообщили что приложение используется юридическим лицом в коммерческих целях и нам нужно переоформить анкету и купить другой пакет за 199$ вместо 99$ который мы продлили для частного лица.

Порядок действий был следующий

  • Нужно было купить DUNS номер / 3 дня
  • Дождаться его попадания в базу Apple / 14 рабочих дней
  • Отправка анкеты в Apple
  • Подтверждение анкеты через verification call / 3 дня
  • Передача приложения другому разработчику
  • Модерация / 3 дня

Спорить и приводить доводы оказалось бесполезно сотрудники Apple действовали по регламенту и не планировали отступать.

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

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

Версия 3.0

По итогам второй версии было выявлено несколько проблем:

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

Так же для третей версии мы подготовили дорожную карту с новыми функциями:

  • Для стимулирования работы с приложением, мы внедрили функции которых не было на сайте или у менеджеров, работа с приложением обеспечивала пользователя уникальной информацией.
  • Статус пользователя в системе лояльности и соответствующие скидки на модели в текущем сезоне, каждый видел с помощью приложения именно свою цену в учетом скидки
  • Калькулятор расчета скидки на сезон
  • Введение понятия организации чтобы несколько пользователей могли работать с заявкой одновременно
  • Раздел «резерв» для просмотра моделей которые ожидают забора включая модели прошлых выставок
  • Некоторые пользователи не обновляли приложение, поддерживать несколько версий было не оправдано, проект до сих пор находился в стадии активной разработки и часто выпускались обновления с breaking changes, мы ввели систему принудительных обновлений.

В перспективе планируется привлечь к приложению не только клиентов выставки, но и клиентов покупающих со свободной продажи.

По пути мы решали разные нестандартные ситуации и изменения вносились прямо на выставке или за несколько дней до. Обновляли дизайн и ряд функций для iPhone X и подобных дисплеев. Решали проблемы обмена данными между 1С, сайтом и приложением.

Список типичных проблем который мы решили только в третьей версии:

  • Загрузка изображений моделей
  • Обмен данными о параметрах моделей
  • Актуальная стоимость моделей, стоимость могла меняться во время выставки и изменения сразу доставлялись

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

Результаты:

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

Используемые инструменты

  • Sketch / Разработка экранов и UI-kit
  • Principle/Protopie / Прототипирование
  • Adobe After Effects / Презентации
  • Bitbucket/Google Docs/Miro (RealtimeBoard) / Контроль за проектом
  • SublimeText/Xcode/Android Studio

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

В итоге мы научились работать с магазинами приложений, освоили React Native, разработали и внедрили продукт на который перешло часть бизнес процессов компании, повысили сервис, имидж клиента, до сих пор у конкурентов нет подобной системы.

ITCase | Erta Android | Erta iOS

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade