This chapter details the technical and conceptual evolution of the Connect project, from its initial ideation to the final tested prototype. It outlines the design choices, system architecture, and iterative development required to transform a standard metro carriage into an interactive, collaborative canvas that challenges digital isolation.

It covers:

• Ideation & Concept: The transition from identifying the core problem of digital passivity to defining the metaphors and the two-phase interactive solution (real-time ambient light tracking and delayed asynchronous voice messaging).
• Design: The visual and experiential design principles, focusing on invisible technology, dynamic color-blending algorithms, and the minimalist user interface of the web platform.
• Structure: The physical framework of the project, encompassing structural drafts, material selection, detailed technical drawings, and 3D models with stress analysis.
• Smart System: The core technological architecture, detailing the hardware integration of touch sensors and RGB LEDs, alongside the software use cases, platform selection, and component diagrams.
• Packaging: The conceptualization, technical drawings, and structural analysis of the installation's packaging.
• Prototype: A comprehensive breakdown of the modifications made during the physical build, documenting necessary adaptations in structure, updated hardware schematics, and software code flowcharts.
• Tests & Results: The validation of the system through rigorous hardware functionality checks (Pass/Fail) and software testing, including performance metrics and System Usability Scale (SUS) evaluations.
• Summary: Concluding reflections on the development and testing phases, bridging the technical outcomes to the final project conclusions.

Our ideation process began by collecting the main friction points of current digital habits and identifying a broader problem in today’s society: isolation, passivity, and a lack of real-world feedback. In today’s society, digital technology often leads to isolation rather than connection. Many people spend a large amount of time consuming content alone on their smartphones or computers, interacting more with screens than with each other. Social media and digital platforms often promote passive consumption, comparison, and distraction, which can negatively affect mental well-being and reduce opportunities for genuine self-expression. Instead of encouraging creativity and real-life interaction, technology frequently replaces physical social experiences with shallow virtual ones. As a result, people often feel more disconnected, less creative, and less involved in their communities.

We then developed several metaphors for the connection.

• The City's Veins: The metro network acts as the circulatory system of Porto.
• Human Energy: The passengers' interactions provide the heartbeat and rhythm.
• Mirrored Networks: The LED light trails on the ceiling visually reflect the actual metro lines of the city.
• Flowing Connection: Distributing life, emotion, and stories throughout the underground.

From this process, our final direction emerged. We focused on the handrail as the main point of interaction because it is a universal and necessary point of contact in a moving train. We moved away from screen-based interaction and instead turned to ambient media. The idea was to create a “visual echo” of a person’s presence. We realized that by blending colors on the ceiling, we could visually represent the “melting” of social barriers.

Phase 1:


On the metro, you touch a handrail. The handrail is a tube that contains a sensor and a light. The spot where you touch the pole lights up in a color: your color. Your color then travels visibly through the pole up to the ceiling of the metro. On the ceiling of the metro there are LEDs. Your color appears on the ceiling through these LEDs. If another person touches a different pole, their color also appears on the ceiling, and your colors blend together.

Phase 2:

Near the exit doors, there is a QR code that creates a bridge from the visual interaction to a more personal level. After scanning it, a minimalist webpage opens with two main options: “Send” or “Read” If a passenger chooses the sending option, they are prompted with a reflective question such as “What is an experience you learned a lot from, and why?” encouraging them to write a short message with their story or a piece of personal advice. Alternatively, the “Read” option allows passengers to explore a message previously left by other travelers. An important detail is the accompanying note asking users to send or read the messages only after leaving the train. This intentional delay ensures that passengers remain present during the ride and enjoy the shared physical experience, rather than immediately retreating back into their smartphones. This extension continues the idea of connection between strangers and creates a deeper human exchange, while still keeping the focus on the shared space of the metro.

In our design, we focus on making the technology invisible and the experience intuitive. During the ride, no smartphones or similar devices are required: simply holding the handles turns the metro journey into an adventure.

At the heart of the visual design is the interactive color mixing.

• Individual Identity: Each handrail (or each user) is assigned a specific color upon initial contact.
• Dynamic Convergence: As soon as multiple people touch different poles, the light streams on the ceiling migrate toward one another.
• Blending Algorithms: When two colors meet (e.g., blue and red), a new mixed color (violet) is created at the intersection. The more people participate, the more complex and vibrant the visual ecosystem on the ceiling becomes. This visually symbolizes how the presence of each individual alters the collective whole.


The web interface, accessible via QR code, is designed in a minimalist style. After scanning the QR code, users are redirected to the web application's landing page. The CONNECT logo takes center stage here, accompanied by two clickable buttons that lead to the subsequent sections. Within the app, users can choose between composing a message for others or viewing messages written by the community. Our primary focus was to keep the application as simple as possible; we wanted to ensure that both young and old users can navigate it effortlessly. By eliminating the need for logins or complex navigation, we’ve made the experience accessible and time-efficient for everyone.

