The first step was to conduct a literature study to identify user needs and relevant technologies. This literature study included a review of web-based AR frameworks such as A-Frame and AR.js, which enable the integration of AR in the browser without the need for additional applications (Carmigniani & Furht, 2011). In addition, previous research addressing the effectiveness of AR in the shopping experience was also utilised to understand the potential impact of this technology on marketing (Huang & Liao, 2017; Javornik, 2016). The initial stage of this research involved a systematic literature study aimed at:
- Identify User Needs: Analyse the needs and preferences of the target users regarding the shopping experience and interaction with brownie products. This can be done through literature searches related to consumer behaviour, digital marketing trends, and consumers' visual preferences for food products.
- Review of Relevant Technology: Conduct an in-depth review of web-based AR technologies, including frameworks such as A-Frame and AR.js, which enable the integration of AR functionality directly within the web browser without requiring the installation of additional applications (Carmigniani & Furht, 2011). This review includes an analysis of the capabilities, limitations, and potential applications of each framework in the context of brownie marketing.
- Analysis of AR Effectiveness in Shopping Experiences: Review previous studies that address the effectiveness of AR in the context of shopping and marketing experiences, to understand the potential impact of this technology on consumer behaviour, purchase intentions, and overall user experience (Huang & Liao, 2017; Javornik, 2016). This analysis will be used as a theoretical and empirical foundation in the design and evaluation of AR applications.
Design and Implementation of Web-based AR Applications
The second stage is project implementation, which involves the technical development and testing process. The project was developed by utilising web-based AR technology, equipped with a 3D visualisation feature that allows customers to virtually customise the size, toppings or type of brownies. Technical testing was conducted to ensure the web works optimally across different devices and browsers. Web development standards as recommended by the World Wide Web Consortium (Initiative, 2021) were applied to ensure system accessibility and compatibility. The process was also supported by the principles of interactive user interface development based on Nielsen Norman Group (Nielsen, 2024) guidelines. Based on the results of the literature study, the architecture and user interface (UI) design of the AR web-based application is carried out. This stage includes:
- Making Mockups and Prototypes: Designing interactive mockups and prototypes to visualise the appearance and functionality of the application.
- Application Development: Implementing AR web-based applications using the reviewed technology, with attention to user experience (UX) and application performance aspects.
Application Evaluation
The third stage is the internal evaluation of the project, which is conducted by the development team to ensure the quality and stability of the system. This evaluation includes performance tests on various usage scenarios, such as cross-device compatibility and graphics rendering efficiency. This process uses a software-based technical testing approach to ensure rendering accuracy and feature stability (Sharma Goyal, & Rai, 2019). The evaluation results provide an overview of the successful implementation of AR technology and its suitability to the set marketing objectives (Carmigniani & Furht, 2011; Huang & Liao, 2017). The evaluation stage aims to measure the effectiveness and impact of web-based AR applications on target users. Evaluation methods that can be used include:
- Usability Testing: Involving a group of users to test the application and provide feedback on ease of use, functionality, and interaction experience.
- Surveys: Collecting quantitative data through surveys to measure user perception of the app, purchase intent, and impact on brand image.
- Usage Data Analysis: Analysing app usage data, such as number of visitors, duration of interactions, and most used features, to understand user behaviour and the effectiveness of app features.
RESULTS AND DISCUSSION
This project integrates the use of Blender software for 3D modelling with Web Augmented Reality (Web AR) technology in order to promote brownie products from 3B Bakery. After the design and implementation of features in the Blender environment, the next crucial step is the deployment of the application so that it can be accessed by a wide audience. This process involves uploading and configuring the application files to a server or web hosting platform.
The result of this effort is an AR website that can be accessed through the following link: https://courageous-cobbler-08df57.netlify.app/. This web address leverages the use of the Netlify platform, a web hosting and deployment service popular for its ease of use and integration with modern development workflows.
When users access the website, they are greeted by a main page designed with structure and essential elements. Firstly, there is the 3B Bakery store logo that serves as a visual identity and branding, giving a professional and memorable impression. Next, a menu image is displayed which aims to provide a clear and attractive picture of the variety of brownie products offered. This visual aspect is very important in marketing because it can arouse consumer interest. The core element of the Web AR functionality is the ‘Ayo Pesan’ button. This interactive button initiates the menu scanning process through a mobile device camera or webcam on a computer. After scanning, the 3D brownie model that has been created in Blender will be displayed in real-time and overlaid on top of the camera view, providing an immersive augmented reality experience. Finally, there is an ‘About Us’ section that provides information about the creators of the 3B Bakery web AR store, aiming to establish credibility and an emotional connection with site visitors.
This Web AR implementation utilises technologies such as WebGL for rendering 3D graphics in web browsers, and AR.js for tracking and overlaying virtual objects in the real world. The choice of Netlify as a hosting platform provides several significant advantages. Firstly, Netlify offers ease of deployment through an automated process integrated with code repositories such as GitHub, which makes it easier for developers to update and deploy applications. Secondly, Netlify's use of CDN (Content Delivery Network) distributes website content to various servers around the world, effectively increasing access speed for users from different geographical locations. Thirdly, Netlify provides SSL certificates by default and free of charge, which guarantees a secure connection between users and websites via the HTTPS protocol.
