MinorProject
Designing a Halal Food Scanner for Everyday Shopping and International Travel
From an early Figma visual prototype to a functional HTML application capable of scanning real product packaging, this project explored how visual design, artificial intelligence and structured decision support could help users evaluate unfamiliar food products more efficiently.
Making halal product evaluation more accessible
This project began with a practical problem: identifying whether an unfamiliar packaged food product is suitable for halal-conscious consumers can become difficult when certification marks, ingredients and product information are unclear or presented in an unfamiliar language.
The application was therefore designed for two connected user groups. The first group consists of Muslim international travellers who may encounter unfamiliar certification systems, imported products and language barriers. The second group consists of users who require additional support when checking products during everyday shopping.
Understanding how users make halal decisions
Interviews were used during the early research stage to understand how users currently verify halal status in both travel and everyday shopping situations. The conversations focused on the information people look for first, the certification symbols they trust, the difficulties created by unfamiliar ingredients and the situations in which they remain uncertain.
These findings helped define the application as a decision-support tool rather than a simple logo detector. A useful result needed to explain the available evidence, identify uncertainty and allow users to inspect more detailed information when required.
The central design question was not only “Can the application recognise a halal logo?” but also “How can it support a user when the packaging provides incomplete, unfamiliar or ambiguous information?”
From interface design to a working application
My main responsibility was the development of the project’s visual and functional prototypes. This work was divided into two major stages: an earlier Figma prototype focused on the interface and user experience, followed by a functional HTML prototype that transformed the concept into an application capable of scanning and analysing real products.
Visual Prototype
Designed the interface hierarchy, page layouts, interaction states, result presentation and overall visual language in Figma.
Functional Prototype
Developed an HTML-based version with camera access, image input, API communication, AI analysis and dynamically generated result screens.
A direct flow from product scanning to understandable evidence
The main user flow was intentionally kept short. Users should be able to begin scanning without navigating through multiple setup screens, while detailed information remains available after the initial result.
Establishing the visual language and information hierarchy
The Figma version was completed earlier in the project and was primarily used to develop the application’s visual identity, interaction structure and content hierarchy. It allowed the design to be reviewed before the functional system was implemented.
Particular attention was given to the scan interface, status communication, result details, international halal standards and profile-related screens. The prototype also explored how colour, typography, spacing and status indicators could communicate trust without making the interface feel excessively technical.
Visual design priorities
Interface development process
The following area can be used to document the transition from early layout exploration to the complete interactive prototype.
Transforming the concept into a usable product scanner
The later HTML prototype moved beyond simulated interaction. It was designed as a functional web application that could access a device camera, receive a real product image, communicate with an artificial intelligence service and display the returned analysis inside the interface.
Although the HTML version was based on the earlier Figma design, its interface was intentionally simplified. During functional development, some decorative elements and secondary layers were removed so that the most important actions remained visible and reliable across different mobile screen sizes.
This decision followed the logic of Occam’s Razor: when two interface solutions achieve the same purpose, the less complicated solution is generally easier to understand, implement and maintain. The functional version therefore prioritised scanning, analysis and result comprehension over unnecessary visual complexity.
Product scanning and AI analysis workflow
Replace the following block with an uploaded demonstration video or an embedded YouTube, Google Drive or Vimeo video
Different prototypes serving different purposes
| Category | Figma Visual Prototype | HTML Functional Prototype |
|---|---|---|
| Primary purpose | Visual exploration and interaction planning | Real product scanning and AI analysis |
| Interaction | Simulated clickable transitions | Functional camera, upload and API workflow |
| Interface detail | More visually detailed and presentation-oriented | Simplified for responsive and reliable use |
| Product analysis | Uses designed example results | Generates results from actual product images |
| Main value | Validates the design direction | Validates technical feasibility and usability |
How the functional prototype analyses a product
The HTML prototype uses a front-end scanning interface connected to a multimodal artificial intelligence API. The overall process can be understood as a structured pipeline rather than a single image-recognition action.
Image input
A product image is captured through the camera or selected from the device.
API request
The image and analysis instructions are packaged into a request and sent to the configured AI endpoint.
Evidence analysis
The model examines visible certification marks, ingredient text, product names and packaging context.
Fallback research
When visible packaging evidence is insufficient, the detected product name can be used for additional online product research where supported.
Structured response
The model returns an organised result containing status, evidence, uncertainty and explanatory details.
Interface rendering
The application converts the response into readable result cards and detailed information sections.
Using structured prompts to produce consistent results
The AI API alone does not determine how the application behaves. A structured prompt system defines what evidence should be inspected, how uncertainty should be handled and how the final response should be formatted.
Rather than asking the model a general question such as “Is this halal?”, the application provides a sequence of evaluation instructions. This improves consistency and makes the response easier for the interface to process.
Core prompt responsibilities
The prompt acts as a bridge between the religiously sensitive decision context, the technical capabilities of the AI model and the visual requirements of the interface. Without this structure, responses could become inconsistent, overly confident or difficult to display.
What changed between design and implementation
Developing both the Figma and HTML versions revealed an important distinction between a visually complete prototype and a technically usable interface. Some layouts that appeared effective in a fixed Figma frame required further adjustment when displayed on phones with different screen proportions.
The functional prototype therefore required responsive spacing, safer button placement, more flexible content containers and clearer control over long AI-generated text. Camera access and loading states also needed to be considered because users could no longer move instantly between simulated screens.
This process demonstrated that functional prototyping is not simply the final reproduction of a visual design. It is also a second design stage in which technical behaviour, variable content and real-device constraints reshape the original interface.
Prototype and development files
The project resources below provide access to the visual design prototype and the files used to develop the functional HTML application.
Figma Interactive Prototype
Explore the visual interface, navigation flow, result states and major application screens.
View Figma Prototype ↗HTML Project Files
Access the HTML, CSS, JavaScript and related files used to build the functional scanning prototype.
Access Project Files ↗Connecting user research, interface design and functional AI development
This project progressed from an initial user problem to a visual Figma prototype and finally to a functional HTML application capable of analysing real product packaging. My contribution focused on connecting these stages: translating user needs into interface structures, developing the visual prototype and then adapting the design into a working scanning experience.
The Figma prototype provided the visual direction and information architecture, while the HTML prototype tested how the concept could operate under real technical conditions. The simplified functional interface was not a reduction of the original idea, but a refinement based on usability, responsiveness and the principle of removing elements that did not directly support the main task.
Most importantly, the project showed how an artificial intelligence system can be made more understandable through careful interface design and prompt engineering. Rather than presenting an unexplained automated judgement, the application aims to organise available evidence and help users make a more informed decision. As a prototype, it is intended to support product evaluation and should not be treated as a replacement for official halal certification or qualified religious guidance.
评论
发表评论