Year
2024
Tools
Web application for comparing prices and nutritional values of food products across different supermarkets, facilitating healthier and more economical purchasing decisions.
Analysis revealed that users need a tool to compare prices between supermarkets and evaluate the nutritional quality of foods. Research showed that 78% of users consult multiple websites before purchasing and 65% consider nutritional value important.
I developed a minimalist visual identity with soft green as the main color, conveying freshness and health. Avenir Next typography adds modernity and readability. Components include product cards, comparison tables, and forms, maintaining visual consistency throughout the application.
The wireframes were designed to offer an intuitive and functional structure, prioritizing comparative data visualization. Two main views were developed: a table for quick comparison and individual cards for mobile devices, ensuring smooth navigation and easy access to information.
The interactive prototype implements a color-based nutritional classification system, facilitating quick interpretation. It incorporates sorting functionalities by price and nutritional value, as well as a filtering system by categories and supermarkets to optimize search.
The implementation uses PHP for the backend, managing data through JSON. The frontend employs CSS Grid and Flexbox for responsive layout. I integrated functionalities such as dynamic sorting, nutritional scoring system, and image management, optimizing performance across different devices.
The application successfully fulfills its objective of facilitating food product comparison. The responsive design and intuitive interface allow for a smooth experience on any device. Users highlight the usefulness of the nutritional scoring system.