To ensure a consistent user experience and streamline the development process, our project is built upon a custom-developed, comprehensive Design System. This serves as the central framework for all visual and functional interfaces within our web application.

Importance of the Design System for our Project

A unified design system is essential to the success of our product for the following reasons:

• Consistency: Users can recognize the brand instantly. A cohesive appearance builds trust and conveys professionalism.
• Development Efficiency: By defining reusable components, there is no need to “reinvent the wheel” for every new feature.
• Scalability: New functions can be integrated seamlessly because design rules (layout grids, spacing, colors) are already established.
• Accessibility: By strictly defining contrasts and font sizes, we ensure that the application remains accessible to all target groups.

Core Components of our Style Guide

Color Palette

Our color strategy is deeply rooted in the application's functionality.

• Contextual Derivation: The primary colors and their respective shades were derived directly from metro line branding. This ensures high recognition and creates an immediate visual link to the urban mobility context.
• Color Hierarchy: We utilize a system of primary, secondary, and accent colors, complemented by a grayscale palette for backgrounds and text to effectively manage visual hierarchy.

Typography

• Typographic Scale: We use a fixed scale for font sizes, line heights, and weights.
• Application: This scale is applied consistently across all touchpoints from large headlines for orientation to optimized body text for detailed information. This guarantees a harmonious typographic appearance on all devices.

UI Component Library

A key part of the system is the library of reusable elements:

• Modularity: All elements, such as buttons and input fields, were developed modularly.
• Optimization: Components are specifically optimized for web application requirements (e.g., clear click targets, feedback states like hover or disabled).
• Reusability: Developers can easily access these components, which reduces the margin for error and seamlessly translates the design into the technical implementation.

The Design System forms the visual foundation of our project. It bridges the gap between aesthetic brand identity and technical precision, ensuring that the web application is perceived as a unified, professional, and cohesive piece of work.

Figures 3, 4 and 5 present all versions of structural drawings where each one has an incremental increase in quality and detail as project moved forward.

The completion of the structural drawings (see Figure 4) marked a critical milestone, enabling the transition from conceptual frameworks to a specialized Bill of Materials (BoM), as detailed in Table 1. This selection establishes the Connect and share system as a commercial-grade implementation in which safety and reliability are non-negotiable requirements. Three primary technical challenges shaped the component selection process: enclosure material and regulatory compliance, communication protocol and signal integrity, and power supply management.

• I. Enclosure Material and Regulatory Compliance – The overarching objective of this phase was to advance beyond laboratory prototypes toward a system fully compliant with rigorous European Union regulations, most critically EN 45545-2, which governs fire protection on railway vehicles. The initial proposal to use standard PLA for enclosures was rejected early in the design process due to its significant fire hazard profile. The design therefore transitioned to a PA Rail (Polyamide) enclosure, a material specifically engineered for railway environments that meets the low-smoke and flame-retardant benchmarks required for operation within subterranean metro infrastructures. Procuring infrastructure-grade hardware proved non-trivial, particularly for the rail-certified housing units, which required engagement with specialized international suppliers. This process exposed a significant technical disparity between consumer-grade components and the certified equipment essential for integration into public transit systems.
• II. Communication Protocol and Signal Integrity – Metro carriages constitute high-interference electrical environments. High-voltage overhead conductors and traction motors generate substantial Electromagnetic Interference (EMI), which can readily corrupt standard data signals, making protocol selection a critical design decision. The Controller Area Network (CAN) protocol, implemented via the MCP2551 transceiver, was chosen for its inherent use of differential signaling, which provides strong immunity to common-mode noise. This architecture allows the Connect and share system to reject the electrical noise that routinely causes I²C or USB communications to fail in comparable environments. As a direct result, the system achieves stable data transmission between the handrail sensors and the ceiling LEDs even during periods of peak motor acceleration, which represents the most demanding electromagnetic conditions in regular operation.
• III. Power Supply Management – To address the fluctuating power supply characteristics inherent to rolling stock, an industrial Mean Well DC-DC converter was integrated into the design. Beyond voltage stabilization, this component fulfills a second critical function: it provides regulated outputs at the multiple voltage levels required by the system's heterogeneous hardware, supplying 12 V to the LED strips and 5 V to the microcontrollers, thereby ensuring reliable and consistent operation across all subsystems.

(iv) 3D model with load and stress analysis; (v) colour palette.

Figure 6 presents the black box diagram, which includes all the major systems that will be used for our Smart System.

• Sensors: We use touch sensors integrated into the handrails. Unlike traditional buttons, these respond to the natural grip passengers use to stabilize themselves.
• LED Integration: RGB LED strips are installed along the connections of the handles and distributed across the ceiling panels. If necessary, a screen may also be mounted on the ceiling of the metro car to provide additional possibilities beyond the light strips, such as creating a changing environment with lighting adapted to the time of day. The placement and structure of the LEDs are clear and organized, allowing passengers to follow “their light” and trace the connection to other people.

