Mobile Platform for Continuous Screening of Clear Water Quality Using Colorimetric Plasmonic Sensing

Abstract

Effective water quality monitoring is very important for detecting pollution and protecting public health. However, traditional methods are slow, relying on costly equipment, central laboratories, and expert staffing, which delays real-time measurements. At the same time, significant advancements have been made in the field of plasmonic sensing technologies, making them ideal for environmental monitoring. However, their reliance on large, expensive spectrometers limits accessibility. This work aims to bridge the gap between advanced plasmonic sensing and practical water monitoring needs, by integrating plasmonic sensors with mobile technology. We present BioColor, a mobile platform that consists of a plasmonic sensor setup, mobile application, and cloud services. The platform processes captured colorimetric sensor images in real-time using optimized image processing algorithms, including region-of-interest segmentation, color extraction (mean and dominant), and comparison via the CIEDE2000 metric. The results are visualized within the mobile app, providing instant and automated access to the sensing outcome. In our validation experiments, the system consistently measured color differences in various sensor images captured under media with different refractive indices. A user experience test with 12 participants demonstrated excellent usability, resulting in a System Usability Scale (SUS) score of 93. The BioColor platform brings advanced sensing capabilities from hardware into software, making environmental monitoring more accessible, efficient, and continuous.

1. Introduction

The growing pollution levels in freshwater are raising global concern, as they put ecosystems and public health at risk [1]. Therefore, continuous water quality monitoring is crucial to identify sources of pollution and implement the necessary treatment measures [2]. Traditional water testing methods rely on laboratory equipment, which is expensive, time-consuming to use, and requires expert staffing. These limitations can slow down the process of taking necessary actions to address problems with water pollution [3]. To overcome these challenges, recent research has focused on integrating mobile technologies, cloud computing, and image processing into environmental monitoring systems, making them more accessible to everyone [4,5]. Mobile technologies, particularly smartphones, have significantly transformed environmental monitoring by connecting with sensor networks. They can collect, display, and transmit sensor data efficiently, allowing for real-time data analysis. Cloud computing enhances this process by providing scalable storage and remote access to measurements, eliminating the delays typically associated with laboratory workflows [6,7,8]. Additionally, Digital Image Colorimetry (DIC) has emerged as a powerful tool for analyzing visual data from the environment. By assessing color changes in images, DIC can evaluate crucial quality indicators, such as water clarity and air quality [9,10,11].

For example, recent studies showed that smartphone-based DIC systems successfully detect pollutants in water through colorimetric reactions. One such system detects total nitrogen (TN) levels by adding specific reagents to the water sample to convert total nitrogen into a colored compound. A smartphone captures the intensity of this generated color, and RGB values are extracted to establish a calibration curve showing the relationship between nitrogen concentration and decrease in the blue channel value [12]. Another study used a smartphone camera to capture images of water samples, with software analyzing the images to measure pollutants like nitrite, ammonia nitrogen, and total phosphorus. The analysis relies on color changes and a calibration curve linking colors to pollutant concentrations [13].

In environmental sensing, DIC has also been applied beyond water analysis. For instance, a study by Zamora showed that polluted air scatters more blue light, making the skies appear whiter. This effect can be quantified using smartphone images to classify the atmosphere as either clean or polluted [14]. Similarly, Sarikonda and Kanchi demonstrated similar techniques in healthcare diagnostics [15,16].

The reliability of environmental monitoring systems largely depends on the accuracy of the sensor data. Therefore, there has been growing interest in plasmonic colorimetric sensors which utilize noble metal nanoparticles, such as gold and silver [17]. These materials exhibit excellent sensitivity to changes in their surrounding medium when functionalized to bind with specific analytes [18,19]. When binding happens, the substrates experience a shift in the localized surface plasmon resonance (LSPR), acting as a band-stop color filter on the spectrum of the incident light. This leads to a visible color change in the transmitted light when the target analyte is present [20,21,22,23]. Traditionally, such LSPR shifts are observed using spectrometers to measure the spectrum and track the peak wavelength change, which limits field applicability [24].

