Type: Dashboard UI case-study

Duration: 4 weeks

Members: self-study

Focus: Design System, Prototyping, Motion

Background

Car Production

UI for tracking the performance of a car factory's assembly lines in real time.

To have a clear understanding of car production, Lets define 4 different stage to produce a car.

There are millions of production in a car factory from small scale metals to plastic. In order to control and manage the production and detect the problems clear dashboard is required for control manager of the factory.

- Stamping is for producing metal units.

- Welding is merging them with fire.

- Painting is to have a clean look.

- Assembling is for functionally connecting them.

Assembly Lines

Stamping

Welding

Painting

Assembling

KPIs

Key Performance Indicators

A real-time dashboard that displays key performance metrics for each assembly line, like production output, defects per unit, and downtime

The ability to view detailed data on a specific assembly line, including the production rate and status of each machine

The ability to set alerts for abnormal performance (e.g. if the defect rate exceeds a certain threshold)

Infographics

To have a easy comparison with specific time and see how the production changes in time a Line Graph is used.

To observe the percentage of defects in all of the production Pie Chart is used.

In order to follow the work time of a huge number of machines and understand the reason for downtime, Bar Chart in a detailed list is used.

Design System

Logo

Typography

Color

Iconography

Interactive Components

Toggle Switches

Dropdown Menu

Search Bar

Horizontal Tab

Sidebar

Line Graph

Buttons

Pie Chart

Cards

All components are designed with Atomic Design System. The components inside the cards can be redesigned easily.

These changes appear in every copy of the card component in the Figma file.

There are 4 different variants of cards according to required KPIs and alarm management.

Every Card can be filtered and so shows detailed information about every assembly line (stamping, welding, painting, and assembling).

The 'Total' category shows all production and defect in the factory as a sum up of all assembly lines.

Thanks to the time toggle, control manager can observe various time ranges such as daily, monthly, and yearly. Also, he/she can choose and focus on a specific date on the calendar button.

Production

Card / Production: shows the amount of production and changes are easily seen.

Defects

Card / Defects: shows the ratio of defects and guides the manager to the machine with the problem.

2 types of comparison; defects in the assembly line / total production in the assembly line, defects in the selected assembly line / total production in the all assembly lines

Alarms

Card / Alarms: The unusual situations can be define with conditions. Ex: “ if the production rate of welding is lower then 70%, notify”.

Downtime

Card / Downtime: help user to find inefficient machine and reason behind it (maintenance, lack of material etc.). Manager can also compare the down time on graphs.