Tables 2 and 3 presents a electricity consumption of our hardware. Usage of interrupt based architecture and deep sleep modes decreases power consumption of installation significantly when not used, which helps to keep the system sustainable.

The hardware implementation is realized through two dedicated PCB designs, corresponding to the distributed architecture of the Smart System: the Sensor Node PCB and the Central Node PCB.

The Sensor Node PCB integrates all the components required for local sensing, processing, and communication. Each sensor node includes:

• ESP32-C3 microcontroller (Wemos C3 Mini)
• MCP2551 CAN transceiver
• Velostat sensing circuit
• Power regulation (5V input)
• CAN bus interface (CANH / CANL)

The Velostat sensing circuit is implemented using a voltage divider configuration, allowing pressure-induced resistance changes to be converted into measurable analog signals via the ESP32 ADC.

As shown in Figure 7, the PCB is designed to be embedded directly into the handrail structure. This mechanical integration ensures minimal visual impact, while maintaining robustness and protection against mechanical stress and vibration in a public transport environment.

Each Sensor Node PCB operates as an autonomous unit within the distributed system, transmitting processed sensor data through the CAN bus network to the Central Node.

The Central Node PCB acts as the main processing and coordination unit of the system. It is responsible for aggregating data from all sensor nodes and generating the corresponding visual output.

This PCB integrates:

• CAN network interface for multi-node data reception
• Data processing unit for system-level interpretation
• WS2812B LED strip control (single-wire digital output)

As shown in Figure 8, the Central Node PCB is designed as the core element of the system architecture, consolidating communication, processing, and actuation within a single board.

This board is responsible for processing all incoming CAN messages and translating them into real-time visual feedback through the LED infrastructure distributed across the metro environment. Additionally, it ensures synchronization between multiple sensor inputs, enabling coherent system-wide lighting behavior.

The software architecture of the Connect and Share project facilitates real-time interaction and asynchronous digital connection across two distinct modes of use.

I. Use Cases and User Stories

Real-time Ambient Interaction operates through the smart device installed in the carriage. When passengers grip the handrail, sensors detect resistance changes via Velostat and the ESP32 triggers a corresponding color trail on the ceiling LED matrix. When data streams from multiple users intersect, the software executes color-blending algorithms to merge the inputs into a shared visual response.

Asynchronous Connection is mediated through a web application. Passengers scan a QR code to access a web interface, where the application fetches audio files from a cloud database for playback. The same interface allows users to record microphone input, which is then compressed and uploaded to a central repository for others to access.

II. Selection of Development Platforms

Platform selection (see Table 4) was guided by two priorities: low-latency hardware control and cross-platform accessibility.

III. Component Diagram

Figure 9 depicts the frontend flow of the Connect web interface. Starting from a QR code scan, the browser fetches and renders the website. The user is then presented with two interaction options: writing a message, which is transmitted to the backend, or reading a message, which triggers a random message fetch and displays it on screen.

Figure 10 illustrates the backend flow. Incoming HTTP requests are routed based on method: GET requests retrieve a randomly selected stored message and return HTTP 200, while POST requests pass the submitted content through an ML/AI moderation check. Content flagged as harmful is rejected with HTTP 400; clean content is saved to the database and confirmed with HTTP 200.

Figure 11 shows the firmware logic running on the two ESP32-C3 nodes. The upper flow covers the sensor node: it enters deep sleep after setup and wakes on a touch interrupt, transmits the event over CAN bus, then resets and loops. The lower flow covers the actuator node: it similarly sleeps until a CAN bus data frame is received, drives the LED strip, and resets. Both nodes share the same interrupt-driven sleep cycle structure.

Present and explain the: (i) initial packaging drafts; (ii) detailed drawings; (iii) 3D model with load and stress analysis, if applicable.

Refer main changes in relation to the designed solution.

Detail and explain any changes made in relation to the designed solution, including structural downscaling, different materials, parts, etc.

Detail and explain any change made in relation to the designed solution. In case there are changes regarding the hardware, present the detailed schematics of the prototype.

Detail and explain any changes made in relation to the designed solution, including different software components, tools, platforms, etc.

The code developed for the prototype (smart device and apps) is described here using code flowcharts.

Below we can find in Table 5 the complete log for the validation phase. Each requirement must be marked as Pass (P) or Fail (F) based on the methodologies described in Tests..

Software tests comprise: (i) functional tests regarding the identified use cases / user stories; (ii) performance tests regarding exchanged data volume, load and runtime (these tests are usually repeated 10 times to determine the average and standard deviation results); (iii) usability tests according to the System Usability Scale.

Provide here the conclusions of this chapter and make the bridge to the next chapter.