Recent research has demonstrated the effectiveness of smartphone-based colorimetric systems for detecting heavy metals in water using nanoparticles [25,26]. Firdaus et al. developed a paper-based device using silver nanoparticles (AgNPs) to detect mercury (Hg²⁺), analyzed via smartphone and mobile app. This portable system demonstrated good sensitivity, achieving a low detection limit of 0.86 ppb [27]. Also, Aqillah et al. used gold nanoparticles (AuNPs) to detect copper ions (Cu²⁺), where color changes were captured by smartphone and analyzed with ImageJ software (version 1.52a), achieving 97.6% accuracy compared to UV–vis spectrophotometry [28]. Furthermore, Gan et al. introduced a method for cadmium (Cd²⁺) detection using aptamer-functionalized AuNPs and a smartphone-based system that analyzed red-to-blue pixel intensity ratios for rapid, on-site measurement within 10 min [29].

Previous works often relied on offline image analysis tools (such as ImageJ, MATLAB, or manual ratio checks) and manual calibration. To enhance this process, we propose a general purpose app and cloud pipeline integrated within the BioColor platform. This new system is compatible with any plasmonic substrate functionalized with ions such as mercury, copper, cadmium, and others that produce a color shift.

BioColor aims to bridge the gap between advanced plasmonic sensing and the practical demands of environmental monitoring. It combines AuNP-based plasmonic papers fabricated as described in [30,31], cloud-based data storage, and image processing. It features an intuitive app for results visualization and data management. The platform analyzes captured sensor images in real-time using optimized image processing algorithms, including region-of-interest segmentation, color extraction (mean and dominant), and comparison using the CIEDE2000 metric.

In a previous publication [32], we detailed the BioColor image processing techniques and color comparison methods, eliminating the need for spectrometers and desktop software. In a following work [33], we used the BioColor approach to analyze the color of light transmitted through plasmonic papers of gold nanoparticles in different solutions (water, ethanol, glycerol) with varying refractive indices. The results demonstrated a direct correlation between color changes and refractive index variations.

In this article, we now focus on the BioColor system from a computer science perspective, presenting its system architecture, cloud connectivity, and the development of the mobile app, showing how components work together to deliver a user-friendly, low-cost plasmonic sensor readout system. Section 3 summarizes the experimental study that used different sensor images, as well as a usability test conducted with 12 participants to evaluate their experience with the BioColor app.

2. Materials and Methods

2.1. System Architecture

The BioColor system is designed to read and interpret colorimetric changes in plasmonic papers using a smartphone and cloud-based processing. The sensing process and system architecture are illustrated in Figure 1a,b, respectively.

Figure 1a demonstrates the LSPR sensing principle. When a beam of incident light in the UV-Vis range passes through the gold nanoparticles (AuNPs) plasmonic paper, certain wavelengths are filtered out depending on the surrounding refractive index. This filtering effect, known as LSPR, creates a unique colorimetric signature in the transmitted light. When specific analytes bind to the AuNPs, they change the surrounding refractive index, causing a shift in the LSPR peak and a visible color change in the transmitted light. Traditionally, such spectral changes are measured using laboratory spectrometers, as shown in the inset on the bottom right.

The BioColor system simplifies this process by employing smartphone-based image processing techniques to analyze the color shift in the transmitted light, eliminating the need for expensive spectrometers. An overview of the system architecture is presented in Figure 1b, which consists of four main components:

• Experimental setup, including LSPR samples made from AuNPs plasmonic papers, a halogen lamp positioned directly above the samples, and a CMOS camera placed below to capture the transmitted light. This top-down lighting and bottom-up imaging configuration minimizes external light variability.
• Hosting database that securely stores the captured images using Firebase cloud service.
• Mobile application that displays the images of the samples along with the corresponding sensing results.
• API server that handles the image processing algorithms.

The user’s interaction with the platform is illustrated as a sequence diagram in Figure 2. The user runs the CMOS camera interface to capture images of samples by manually choosing the exposure and RGB gains to prevent automatic adjustments between samples. Once an image is captured, the user has the option to upload it to the Firebase database. In the mobile app, authenticated users can view the uploaded images, select them for analysis, and send them to the API server for processing. The server returns the analysis results to the mobile app, showing the detected color differences of the compared samples.

