top of page

Factory Management System

Factory Management System for Audi

Volteo Edge and Intel Company

dashboard view.png

About the project

This software was done in collaboration with Volteo Edge and Intel Company for Audi.

The main goal of the project was to develop a friendly system where factory technicians can manage all phases and functions to build a car.

My role in the project was
UX/UI Designer, I started with a research phase, interviews, then designing wireframes, UI prototypes and finally delivering developers documentation.

Tools

  • Figma

  • Miro

  • Adobe Illustrator

Project Phases

Gestalt Usability Analysis

Information Architecture Map

User Personas

Wireframes

Wireframes with User Flow

Prototypes

Site Map

01. Research

Gestalt Usability Analysis
As a start point, I searched for similar softwares, the most similar and common ones are the Infrastructure cloud programs, such as: Amazon Web Services or Google Cloud Platform. Using Gestalt laws, I reviewed where were these laws applied to identify any possible pattern that can help in the design phase. 

Information Architecture Map
In collaboration with Project Manager, Developers, Director of this project we followed 3 steps: Organize, Group and Structure to create the Information Architecture Map. So, this way we could all share our ideas and understanding of what was requested. 

Research

User Personas
There were 2 user personas identified for the different roles of the application: Factory Technician and IT Admin.

Site Map
After user personas analysis and information architecture review, we developed a first site map to have a big picture of the system flow.

02. UI Design

Wireframes
There were multiple explorations done, specially because all screens should considered 2 user profiles and the most important  feautre in a Factory environment is to easily identifiy critical events in order to avoid production impact.

Screens: 

 

  • Dashboard: Shows a map of the factory highlighting critical alerts

  • Worloads: Shows a list of workloads and their status, also a dashboard of them with different criticality

  • Cells: Shows a list of cells and their workloads

  • Nodes: List of nodes with their cells and worloads

  • Alerts: This screen shows all alerts and theier status, each of the alerts display a popup with deatil information and a log of the actions taken from factory operators.

User Flow Wireframes
At Low-fi wireframe level I created a user flow simulation to illustrate how it would work in dev phase

User Interface Prototypes
After multiple reviews of Wireframes and also some Usability testing applied on these, the designs were approved and the UI design prototypes were developed.

Workloads Screen

Workloads overview.png
Workload Detail Factory User - HF 1.png

Healthy dashboard: Included in all screens on top, so that users can identify fast and easy the status of the respective factory section

Metrics: IT Admin and Technician have the option to filter and sort the metrics by multiple variants.

Activity Log: To track all actions taken over this workload

Alerts: General alerts pane always displayed

Workload name: This link redirects user to workload detail view

State: Showing a colored icon for each of state, to not rely only in words, quickly and easy to identify

Telemetry: Shows the telemtry allocated for each workload, again giving a color and a bar view to provide an easy reading of the information

Alerts: Last column shows a count of alerts and by default table is sorted by this number

Basic info summary

Workload Detail View

Workloads Images

Workload images.png

Add Workload Image Popup

Visibility and navigation: Showing a color and number for each of the steps

Add workload 1.png
Add workload 2.png
UI Design

Deploy Workload Popup

This popup guides users to deploy a workload. For this process each step shows a color depending on its status: in progress or completed. Each step will be enabled once the last one is completed succesfully. Also, adding a list of workload images and nodes for an easy deploy process. All this, to keep an easy navigation and visibility of the system.

Deploy Workload.png

Dashboard

This is the main screen and the initial one when user logs in. It shows the general status of all the factory.

Map: Shows the factory map with number of alerts active in the cells. If user clicks on alerts number, will filter automatically the list below.

Alerts list: Displays active alerts at that moment. It has the option to filter by telemetry type, search option and resume each alert. This list will be updated based on clicked cell on map.

Cells bubble chart: White bubbles represent cells, inside of them are workloads, their color change depending on the active alerts. This chart is filtered by telemtry type.

Whenever user clicks on a workload bubble it  shows a toggle with Workload telemetry percetange and cell number, both with hyperlinks to each of them.

Summary Active Alerts: Shows the number of workloads and cells with alerts.

When clicking on the buttons, shows a toggle with a detailed list of alerts with links for nodes, workloads and all componentes related to this alert.

Alerts Trend:  Chart of the last 24 hours with alerts trend by Telemetry. User has the option to change the telemetry type or statistic (number, average...)

Also by hovering through the chart a toggle shows detail of number of alerts at that time with link to open Alert screen.

dashboard view.png
worklaods toggle.png

Activity Log:  Log of all the actions taken on workloads. Each one of these records shows liks to the workload, time where action was taken and detail of the action. Search and filter options available for the list.

Dark UI

As part of this project 2 color theme versions were delivered. Dark and Light.

Group 717.png
Dark Blue Workloads IT User - HF.png

03. Developers Assets Handoff

Once with designs approved, I developed a developers guide including specifications of grid system, color, typograhpy, components.. and all details needed to build the webpage. 

Assethandof
Marco del coche

Conclusion

This is one of my more challenging projects. Understanding all the factory processes was really complex and the communication with stakeholders was crucial to deliver a good design. Also, there were some limitations accessing to the real users and we decided to make testing with other factory operators but not related to car factory, despite this limitation we achieved gathering real good information and feedback. The wireframing phase was a long phase but fundamental, there were multiple rounds delivered to improve designs more and more to ensure a high quality design in the high fidelity phase. I am really proud of participating on this project and deliver a high quality proposal for Audi car factory. 


Thanks for watching!

bottom of page