---
title: "2"
source: "2.docx"
converted: "2026-10-01 10:23:14 +0800"
converter: "MarkForge (mdconvert)"
engine: "MarkItDown"
---

OptiSense: A Web-based Eyewear Recommender System based on Face Shape with Augmented Reality

Alif Najmuddin Akmar Jalil1, Mahfudzah Othman[[1]](#footnote-1)\*
*1,2Faculty of Computer and Mathematical Sciences, Universiti Teknologi MARA (UiTM) Perlis Branch, Arau Campus, 02600 Arau, Perlis, Malaysia.*

|  |  |  |
| --- | --- | --- |
| ARTICLE INFO |  | ABSTRACT |
| *Article history:*  Received 1 May 2026  Revised 22 June 2026  Accepted 1 July 2026  Online first  Published 1 September 2026 |  | The eyewear industry is undergoing a digital transformation, driven by the need for personalization, convenience, and immersive user experiences. OptiSense is an eyewear recommender system that combines content-based filtering and augmented reality (AR) to improve the online shopping experience. It offers personalized recommendations of eyewear depending on user preferences like type of frame, stylistic preference, and face shape. The system mitigates major weaknesses of classic eyewear shopping, which include the necessity of visiting brick and mortar stores and the lack of immersive virtual try-on options in most online platforms. By implementing AR technology through a webcam, OptiSense enables the customer to see the suggested glasses in a live feed, which makes this process highly interactive and convenient to use. Based on the waterfall development framework, the system has been developed on the basis of HTML, CSS, JavaScript, and PHP coding languages, MySQL, and WebAR tools so that the system performance would be robust and the interaction of the system would be smooth. Rigorous usability testing was done on 25 Universiti Teknologi MARA (UiTM) Perlis students and five eyewear shop workers, confirming that the system is an effective aid to purchase decision-making and increasing user satisfaction. Providing a virtual try-on option not only eliminates the uncertainty of purchasing the product online but also helps to recreate the in-store experience in a virtual context. OptiSense unites the gap between online and offline shopping, offering a scalable and innovative solution for the advancing eyewear industry. Future enhancements may include advanced machine learning for improved personalization and expanded mobile compatibility, further positioning OptiSense as a forward-thinking tool in e-commerce. |
| *Keywords:*  Recommender System  Eyewear  Augmented Reality  Web-Based System  *DOI:*  [10.24191/jcrinn.v11i2.627](https://doi.org/10.24191/jcrinn.v11i2.627) |  |

1. Introduction

Choosing suitable eyewear products can be a challenging process, specifically via online retail platforms where customers lack the opportunity for physical product trials. This study discusses the design and development of a web-based eyewear recommendation system, named as OptiSense, to optimize the online purchasing experience. As Roy and Dutta (2022) recommended in their study, utilising the content-based filtering technique in the system offers tailored recommendations based on users’ facial shapes, preferred frame styles, and aesthetic inclinations. Additionally, OptiSense integrates augmented reality (AR) technology, allowing individuals to virtually try on eyewear in real time via a webcam or a smartphone camera, as suggested by Du et al. (2022). The main objective of this study is to provide a robust, easy-to-use, and interactive solution that enhances user satisfaction, improves decision-making, and effectively bridges the gap between traditional and digital eyewear shopping experiences.

1. LITERATURE REVIEW
   1. Recommender systems for eyewear

Recommender systems can be described as software tools designed to suggest items or products to users based on their previous searches, activities, and interactions. Commonly used in a web-based system, Zhang et al. (2021) added that a recommender system can act as a personalized service and analysing user histories to predict their preferences for specific products. Similarly, Javed et al. (2021) describes recommender systems as software tools and techniques that deliver personalized suggestions tailored to the user’s interests and environment.

These systems help users discover new items that may align with their interests. In recent years, recommender system technology has been widely adopted across various industries. For example, e-commerce platforms like Amazon and Taobao (Wu et al., 2022) and entertainment services offering music, movies, TV shows, and books (Yudha Pratama et al., 2020). As a result, recommender systems have become essential tools in providing users with personalized content that matches their preferences via the web-based system platforms.

A recommender system in eyewear industry would be able to offer precious assistance by specifying eyeglasses options based on user’s inclinations. Such system could help individualize the assortment of eyeglasses and boosts user experience thru recommending eyewear products that is customized based on individual inclinations and preceding selections as claimed by Li et al. (2024). Moreover, recommender system for eyewear products can help individuals to determine a suitable and correct eyeglass efficiently by reflecting their preferences (Kuanr et al., 2020).

Additionally, this project applied the content-based filtering technique, a technique that is commonly used for recommender system engine. As described by Yudha Pratama et al. (2020), this technique focusses on recommending products or items that parallel with previous user selection. It also commonly takes extra information about users or items, to improve the users or items description for rising suggestions execution (Zhao et al., 2023). Content-based filtering technique was deemed suitable for this study as it customizes suggestions parallel with users’ preferences and previous search of eyeglasses through the web-based system.

* 1. Augmented Reality in eyewear industry

Augmented reality (AR) has advanced web-based applications by allowing users to interact with augmented content without the need for specialised tools. For example, augmented reality can enable users to virtually try products before making a purchase. As example from IKEA website, it uses augmented reality to provide users with 3D visualisations of furniture, offering information about items as mentioned by Aditama and Setiawan (2020). In the context of AR, interactivity refers to the extent to which users can observe virtual objects within their real-world environment and use 360-degree rotation to examine objects in detail (Kowalczuk et al., 2021).

Embedding AR in eyewear industry brought a positive outcome for the users. AR could transform the eyewear retail sector by allowing virtual try-ons, where users could view how other frames design looked on their face. This was becoming progressively trendy in the online eyewear industry, where customers could visualize the glasses in their real-time (Aditama & Setiawan, 2020). Furthermore, with AR embedded on a web-based system, individuals have an authentic impression of how the glasses seem on themselves and could easily position the virtual head, watching the glasses design from any perspective (Marelli et al., 2022). This study integrates the recommender system with AR as it offers significant benefits to the eyewear industry, such as help to enhance user experience by allowing users to virtually try, check the products and makes it possible for them to attempt various types of eyewear styles and colours before making any purchasing decisions. It also offers an individualised simulated shopping experience, making it more efficient, customised and personalised (Mustafiz, 2023; Liu, 2024).

1. METHODOLOGY

The waterfall methodology was adapted for the design and development of the web-based eyewear recommendation system, OptiSense. The waterfall model as mentioned by Pratama et al. (2024), provides a clear and structured development process through five sequential phases, which are the requirement, design, development, testing, and documentation. It was chosen for its effectiveness in managing system development and meeting user needs. For instance, during the requirement phase, information was gathered to define user needs and system objectives, followed by the design phase that involved creating system workflows, user interfaces, and database structure. The development phase is where OptiSense was constructed using tools such as HTML, CSS, JavaScript, PHP, MySQL, and WebAR for the AR try-on feature.

A usability testing utilising the Post-Study System Usability Questionnaire (PSSUQ) was conducted among twenty-five Universiti Teknologi MARA (UiTM) Perlis students aged 18-25 and five workers from eyewear shops around Kangar, Perlis, Malaysia. The usability test was conducted to ensure that OptiSense met its functional and usability goals. PSSUQ applies a 7-point Likert scale to evaluate controlled data on user satisfaction and their feedback on usability. This scale, ranging from 1 for Strongly Agree until 7 for Strong Disagree was used to allow participants to comment on the level of agreement or differences about given statements regarding the usability of the OptiSense system. The results that show lower value indicates higher satisfaction and stronger agreement with positive usability statements. The next section gives brief explanation on the design and development phases of OptiSense.

* 1. Design phase

The main objective of a system design is to ensure that the system is user-friendly and provides comforts to the users. Therefore, a low-fidelity prototype that is a wireframe, was constructed using Figma to assist how the system would be set up and acted before real development starts. Figma is a web-based tool that enables users to design layouts without the need to install additional software. The resulting system interface is organised, clear, and integrated. This design supports the intended system functionality and facilitates ease of use. For example, Fig. 1 shows the recommender page where users are allowed to select their preferred glasses and frame styles. It includes options for full-rim, semi-rim, and rimless frames, along with a submit button to proceed with the selection.

![](data:image/png;base64...)

Fig. 1. Layout of the recommender page

Meanwhile, Fig. 2 illustrates the layout of the user interface for the face recognition page. This page displays a central web camera feed, which is utilised for analysing the face shape. Below the central figure, three placeholder boxes are arranged to display eyewear recommendations tailored to the individual's preferences and facial structure. This page is designed to facilitate the virtual try-on or product recommendation features within the OptiSense platform, providing interactive user experience.

![](data:image/png;base64...)

Fig. 2. Layout of the face recognition page

* 1. Development phase

Algorithm development is an essential step in developing the OptiSense system. Effective algorithm ensures optimum performance and accuracy of the software. Fig. 3 displays the sample of the algorithm developed for the user preferences page that utilises a form that captures user’s selection of style preferences and frame, which then leads to the face recognition page.

![](data:image/png;base64...)

Fig. 3. Sample of code for user preferences page

In the face recognition page, a real-time computer web camera was used to analyse the facial structure and determine the face shape to recommend the frame. The system activates the device camera through the browser. OptiSense uses a pre-trained machine learning model to identify face shape landmarks and draws using the package of face-api.js. When the page loads, the script face-shape.js starts with loading models necessary in a local model folder using Faceapi. It then loads and runs the startVideo function to give it access to the web camera and plays the video in a <video> tag. It continuously analyzes the video using Faceapi .detectSingleFace() combined with .withFaceLandmarks() detecting both the position and structure of the user’s face. It draws detection boxes and landmark points on the canvas for visual feedback. The detectFaceShape() function calculates face height and width using the landmarks of the jawline and uses the comparison of their ratio to decide a particular shape. It classifies the shape into categories like oval, oblong, round, square, or diamond based on facial proportions.

The recommendation algorithm transforms user preferences and face shape analysis into personalized eyewear suggestions. Once the face shape is detected, the system draws it on the canvas and also shows it in text. The showRecommendation() function sends a POST request to get\_recommendation.php with the detected face shape and user preferences. The server then returns a list of suggested products, which are inserted into the page. The logic behind OptiSense’s recommendation system is built on content-based filtering, ensuring that eyewear suggestions are specifically tailored to each user’s facial features and preferences. The sample of code of the content-based filtering technique created for OptiSense is shown in Fig. 4.

![](data:image/png;base64...)

Fig. 4. Sample of code of content-based filtering

Additionally, in developing OptiSense, the MyWebAR was utilised for integrating the AR features. MyWebAR allows users to experience virtual try-on directly through the system without needing to download additional applications. This strategy will make the content displayed in augmented reality more convenient and closer to many users. Using MyWebAR, the system offers users the opportunity to have a realistic and enjoyable view of the products in an interactive process.

Nevertheless, integrating MyWebAR with the recommendation system have many challenges. One of the main challenges during development was to find suitable 3D models of eyewear in supported file formats like DAE or FBX. The high-quality and free 3D files of eyewear were hard to find, and they needed to be searched and tested to be compatible with the MyWebAR platform. Once the 3D models were acquired, they were imported and placed on the MyWebAR service to generate an AR experience.

Once the augmented reality projects were published, the system saved the augmented reality experience links in the database, specifically in the AR field of the products table. This setup allows the system to connect each product with its corresponding augmented reality content, enabling users to easily access the 3D view directly from the product page. Fig. 5 shows the sample of MyWebAR integrated with the OptiSense recommender system.

![](data:image/png;base64...)

Fig. 5. Sample of MyWebAR

1. RESULTS AND DISCUSSION

As a result of the design and development activities of OptiSense, a high-fidelity prototype was eventually developed and tested with the target users. Fig. 6 shows the main page of OptiSense, a web-based system integrating the recommender engine and AR features for eyewear selections.

![](data:image/png;base64...)

Fig. 6. The main page of OptiSense

The final result of the recommender page that suggests the frames selections based on user’s face shape and preferences is displayed in Fig. 7. As the suggestions were recommended by the system, users can try the eyeglasses virtually without having to go to the physical store. This will be hustle-free, helping the users to save time and cost of travelling.

![](data:image/png;base64...)

Fig. 7. The recommendation page of eyeglasses in OptiSense

Additionally, the results of the usability test conducted have also shown positive responses among the users. Table 1 depicts the mean scores from the usability test conducted in this. As mentioned before, the results that show lower value indicates higher satisfaction and stronger agreement with positive usability statements.

Table . Results of the usability testing of OptiSense

| Construct | Questions | Mean Scores |
| --- | --- | --- |
| System usefulness | Overall, I am satisfied with how easy it is to use OptiSense. | 2.17 |
| It was simple to use OptiSense. | 2.03 |
| I was able to complete the tasks and scenarios quickly using OptiSense. | 1.87 |
| I felt comfortable using OptiSense. | 2.07 |
| It was easy to learn to use OptiSense. | 2.00 |
| I believe I could become productive quickly using OptiSense. | 2.17 |
| Information quality | OptiSense gave error messages that clearly told me how to fix problems. | 2.20 |
| Whenever I made a mistake using OptiSense, I could recover easily and quickly. | 2.27 |
| The information provided by OptiSense was clear. | 2.47 |
| It was easy for me to find the information I needed in OptiSense. | 2.40 |
| The information helped me complete tasks. | 2.43 |
| The organization of information on screens was clear. | 2.33 |
| Interface quality | The interface of OptiSense was pleasant. | 2.27 |
| I liked using the interface of OptiSense. | 2.30 |
| Overall | Overall, I am satisfied with OptiSense. | 2.23 |

Based on Table 1, the users have all agreed that it was simple to use OptiSense with mean score of 2.03, and they were able to complete the tasks and scenarios quickly using OptiSense, with the lowest score of 1.87. Besides that, the users all found that OptiSense was easy to learn to use and helped them to improve their productivity with mean scores of 2.00 and 2.17. Overall, for the system’s usefulness, all users were satisfied with how easy to use OptiSense with a mean score of 2.17.

For the information quality dimension, all users agreed that the information provided in OptiSense platform was clear, with score of 2.47 and that the information helped them in completing the tasks in choosing the perfect eyewear for them, scoring at 2.43. Moreover, OptiSense website also provides users with error messages that helped them to fix the problems and recover from mistakes easily and quickly. Meanwhile, for the interface quality, the score of 2.27 shows that all users agreed that the interface of OptiSenses was pleasant, and that they liked using the interface of OptiSense (mean score of 2.30). Overall, all users were satisfied with OptiSense, scoring at 2.23 mean score.

1. CONCLUSION AND RECOMMENDATIONS

As a conclusion, the design and development of OptiSense, a web-based eyewear recommender system based on face shape with augmented reality introduces a novel approach by integrating a personalised recommendation with real-time AR-based virtual try-on in. OptiSense stands out from typical eyewear platforms by enabling users to virtually try on frames using WebAR, eliminating the need for specialized apps. Its content-based filtering matches frames to user preferences, and the platform demonstrates AR's potential to boost engagement and satisfaction in e-commerce platforms. In Malaysia’s emerging market for online eyewear try-ons, OptiSense addresses evolving consumer demands. Future work will include real-time facial detection, better mobile responsiveness, and machine learning-driven recommendations to improve scalability and accuracy.

1. Acknowledgements

This research was supported by Universiti Teknologi MARA (UiTM) Perlis Branch, Malaysia as part of the completion of a degree in the Information Technology program.

1. Conflict of interest statement

The authors agree that this research was conducted in the absence of any self-benefits, commercial or financial conflicts, and declare the absence of conflicting interests with the funders.

1. Authors’ contributions

The first author involves in the development of the prototype as well as the writing of the article. The co-author supervised the overall research activities and publication.

1. REFERENCES

Aditama, P. W., & Setiawan, I. N. A. F. (2020). Indigenous Bali on augmented reality as a creative solution in industrial revolution 4.0. *Journal of Physics: Conference Series*, *1471*(1). <https://doi.org/10.1088/1742-6596/1471/1/012008>.

Du, Z., Liu, J., & Wang, T. (2022). Augmented Reality Marketing: A systematic literature review and an agenda for future inquiry. In *Frontiers in Psychology* (Vol. 13). Frontiers Media S.A. <https://doi.org/10.3389/fpsyg.2022.925963>.

Javed, U., Shaukat, K., Hameed, I. A., Iqbal, F., Alam, T. M., & Luo, S. (2021). A review of content-based and context-based recommendation systems. *International Journal of Emerging Technologies in Learning*, *16*(3), 274–306. <https://doi.org/10.3991/ijet.v16i03.18851>.

Kowalczuk, P., Siepmann (née Scheiben), C., & Adler, J. (2021). Cognitive, affective, and behavioral consumer responses to augmented reality in e-commerce: A comparative study. *Journal of Business Research*, *124*, 357–373. <https://doi.org/10.1016/j.jbusres.2020.10.050>.

Kuanr, M., Mohapatra, P., & Choudhury, S. S. (2020). TSARS. In *Recommender System with Machine Learning and Artificial Intelligence* (pp. 387–400). Wiley. <https://doi.org/10.1002/9781119711582.ch20>.

Li, Y., Liu, K., Satapathy, R., Wang, S., & Cambria, E. (2024). Recent developments in recommender systems: A survey [Review Article]. *IEEE Computational Intelligence Magazine*, *19*(2), 78–95. <https://doi.org/10.1109/MCI.2024.3363984>.

Liu, Z. (2024). Augmented Reality user interface: Analysing the design principles and evaluation methods of Augmented Reality (AR) user interfaces to enhance user interaction and experience. International *Journal of Computer Science and Information Technology*, *3*(2), 22–31. <https://doi.org/10.62051/ijcsit.v3n2.04>.

Marelli, D., Bianco, S., & Ciocca, G. (2022). Designing an AI-Based virtual try-on web application. *Sensors*, *22*(10). <https://doi.org/10.3390/s22103832>.

Mustafiz, A. (2023). *Advanced techniques for real-time Augmented Reality virtual try-on using deep learning*. ResearchGate. <https://doi.org/10.13140/RG.2.2.26761.83049>.

Pratama, M. B. A., Hilabi, S. S., Ihsan, M. M., Ferdiansyah, I., & Nizar, H. S. (2024). Application of the Waterfall Method in creating payroll applications based on Java Netbeans. *Jurnal Multimedia Dan Teknologi Informasi (Jatilima)*, *6*(01), 35–45. <https://doi.org/10.54209/jatilima.v6i01.432>.

Roy, D., & Dutta, M. (2022). A systematic review and research perspective on recommender systems. *Journal of Big Data*, *9*(1). <https://doi.org/10.1186/s40537-022-00592-5>.

Wu, S., Sun, F., Zhang, W., Xie, X., & Cui, B. (2022). Graph Neural Networks in recommender systems: A Survey. *ACM Computing Surveys*, *55*(5). <https://doi.org/10.1145/3535101>.

Yudha Pratama, B., Budi, I., & Yuliawati, A. (2020). Product recommendation in offline retail industry by using collaborative filtering. *International Journal of Advanced Computer Science and Applications*, *11*(9), 635-643. <https://doi.org/10.14569/IJACSA.2020.0110975>.

Zhang, Q., Lu, J., & Jin, Y. (2021). Artificial intelligence in recommender systems. *Complex and Intelligent Systems*, *7*(1), 439–457. <https://doi.org/10.1007/s40747-020-00212-w>.

Zhao, Z., Fan, W., Li, J., Liu, Y., Mei, X., Wang, Y., Wen, Z., Wang, F., Zhao, X., Tang, J., & Li, Q. (2023). Recommender Systems in the Era of Large Language Models (LLMs). *IEEE Transactions on Knowledge and Data Engineering*, *36*(11), 6889-6907. <https://doi.org/10.1109/TKDE.2024.3392335>.

|  |  |
| --- | --- |
| ![A picture containing text, clipart  Description automatically generated](data:image/png;base64...) | © 2026 by the authors. Submitted for possible open access publication under the terms and conditions of the Creative Commons Attribution (CC BY) license (http://creativecommons.org/licenses/by/4.0/). |

1. \* Corresponding author. *E-mail address*: fudzah@uitm.edu.my [↑](#footnote-ref-1)