2.2. Firebase Database

Firebase is a development platform that provides developers with various tools and services for deploying web and mobile applications [34]. In this work, the services utilized include Firestore database, Storage, and Authentication.

Cloud Firestore is a NoSQL database that stores data in documents organized into collections. Each document contains metadata fields that are mapped to specific values. Figure 3 shows the “images” collection, where each document represents a sample image and its associated metadata.

Firebase Storage is designed to securely store and serve various types of files, including images, videos, audio, and documents, in a scalable manner. When the user captures an image using the camera interface, the image is uploaded to Firebase Storage. Firebase then generates a URL of the file location which is stored in the “imgURL” field along with the image metadata (camera settings and timestamp) in a new document within the “images” collection. This information is also displayed in the BioColor app, allowing users to verify the acquisition conditions and ensure transparency and repeatability. Each time a new image is captured and added to the Firestore database, the mobile app is automatically updated using Firestore’s real-time listeners. This feature is very valuable as it ensures efficiency and flexibility by delivering a data snapshot only when a document is added, modified, or removed, eliminating the need to fetch the entire database for every change.

Firebase Authentication is a token-based authorization system that allows users to authenticate using popular platforms like Twitter, Facebook, and Google, as well as using their email addresses and passwords. In this work, we use the email/password method for user registration and login to the BioColor mobile app.

2.3. Mobile App

BioColor is a mobile application designed to help users, including healthcare providers and environmental scientists, interact with a biosensor system and visualize results related to the materials being sensed. The app represents an adaptable structure that allows for continuous refinements and the integration of future inventions.

BioColor offers two approaches for comparing sample colors: (1) Analyzing three different samples displayed as a stripe within a single image or (2) comparing a single sample from one image to a single sample from another image. In the future, the number of samples and the way they are presented in the captured image may be adjusted based on the user’s needs.

The BioColor app is built using the Flutter framework. We chose Flutter because it is a complete software development kit (SDK) that includes everything needed to create applications for multiple platforms, such as libraries, documentation, APIs, and frameworks [35]. In Flutter, everything is a widget; these widgets are organized in a tree structure. Each widget has access to its own context (location) and that of its parent in the tree using the ‘BuildContext’ object from the ‘build()’ method. This is important for state management in Flutter applications.

Flutter BLoC State Management

BLoC (Business Logic Component) is a design pattern developed by Google to separate business logic from the presentation (UI) layer, making it easier to reuse code efficiently as it expands [36]. While the pattern is named after the BLoC itself, it is typically part of a larger three-layer architecture:

• The User Interface (UI) layer contains all widget files.
• The Business Logic Component layer contains all BLoCs.
• The Repository layer (or data layer) handles the communication with external databases and APIs.

Figure 4 represents the overall layered architecture of the BioColor app.

The UI layer contains the widget tree of the application. It can only communicate with the Business Logic layer through streams of events and states. The widgets are grouped in pages (screens) which are described in

Table 1. Description of the application screens.

Page	Description
Signup	Registers users in the Firestore database using email and password (Figure 5a).
Login	Authenticates users with their email and password (Figure 5b).
Home	Shows captured images from the camera. Tapping an image opens the Sample page (Figure 5c).
Sample	Displays image details and camera settings. Allows adding the image to the Analysis page (Figure 5d).
Analysis	Allows users to select and remove images for analysis. It provides two options for analysis: three samples in single image (Figure 5e) or one sample image compared with another sample image (Figure 5g). Users can choose a comparison method (mean or dominant) and initiate the analysis.
Result	Shows color comparison results. For a single image containing three samples, the output includes the original image on the left with the mean or dominant color of each sample on the right, and a color difference graph below (Figure 5f). In the case of one-sample images, each sample is presented alongside its mean or dominant color and the corresponding color difference value (Figure 5h).

and visualized in Figure 5.

