Barcode Scanner

The barcode scanner is a feature developed for a native iOS and Android app which allows a customer scan any pantry or household item barcode and find healthy, organic alternatives from an online grocer’s catalog. iOS flows and screens are showcased here.

Team: Product Manager, Android engineer, iOS engineer, backend engineer, illustrator

Flows

We developed a set of flows to show the user’s journey and entry points as they interact with the barcode scanning feature.

main flow

The user would receive a badge or notification on the home screen. Tapping on the badge or notification would open up the app and land the user on the onboarding screen, which would provide more information about the feature. After allowing camera permissions, the user could begin scanning barcodes.

results

If an exact match was found, the product detail page would be returned.

If an exact match was not found, alternatives were listed on a search results screen with the search bar populated with the searched term.

An empty state would be shown in the event that no product was found from the catalog or the scanned item was not found in the barcode API.

search

After a user had interacted with the barcode scanning feature, they would be able to return to the feature by tapping on the barcode icon in the search bar. Previously scanned items would show up in the search results with a barcode icon to denote that the item had been scanned rather than manually entered.

error states

Various error states in the barcode scanning feature include a bottom sheet with instructions if the user had denied permissions, an error scanning a barcode, and an unknown error while searching.