Product Scanner Health App UX/UI Design | ALVA

ALVA is a health and wellness mobile app that empowers people to make better choices while shopping. Users simply scan a product to reveal ingredient details, risks and healthier alternatives in seconds, turning confusing labels into clear, actionable information for everyday food and cosmetics purchases. Our goal was to design a mobile app experience that makes product safety easy to understand at a glance and helps users build healthier shopping habits.

Ingredient lists are long, technical and hard to read in a store. Most people don't have time to research every additive or chemical name, so they make choices without knowing the risks. The challenge was to turn complex ingredient data into a simple, trustworthy experience: fast scanning, clear risk levels and helpful recommendations, without overwhelming users with information.

We started with research to understand how people choose products and what information they need at the moment of purchase. Based on these insights, we built a sitemap and created wireframes for the key flows: discovery, search, product page, scanning, manual check-in, scanning history and profile. Next, we explored design concepts to find the right balance between clarity and friendliness, then moved into UI design and built a design system with a 4-column grid, reusable components and light and dark versions.

Users swipe through product cards with ratings and quick status tags (from Bad to Excellent) and filter by hashtags. Search shows recent and trending queries, and tapping a product opens a dedicated page with comprehensive details.

Just scan a barcode to instantly access detailed information. Each product page shows an overall rating, negative and positive ingredients, a risk level for every component (low, moderate or hazardous) and a curated list of better alternatives. If a product isn't in the database, a manual check-in flow lets users add its name, brand and category.

Users create personalized collections with their favorite products, add new collections in a tap and share them with friends. Scanning history keeps every checked product easy to find.

The profile brings together collections, scanning history and blog articles on healthy living. Users can choose between sleek light and dark themes for a personalized experience.

Research Sitemap

Wireframes

Design Concepts

Mobile App UX/UI Design

Light & Dark Themes

Design System, Grid & UI Components in Figma

The final design turns complex ingredient data into a fast, clear and friendly mobile experience that helps users shop smarter and choose healthier products with confidence. Work Sans typography, a neutral palette with green, orange and red status colors and a consistent component library make risk levels instantly recognizable and give ALVA a solid foundation for future growth.