The Business Logic layer serves as an intermediary between the UI and the Repositories. The app implements three BLoCs: (1) Sample for the Home page, (2) Analysis for the Analysis page, and (3) Result for the Result page. The BloCs and their responsibilities are detailed in

Table 2. BioColor BLoCs responsibilities.

BLoC	Responsibility
Sample	Receives a list of Sample objects from the Sample Repository and updates the Home page to display the images.
Analysis	Adds, removes, or checkboxes images on the Analysis page. Selects a color comparison method to start the analysis.
Result	Receives checkboxed images and the comparison method from the Analysis page. Sends them to the Result Repository for posting to the API. Receives the Result object from the Result Repository and updates the Result page with the analysis results.

.

The Repository layer acts as the intermediary between the data sources (such as Firebase and APIs) and the BLoCs. The repository’s main role is to fetch, cache, and manage data, keeping the business logic separate from the data source. The app implements two repositories: (1) Sample, which handles the communication with the Firebase data source, and (2) Result, which communicates with the API server. The repositories and their responsibilities are detailed in

Table 3. BioColor Repositories responsibilities.

Repository	Responsibility
Sample	Fetches sample images from the Firestore collection (‘images/’) as a Stream. The Sample BLoC subscribes to the stream to be updated whenever new images are added to the Firestore collection.
Result	Sends analysis data as an HTTP POST request to the API endpoint and delivers the received analysis results to the Result BloC.

.

2.4. BioColor Flask API

The BioColor backend server is a RESTful API built using the Flask framework in Python (version 3.12.4). RESTful APIs follow a set of rules for efficient web communication, and Flask is a lightweight and flexible framework that simplifies the development of web applications and APIs in Python [37]. The BioColor Flask API is hosted on the PythonAnywhere cloud-based platform [38]. It provides a hosting solution for Python web applications and scripts. We chose PythonAnywhere because it manages the server infrastructure, allowing us to focus on developing the API without the need to handle server setup, maintenance, or deployment.

The BioColor API allows the BioColor mobile app to access and utilize its image analysis resources. These resources are accessed through specific endpoints, each corresponding to a unique URL. The API utilizes routing to direct incoming HTTP requests from the mobile app to the appropriate processing functions and modules. The functionality and the structure of the BioColor API are illustrated in Figure 6.

For single-image analysis, such as comparing three samples within one image, the request body includes the image’s Firebase storage location (imgURL) and the chosen color comparison method (“mean” or “dominant”). The API retrieves the image, processes it using the (compareOneImage()) function from the (image_processing_one_image.py) module, and returns the analysis results in the HTTP response body, along with a status code in the header indicating success or failure.

When comparing two separate images, the request body contains the Firebase Storage locations of both images (imgURL1, imgURL2) and the selected comparison method. The API obtains these images, performs the comparison using the (compareTwoImages()) function from the (image_processing_two_images.py) module, and similarly returns the analysis results and status code in the HTTP response.

2.5. Image Processing and Color Analysis

The image processing algorithms are run on the Flask server hosted on the PythonAnywhere platform. As mentioned earlier, the algorithms were detailed in our previous publication [32]. The images captured by the CMOS camera are not ready to perform color comparison directly; that is, they contain an uninteresting black area surrounding the samples. Hence, image preprocessing is needed to detect the sample region in the image. The preprocessing comprises: (1) Region of interest (ROI) detection and cropping, followed by (2) ROI segmentation to identify the rectangular samples, and (3) sample color calculation to represent the sample in a single color, mean, or dominant. Figure 7 shows a captured image of three rectangular samples with the outcome of each processing step to prepare the image for color comparison. The algorithms are implemented using the scikit-image library in Python [39].

In Appendix A, for the first step, the ROI detection and Cropping algorithm flowchart is illustrated in Figure A1. Then, for the second step, the ROI segmentation algorithm flowchart is displayed in Figure A2. Finally, the sample color is calculated using two methods, the mean color is shown in Figure A3 and the dominant color is shown in Figure A4.

3. Results

To evaluate the BioColor platform, two types of assessments were performed. The first assessment focused on the image processing algorithms, testing them with various sample images captured in different surrounding mediums. The second assessment is the user experience evaluation to test the system’s usability.

3.1. Image Processing Evaluation

This section introduces a summary of the experimental study results reported in [33]. The study examined the BioColor image processing algorithms to detect changes in the color of the transmitted light through substrates made of AuNP plasmonic papers, which were exposed to mediums with increasing refractive index. A halogen lamp served as the light source, and the following conditions were tested:

• A dry substrate with a refractive index of 1.0.
• A substrate moistened with water, which has a refractive index of 1.33
• A substrate moistened with a mixture of glycerol and ethanol, referred to as sol.4, with a refractive index of 1.44.
• A substrate moistened with glycerol, having a refractive index of 1.47.

The images of the substrates are analyzed, and the color difference is calculated between each pair of samples, as shown in

Table 4. The color difference results using a halogen lamp.

Substrate	Mean Color	Dominant Color
Dry vs. glycerol	17.58	18.98
Dry vs. sol.4	17.44	20.81
Dry vs. water	11.92	11.07
Water vs. glycerol	5.18	2.39
Water vs. sol.4	5.37	4.3
Sol.4 vs. glycerol	0.73	4.08

. The color comparison is performed using the mean and the dominant color methods.

The results of the mean color method outperform the dominant color method by showing a bigger color difference when there is a greater variation in the refractive index, and smaller when the variation is minimal. These findings are consistent with the work reported by Serafinelli et al., who measured spectral shifts using spectrometers. In their study [31], Figure 7a shows how the transmittance spectra of plasmonic papers change when immersed in solutions of different refractive indices, while Figure 7b shows the link between the lowest transmittance wavelength and the refractive index, supporting the observed color changes.

The mean color method considers all colors in the image, capturing small pixel color changes, while the dominant color ignores minor differences by focusing only on the most prevalent color.

This experiment is important for detecting analytes, as changes in refractive index are commonly induced by analyte binding events in functionalized LSPR systems. For instance, if a substrate is functionalized to detect specific analytes, such as heavy metal ions, these analytes can induce a change in the refractive index. In such cases, BioColor can accurately measure the resulting color shift. This feauture makes BioColor broadly compatible with functional LSPR biosensors.

Building on these outcomes, our goal is to implement the BioColor approach for monitoring water quality. While we have not yet performed specific tests to detect contaminants in water, upcoming experiments will include AuNP plasmonic paper substrates functionalized with selective reagents designed to detect heavy metal ions, which will allow us to measure pollution levels in water samples. There have been successful applications reported for detecting copper and mercury in various water samples using paper-based noble metal nanoparticles [40,41].

3.2. User Experience Evaluation

The user experience evaluation test is performed to collect users’ feedback regarding their experiences using the BioColor mobile app. It aims to evaluate usability, functionality, and user satisfaction to improve the BioColor interface. After a briefing on the objectives, the users received a questionnaire to guide them through the testing process. This questionnaire outlines the tasks to be completed and includes questions to answer after each task. All participants had their first experience with the application during the test and used it under similar conditions. The tests were supervised to enable notetaking on how users performed and to document any issues or feedback they shared.

This questionnaire was divided into four sections. The first section collected information about participants, including age, job role, and experience with similar analytical applications. In the second section, participants were guided through a series of seven tasks designed to explore the application’s interface. These tasks were as follows:

• User registration process using email and password;
• Understanding the types of captured sample images;
• Viewing image camera settings;
• Performing color comparison (three samples displayed in one image);
• Understanding analysis results (three samples displayed in one image);
• Performing color comparison (one sample image compared to one sample image);
• Understanding analysis results (one sample image compared to one sample image).

Following each task, participants rated the difficulty of completing it using a 5-point Likert scale, where 1 indicated ‘Strongly Disagree’ and 5 indicated ‘Strongly Agree.’ The third section of the questionnaire included the System Usability Scale (SUS), a standard 10-question tool used to assess system usability. The fourth section featured an open-ended question, encouraging participants to share their overall opinion of the interface and suggest potential improvements. The results from each section are presented and discussed in the following sections.

3.3. Participant Information

