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

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

В закладки
Основатель Coin Keeper Илья Чернецкий

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{ "items": [{"title":"\u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u21161","image":{"type":"image","data":{"uuid":"aa653ca7-8155-326e-7153-2f219386e619","width":360,"height":640,"size":33158,"type":"png","color":"","external_service":[]}}},{"title":"\u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u21162","image":{"type":"image","data":{"uuid":"75eaffec-795f-0720-8627-c4c5ed3d1968","width":360,"height":640,"size":38336,"type":"png","color":"","external_service":[]}}}] }

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

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

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

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

{ "items": [{"title":"\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430","image":{"type":"image","data":{"uuid":"d26334d4-1674-3d05-3fe8-159eae2645ed","width":720,"height":1280,"size":87960,"type":"png","color":"","external_service":[]}}},{"title":"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0443\u043f\u043a\u0438","image":{"type":"image","data":{"uuid":"549c2274-31a9-55fa-88f0-53550dcf281a","width":720,"height":1280,"size":126576,"type":"png","color":"","external_service":[]}}},{"title":"\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d","image":{"type":"image","data":{"uuid":"f8e55f82-22e5-3314-7165-5986d3336616","width":720,"height":1280,"size":85882,"type":"png","color":"","external_service":[]}}}] }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#дизайн

{ "author_name": "Никита Евдокимов", "author_type": "editor", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 19, "likes": 17, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 27553, "is_wide": false }
{ "id": 27553, "author_id": 61917, "diff_limit": 1000, "urls": {"diff":"\/comments\/27553\/get","add":"\/comments\/27553\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/27553"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

19 комментариев 19 комм.

Популярные

По порядку

Написать комментарий...
13

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

Ответить
0

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

Ответить
2

Можно понять экономных - купить дорогую или дешёвую зубную пасту. Но вот что им даст информация, что в этом месяце на бытовую химию ушёл бюджет, соизмеримый с кино и театрами? - Да ничего.

Ответить
0

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

Ответить
0

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

Ответить

Комментарий удален

1

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

CoinKeeper Продукты я скачал заценил что он может действительно сканировать qr код. Прикольно. На чеках без qr соответственно не может. занес два раза и удалил.

Ответить

Комментарий удален

0

Удалил через неделю. Не знаю что там за движок, но на моем 5s оно запускалось невыносимо долго. Или дело не в тормозах, а в том, что картинку надо показать?
При этом другие подобные приложения запускались моментально.

Ответить
0

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

Ответить
0

Мне одному кажется или такое приложение можно сделать за 4-5 часов)

Ответить

Комментарий удален

0

Илья, не планируете ли добавить платное апи? Я бы с удовольствием воспользовался в своей домашней разработке бухгалтерии (на другое решение пока переходить не хочу)

Ответить
0

платное АПИ для парсинга чеков? Мы в принципе готовы и бесплатно его дать, только где б найти на это все время...(

Ответить
0

Довольно неудобно получается, когда операция проводилась по карте. Coinkeeper сам распознал транзакцию, а тут ещё из "Coinkeeper Покупки" чек добавляется. Было бы удобно, если бы по умолчанию для чека автоматически выбирался правильный счёт карты, а при отправке операции в Coinkeeper, ожидающая распределения операция бы удалялась :).

Ответить
0

Согласен, в планах интегрировать в основную версию и привязать как импорту из смс и прочих источников

Ответить
0

Господа, когда уже в iOS появится все? Обидно! А те, кто не видит необходимости в новом приложении - не скачивайте! Кто ж вас заставляет?

Ответить
0

Обязательно появится, работаем над этим!

Ответить
0

Илья, может укажете по секрету приблизительную дату выхода, хотелось бы узнать, дату этого долгожданного события. Спасибо!

Ответить
0

У вас в UX есть сильно раздражающий момент. Чтобы добавить тэг к записи, нужно обсвайпиться: тэги отсортировать по времени создания, а не как в самом койнкипере и даже не по алфавиту; прокрутка горизонтальная и строки всего лишь две. В итоге я часто лезу в сам койнкипер, чтобы исправить добавленные через «Покупки» записи, добавляя к ним тэги уже там. Это вообще не удобно, ведь вы ещё и разделили приложения.
Мне не нравится, что новое приложение совсем не похоже на койнкипер и использует другую логику управления. Зачем? Мы любим койнкипер за минимизацию и визуализацию действий, привыкли к перетаскиванию монеток.
И ещё совсем мелкий момент: название приложения. Несмотря на то, что я гик, в магазине часто туплю над названиями «Список покупок» и «Покупки» — потому что внимание рассеянно. Было бы лучше назвать приложение (на устройстве) «Чеки» или как-то так. (И иконку сделать менее похожей ро смыслу на список покупок, даже если она и не будет такой красивой и цветной). Потому что люди, ведущие домашнюю бухгалтерию, почти всегда имеют приложения и для списка.

Ответить
0

*тэги отсортироваНЫ...

Ответить
0

почему это не вкрутить в основное приложение для IOS?

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления