case study Neoception
Design . Web
Neoception, founded in 2017 as an IT consultancy, stands out as a service provider in the design and optimization of digital processes in the industrial environment. As part of the Pepperl+Fuchs Group, a leading global electronics technology company and one of the world's largest sensor manufacturers, Neoception is a reference in this sector.
The main highlight of this platform is access to digital information through physical devices. With a simple QR code scan, users are automatically directed to the digital platform. This process creates a digital representation of the physical product, providing instant access to its technical specifications anytime, anywhere.
challenge
Industry 4.0 Digital Twin
Whether it's a computer graphics card or an ABS module for a car, any physical electronic product can incorporate a QR code that connects us to its 'digital twin' - the digital version of that product.
To create these "digital twins," we use the AAS - Asset Administration Shell, which is the standard for digital representation of an asset, whether it's an individual component or a machine composed of multiple components.
Front-office
The design of the front office emerged as a crucial element in establishing a solid and effective digital presence. Recognizing the fundamental importance of an accessible and intuitive interface, we dedicated ourselves to the task of developing a front office that was easy to use and reached the maximum number of users possible.
Our approach focused on functionality, as well as adaptability, ensuring that the front office was responsive across various devices and optimized to provide a fast-loading experience.
This process involved a detailed analysis of user needs, expectations and an exploration of best practices in design and usability. The result is a dynamic and efficient interface that facilitates user interaction, promotes effectiveness, and customer satisfaction.
Back-office
The back office system of this project is crucial for internal operability and effective content management.
We faced the challenge of translating business rules into application interfaces, ensuring that a complex data model was translated into a user-friendly interface. Simplification, accessibility, performance, and flexibility for evolution were the key principles that guided the development of the back office. Our approach aims to ensure that each system functionality is executed with efficiency and precision.
AASX
The Industry 4.0 digital twin standard, is used as a basis for parameterizing templates and content.
Template Rule
To integrate AAS content, we use a content-independent rule system.
Client Content
Data is provided through a JSON file. Here, we establish the connection between the JSON properties and the template rules.
After the structural and conceptual organization, we move on to the wireframing phase
This stage allows us to create the fundamental structure of the platform without spending too much time on visual design, which facilitates discussing ideas and flows with the client more visually.
Additionally, it is during this phase that we understand how users interact with the platform by conducting usability tests. Through these tests, we identify how many clicks are needed to achieve a certain goal or how long it takes for users to understand where to find certain features.
solution
UI Phase
During the UI phase, we styled the platform according to the visual identity. This involved creating a design that reflected the brand's values and identity, using colours, typography, graphical elements, and other visual resources consistently and harmoniously. The aim was to convey a coherent and recognizable message to users, reinforcing the brand's identity at every point of contact with the interface.
Interactions
Additionally, at this stage, we focused on enhancing the micro-interactions that make navigation on the platform easier.
For example, in the following video, we can see that we implemented a feature in the listings that stands out: we can display a preview/key information about a group of templates, a date rule, or a template rule. This allows the user to gather more information before accessing a new page.
Anchor Navigation
We understand that when creating data rules or template rules, screens can become overly lengthy and less practical to use. To address this issue, we developed anchor navigation that follows the basic structure of the data/template rule, making it easier to navigate through the essential points of a complex structure. This navigation can be collapsed if the user desires more workspace.
Searching in a back office can be a complex task when dealing with different data sources. To solve this problem, we designed a search function that adapts to the page the user is on. For example, if the user is on the "data rules" page, the search focuses on the data on that page. However, filters allow extending the search to other areas.
Mapping the elements of AASX to the properties found in the content provided by clients was a challenge. Both the content and the volume of data were variable, with lists ranging from 10 to 10,000 elements, the same for date properties. The amount of data in each dropdown could be enormous, leading us to identify two problems: difficulty in locating content and the impact this could have on the application - we wanted to maintain the user experience.
Technology Used
Agility and performance.
Vue
Vue is a lightweight, fast, and scalable framework. The Neoception team already had expertise in this framework, making it the obvious choice and eliminating the learning curve.
Vite
Vite, being an extremely fast bundler, along with Vue, accelerated the development process and is an excellent choice for deployment.
Storybook
As we worked closely with the Neoception programming team, Storybook was crucial for delivering documented and tested components to the less technical team members (non-programmers).