The tests were conducted anonymously with 12 voluntary participants. According to Jakob Nielsen [42], qualitative usability studies require 5 to 7 users to identify major issues. Therefore, our group of 12 is within the recommended range of 5 to 15 for preliminary evaluations. The participants were carefully selected from relevant fields, including Ph.D., Master’s, and undergraduate students, professors, and professionals, primarily from the fields of electronics, computer science, chemistry, and biomedical engineering. The data show that:

• 25% (3) of participants were under 21 years old;
• 33.3% (4) were between 22 and 31 years;
• 8.3% (1) were between 32 and 41 years;
• 16.7% (2) were between 42 and 51 years;
• 16.7% (2) were between 52 and 61 years.

This indicates the participants represented a wide range of ages. They were asked about their familiarity with similar analytical mobile applications. The responses indicated the following: (5) 41.7% reported being ‘Not Familiar,’ (1) 8.3% were ‘Somewhat Familiar,’ (4) 33.3% were ‘Neutral,’ (1) 8.3% were ‘Familiar,’ and (1) 8.3% indicated they were ‘Very Familiar’ with such applications.

3.4. Task Testing

Participants were asked to complete seven tasks exploring the BioColor app and evaluate how easily they found each task on a scale from 1 (Strongly Disagree) to 5 (Strongly Agree).

Table 5. Task testing responses.

Task Name	Mean	Standard Deviation	Mode
1. BioColor App Registration Ease	4.83	0.37	5
2. Understanding Sample Images on Home Page	4.33	1.11	5
3. Checking Image Details Ease	4.92	0.28	5
4. Performing Color Comparison (three samples in one image)	4.67	0.62	5
5. Understanding Analysis Results (three samples displayed in one image)	3.92	1.04	4
6. Performing Color Comparison (one sample image compared to another)	4.08	1.05	5
7. Understanding Analysis Results (one sample image compared to another)	4.17	0.99	5

summarizes task responses by mean, standard deviation, and mode.

• Mean: Indicates if users found tasks easy or difficult. For example, a mean of 4.2 suggests tasks were generally easy.
• Standard Deviation: Shows variation in responses. For instance, a value of 0.34 indicates similar opinions, while a value of 1.10 represents mixed opinions, with some users finding the task easy and others finding it difficult.
• Mode: Represents the most frequently chosen response.

3.5. System Usability Scale (SUS) Responses

The System Usability Scale questionnaire was created by John Brooke in 1986 [43]. It is used to evaluate the usability of products, services, websites, applications, and any other type of interface. The evaluation is measured using the SUS score, which is a single number between 0 and 100. Scores above 80.3 indicate excellent usability, while scores below 51 suggest poor usability.

The SUS questionnaire consists of 10 questions, with users rating each question on a scale from 1 (Strongly Disagree) to 5 (Strongly Agree):

• I think that I would like to use this system frequently.
• I found the system unnecessarily complex.
• I thought the system was easy to use.
• I think that I would need technical support to use this system.
• I found the various functions in this system well integrated.
• I thought there was too much inconsistency in this system.
• I would imagine that most people would learn to use this system quickly.
• I found the system very cumbersome to use.
• I felt very confident using the system.
• I needed to learn a lot of things before I could start using the system.

Table 6. System Usability Scale responses.

Question	Mean	Standard Deviation	Mode
1	3.5	1.35	4
2	1.67	0.62	2
3	4.33	0.62	4
4	2	1.22	1
5	4.08	0.51	4
6	2.33	1.10	2
7	4.42	0.85	5
8	1.67	0.63	2
9	4.08	0.88	4
10	1.75	0.72	1 & 2

summarizes the SUS responses obtained from the participants.

BioColor registered an SUS score of 93, which is excellent. This indicates that users had a highly positive experience, indicating good usability and satisfaction with the system. The calculation method is explained in [44].

4. Discussion

4.1. Analysis of Task Testing and Usability Results

Most participants found the app simple and easy to use. Looking at Table 5, in particular, the registration process (task 1), viewing image details (task 3), and performing analyses for three samples in one image (task 4), had standard deviations (SDs) less than 1, indicating consistent user opinions.

