Miso

Year

2024

Tools

A web application to compare prices and nutritional values of food across different supermarkets, making healthier and more economical purchasing decisions easier.

Research image

Research

The analysis revealed that users need a tool to compare prices between supermarkets and evaluate the nutritional quality of food. The research showed that 78% of users consult multiple websites before purchasing, and 65% consider it important to know the nutritional value.

Design System

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.

Design system image
Wireframes image

Wireframes

The wireframes were designed to offer an intuitive and functional structure, prioritizing the visualization of comparative data. Two main views were developed: a table for quick comparison and individual cards for mobile devices, ensuring smooth navigation and easy access to information.

Prototype

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.

Prototype image
Web development image

Web Development

The implementation uses PHP for the backend, managing data through JSON. The frontend employs CSS Grid and Flexbox for a responsive layout. I integrated features such as dynamic sorting, a nutritional scoring system, and image management, optimizing performance across different devices.

Conclusions

The application successfully achieves its goal of facilitating the comparison of food products. The responsive design and intuitive interface provide a seamless experience on any device. Users highlight the usefulness of the nutritional scoring system.

NEXT PROJECT

BC Carpas →

Next project: BC Carpas