UIUX for KnowScan
KnowScan informs consumers about the impact of the product they are about to buy has on their health, others’ wellbeing, and the environment.
KnowScan is not limited to food and drink items.You can scan any packaged product, whether its edible or not.
KnowScan is not limited to checking impacts on your health. KnowScan informs you of the impact on the environment, and others’ wellbeing. By entering the company or brand name associated with an item, KnowScan’s A.I. can look for information about this item on the web.
No more null results. A limit of scanning apps is that they often depend on the number of products that have been added to their database. In the case of KnowScan, if a user scans the bar-code of an item that is not in its database, the app will invite the user to take a picture of the ingredient list and use alphabet recognition to identify all ingredients.
Frustrating user flow
From early testing with mid fidelity wireframe, I realised that my original flow to generate a product report was causing two pain points for users.
Frustration #1
First, users had to select edible or non-edible product, then choose between scanning bar-code or reading product label.
Right there is frustration #1: “I just want to press scan; not making choices first.”
Frustration #2
Then, user would choose the scan button and encounter a null results if the product is not in the app database. After a null result, the user would have to go back to the main screen, select again edible or non edible before, this time, choosing reading ingredient label to finally arrive at the product report.
This is frustration #2, where users feels like they did the work twice to complete the task.
Stealing with pride
Studying both CronometerI and NFOOD - 2 famous ingredient scanner and nutrition apps - allowed me to improve KnowScan’s user flow
Cronometer has a big red button on its main screen to avoid any hesitation. Only after pressing the red button will the choices are revealed.
Below is how I have implemented this pattern in KnowScan. This pattern allows me to avoid the above mentioned frustration #1.
INFOOD invites users to take a picture of the ingredient label when scanning the QR code gets no result, without going back to the main screen.
Below is how I have implemented this pattern in KnowScan. This pattern allows me to avoid the above mentioned frustration #2.