However, there were mixed opinions on the other tasks. For instance, task 2, understanding the image types on the Home page, had an SD of 1.11. This variation is due to the inconsistencies in the number of samples per image. This originates from the sample testing experiences we performed; however, image standardization is planned for future versions of the app. Task 5, registered an SD of 1.04 as few participants were confused by the color difference graph on the result page (see Figure 5f). The graph illustrates the color differences between samples 1 and 2, as well as between samples 1 and 3, but it does not show the difference between samples 2 and 3. It was clarified that sample 1 serves as a reference for comparison.

In task 6, the standard deviation (SD) was 1.05, indicating that some users faced difficulties while comparing colors between two sample images. The issue was the absence of workflow guidance. Therefore, it was suggested that the selection of images containing one sample must be simplified by prompting the user to select a second image by automatically returning to the Home page.

Regarding the system usability in Table 6, question 1 had an SD of 1.35, as many users reported they would not use the app frequently, which is understandable given the app’s technical focus.

Also, some users felt that they might need technical support to use the app effectively, and this explains the SD of 1.22 in question 4. Question 6 registered an SD of 1.10, referring to system inconsistency; this is likely caused by the two different image types and their displayed comparison results. To address this, users recommended verifying the image type before processing and using larger font sizes for results labels to improve readability.

Additionally, a few users noted that the analysis process was slow and suggested introducing percentage progress bars to inform users about ongoing background analysis.

Finally, during the assistance of participants in completing tasks, it was observed that older users faced more difficulties when using the BioColor app compared to younger users. Several factors contribute to this difference. Generally, younger users adapt quickly to new user interface (UI) designs due to their familiarity with technology, while older users may require more time to understand workflows and navigation.

4.2. Limitations and Future Considerations

The BioColor system shows good results in controlled tests; however, some limitations need to be addressed before application in real-world scenarios. First, field conditions like rain, wind, and changing light conditions can interfere with image capture and sensor accuracy. One solution is to create a compact sensing setup inside a lightproof box. For instance, the current CMOS camera could be replaced with a smaller, portable camera, such as Arducam integrated with an Arduino board. This new setup might introduce compromises in image quality and power consumption, which could impact long-term or frequent monitoring.

Second, paper-based plasmonic substrates are cost-effective and easy to produce, but they are typically designed for single use, necessitating frequent replacement. In practical applications, many substrates could be pre-functionalized and packaged with the device and accompanied by clear replacement instructions. Another important consideration is that the substrates will come into contact with water samples. Therefore, the box design must allow easy access, such as having a removable side panel.

Finally, practical issues such as mobile connectivity (like 4G/5G) and occasional internet access for cloud services should also be considered.

5. Conclusions

This paper introduced BioColor, an innovative system that integrates several key technologies to create a complete and accessible solution for environmental monitoring. The core innovation of BioColor lies in connecting advanced plasmonic LSPR sensing with the accessibility of smartphones and the power of cloud computing.

This work focused on the computer science aspects of the system, including system architecture, cloud connectivity, and the development of the mobile app. The system was successfully validated by consistently detecting changes in transmitted light color related to the LSPR effect when analyzing images of substrates exposed to media with different refractive indices. We consider these results to be a proof-of-concept demonstration of BioColor’s ability to convert complex sensor data into simple color readouts on a phone, without the need for costly spectrometers that are often impractical for field use.

Additionally, a questionnaire assessing user experience was conducted with 12 participants to evaluate the system’s usability and functionality. Overall, the BioColor app received generally positive feedback in terms of usability and user experience. The overall SUS score of 93 showed that the app is easy to use. However, some areas need improvement, such as processing speed, app-server connectivity, and workflow for processing multiple images.

Although current testing focused on simple refractive index changes, the platform is designed to be compatible with more advanced, functionalized plasmonic substrates for detecting specific pollutants such as heavy metals. Future work will involve integrating analyte-specific reagents that induce visible color changes, allowing BioColor to measure these changes and estimate concentrations directly in the field, scaling on a TRL5 prototype.