Smart Glove – Real-Time Assembly Monitoring at ARaymond

Product Context: At ARaymond, I worked on the Smart Glove solution, a product designed to improve quality control in the automotive industry by monitoring manual assembly processes. This system provided real-time feedback to operators, helping them detect defects early, thus reducing production waste and non-quality costs.

Product Usage: The Smart Glove was primarily used by assembly line operators in automotive manufacturing, providing them with immediate, real-time feedback to improve manual assembly accuracy. Unlike traditional inspection systems that rely on post-production checks, the Smart Glove allows operators to identify and fix defects during assembly, preventing costly delays and ensuring higher product quality.

Team Composition: I worked within a cross-functional team composed of data scientists, product owner, and AI engineers. My specific role focused on UI/HMI development, where i was responsible for creating the design system and developing reusable components. This collaborative environment allowed me to work closely with product owner and developers to ensure that the UI met both functional and aesthetic requirements

Key contributions included:

✅ Designing, developing and implementing a Humain machine interface that display all the real time data and informations coming from the smart glove wearable.

✅ My work involved creating a scalable UI framework that could handle various future features and requirements.

✅ I build a The design system to support Component reusability, reducing duplication of effort and ensuring uniformity. Scalability, so that the Smart Glove solution could easily evolve with additional features like dashboards or real-time alerts... Consistency across different platforms and screens, ensuring the user interface adapted well to different use cases.

Technical Challenges and solution

Challenge 1: Ensuring Flexibility and Scalability in the Design System A significant technical challenge was ensuring that the design system could scale across different parts of the application while remaining flexible enough to adapt to new features. Each component had to be:

• Customizable using props and themes, allowing for different variations while maintaining consistency.
• Reusable across multiple applications, reducing redundant code and accelerating development.

🚀 To address this, I used Styled Components and Mantine to create a component library that allowed for theming and customization, ensuring that the same components could be reused with different styles and behaviors depending on the context.

Challenge 2: Real-Time Feedback and State Management The real-time feedback requirement posed another challenge, as the UI needed to update instantly when the Smart Glove detected an issue.

🚀 Using RXJS and RecoilJS, I managed asynchronous data streams efficiently, ensuring that the interface could handle large volumes of real-time data without performance degradation.

Technologies Used

ReactJS and TypeScript: for building the UI Components.

Styled Components and Mantine: for consistent, reusable UI elements.

RecoilJS and RXJS: for state management and real-time data streams.

Framer-motion: for smooth, interactive animations.

Storybook: to document and visualize the component library, providing a reference for other developers.

Vitest and Cypress: for comprehensive unit and end-to-end testing to ensure reliability and prevent regression issues.

The design system followed clean architecture principles, ensuring that components were modular, testable, and scalable across different features of the Smart Glove solution