Case StudyVisual AI Inspection

A use case for powering up inspections and inspectors

Services

UX Review
User Interface Design
Multi-device Interface Design

Deliverables

High Fidelity Mockups
Interactive Prototypes

Visual Inspection AI as a use case, enhances the inspection process by offering insights and guidance through visual analysis and machine learning.

Project Context
Venturing into new grounds...

As part of our creation process to expand and improve Rocket UI themes, we study and engage with a wide range of digital interfaces and use-cases.

Visual Inspection Al emerged as part of an effort to explore, understand and improve the usability in a new field, when we identified "Visual Inspection", an existing application template from Mendix, as an ideal starting point for focusing on key areas of improvement.

Designed for both inspectors and managers, Visual Inspection AI™ consolidates the inspection process into a customizable digital tool, enabling effective and efficient product analysis while leveraging AI integrations.

Our Approach
A Fresh Take on User Experience

The design process started with a brief UX review of the available materials focusing on inspectors’ needs. We assessed usability, navigation flows, and mobile capabilities, all to ensure ease of use on-the-go on the factory floors.  After identifying the areas for improvement, we outlined the essential features and crafted workflows to address them.

In factory floor

Usability for real-time use in busy, industrial environments is key for an inspector fulfil their daily tasks.

Inspection experience

Improve the inspection process with step-by-step process and clear navigation, minimising errors and creating a smoother, and efficient user experience.

Leveraging AI

AI integration that assists inspectors by automatically detecting and categorizing defects, reducing oversight, and supporting accurate evaluations.

In depth guidance

Design an interface that allows managers to provide detailed guidance and media resources, which inspectors can access directly within the platform during inspections.

Use in tablet devices

Design an interface with mobile operation as a goal, making on-the-go inspections more user-friendly.

Create inspection templates

Managers still need to be able to set up inspection templates tailored to specific products, enabling inspectors to use a product-specific inspection form.

With a clear feature set defined, we developed low-fidelity screens to outline the main functionalities. This approach facilitated in-depth discussions on user interactions and informed decisions on the best AI tools to support accurate, real-time analysis.  During the wireframing, starting with low-fidelity wireframes, we were able to test and validate the envisioned functions and features. We tested various configurations in order to improve inspectors’ workflow, focusing on intuitive navigation and minimizing steps to reduce cognitive load.

The final transformation

Rocket UI: From Wireframes to Real-life

In order to quickly to bring the wireframes to life, we customize Rocket UI and create a library of ready to used components with a unique look and feel.  This allows us to build high fidelity prototypes with engaging screens quickly and project a solid and robust application.   Case study’s like this enable us to enhance Rocket UI, by testing these components, we’re able to add new themes and expand Rocket UI's versatility for future applications.

Know more about Rocket UI

The Result
Step-by-step experience, enhanced by smart features.

1. Improve Usability on Mobile Devices

The platform on which we based our use case felt that all of the interface elements were optimized for the high accuracy of a mouse cursor. This is not ideal for use in a factory environment, where users will be moving around while manipulating the inspected objects.  In order to improve this, our app features larger inputs and clear action paths.

2. AI Integration

The AI integration in Visual Inspection AI™ is tailored to identify defects based on a list of expected issues for each inspection area.   The model is trained using labeled defect images provided by managers and complemented by inspector reports documenting flaws.  After an image is captured, the AI suggests a pass/fail outcome and assigns a defect label if an issue is detected. Ultimately, inspectors make the final determination, with the AI offering guidance while ensuring essential human oversight in the inspection process.

3. In Depth Manager Dashboard

We designed a system that enables managers to quickly identify recurring issues and assess the effectiveness of quality control across products.   While ideal for quick overviews, it also offers deeper insights by allowing managers to filter data by defect type, specific products, or product lines, revealing valuable quality trends.   Additionally, inspection frequency and pass/fail metrics help track inspection patterns and highlight areas for improvement, empowering managers to make data-driven quality assessments.

4. Integrated Guides

The app includes inspection guides at both the overview and step-by-step levels. General guidelines help inspectors prepare, while specific step-by-step instructions clarify what to check, improving accuracy and consistency throughout the inspection process.

"This project not only showcases our internal development process but also offers insight into how we collaborate with clients by analysing current processes and tools, and ensuring that every product is impactful and intuitive."

Ana Vintém / UI Designer @ Mediaweb

Is your business seeking a process as seamless and effective as the one outlined here?

Don't wait any longer. Our experienced team is prepared to assist you in developing a solution that perfectly aligns with your business requirements.

Know More