top of page
Factory Management System
Factory Management System for Audi
Volteo Edge and Intel Company
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
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
Add Workload Image Popup
Visibility and navigation: Showing a color and number for each of the steps
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.
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.
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.
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
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