Этапы разработки приложения на примере «CoinKeeper Продукты»15.10.2017 16:53

Рассказ команды сервиса.

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

Новый порядок применения контрольно-кассовой техники подтолкнул нас создать «CoinKeeper Покупки». Это бесплатное приложение для Android, которое позволяет находить чеки в базе операторов фискальных данных (ОФД).

На каждом чеке теперь появился QR-код и фискальный признак документа (ФПД) , по которым можно найти онлайн-версию. Именно эти данные мы используем для поиска чеков в базе.

Почему мы сделали еще один сканер чеков

В CoinKeeper пользователи максимально подробно учитывают свои расходы. После походов в гипермаркеты им приходилось вручную распределять покупки из чеков по разным категориям. Иначе покупка в несколько тысяч рублей могла попасть в категорию «Продукты», когда на деле покупки из чека нужно было разделить на несколько категорий: продукты, бытовую химию, косметику и так далее.

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

Главное отличие «CoinKeeper Покупки» от аналогов — мы получаем информацию о чеке из баз операторов фискальных данных. Это предотвращает ошибки, возникающие при простом сканировании чека.

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

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

Как создавали приложение

Основные моменты, которые нас волновали в разработке:

• нужно ли добавлять функцию сканирования чеков в CoinKeeper или разработать отдельное приложение;
• если пишем отдельное приложение, то как представим интерфейс пользователю (то есть какими будут UX и UI).

С первым пунктом определились достаточно быстро. У нас была попытка внедрить функцию в основное приложение — это кажется логичным на первый взгляд. Но такое решение ломало всю легкость и интуитивность UX текущей версии CoinKeeper.

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

Была и вторая причина сделать отдельное приложение. Мы давно планируем переписать CoinKeeper на нативный язык. И решение сделать «CoinKeeper Покупки» сразу отдельным нативным приложением облегчало нам задачу в будущем. В дальнейшем мы планируем сделать единый сервис, но пока не идем на это, чтобы не утяжелять текущую версию.

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

1. «CoinKeeper Покупки» создавался в первую очередь для наших пользователей. Поэтому важно было сохранить преемственность дизайна CoinKeeper. В то же время, нам хотелось сделать приложение по-новому, обозначив выход нового продукта.
2. Важно было сделать процесс распределения чеков простым и удобным, а дизайн интуитивно понятным. Так как мы позволяем пользователям не только распознать чеки, но и добавить их в CoinKeeper, то представление процесса немного усложняется.
3. Мы были ограничены в сроках. На создание продукта мы заложили месяц, поэтому дизайн не должен был усложнять процесс разработки.

Определив ключевую функциональность приложения, мы выделили три основных экрана:

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

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

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

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

Разработка не заняла много времени, потому что в дизайне интерфейса «CoinKeeper Покупки» была преемственность от UI основного приложения. Добавление счета и категории было реализовано по принципу главного экрана в CoinKeeper — перетаскивание монеток.

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

В итоге мы пришли к нынешнему дизайну. Он во многом повторяет дизайн CoinKeeper, по двум причинам:

• облегчает взаимодействие пользователя CoinKeeper с новым приложением;
• подчеркивает единство двух сервисов.

Экран «Добавление покупки» повторяет дизайн экрана внесения транзакций CoinKeeper по логике систематизации иконок и цветовому решению.

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

Сложности разработки

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

Сейчас мы распознаем более 60% чеков. И до сих пор собираем экземпляры чеков, распарсить которые не удалось, чтобы увеличить процент покрытия и сократить количество ошибок до минимума.

Также в разработке было важно найти решение, которое не требовало бы большего объема памяти для приложения. «CoinKeeper Покупки» хранит данные о чеках: чеки можно загрузить, чтобы не потерять, но распределить, когда появится время. Все чеки хранятся локально на устройстве. Поэтому мы храним только текстовые данные, а не изображения.

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

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

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

Наше преимущество — возможность синхронизировать покупки из чеков с расходами CoinKeeper. Благодаря этому, наши пользователи могут легко получать аналитику расходов о покупках в супермаркетах. А мы становимся чем-то большим, чем просто хранилищем чеков.

Результаты и дальнейшее развитие сервиса

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

Сначала поступало много резонных вопросов, например, почему мы сделали отдельное приложение и почему только для Android; какой смысл его использовать, если у пользователя нет премиум-подписки в самом CoinKeeper.

Мы рассказывали, что без подписки можно использовать «CoinKeeper Покупки», создав аккаунт в веб-версии CoinKeeper. Также по желанию пользователя мы предлагаем ему премиум-подписку на время, чтобы он мог оценить для себя возможность синхронизации двух приложений.

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

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

В разработке находится еще несколько дополнительных функций. Но главная задача сейчас — улучшение парсинга, чтобы распознавать 100% покупок. У «CoinKeeper Покупки» есть еще много точек роста: со временем мы дополним его возможностями экономить на походах в обычные магазины и другими полезными функциями для оффлайн-покупок. Но сейчас мы больше сфокусированы на развитии основного продукта CoinKeeper и разработке его обновленной нативной версии.

#дизайн

©  vc.ru