#casestudy
#applicationdesign
#mobile
#Figma
Atomic Design System
Atomic Design System
Atomic Design System
Atomic Design System
Atomic Design System
Atomic Design System
2 Months
Timeline
UX Designer
Role
2 Months
Timeline
UX Designer
Role
For Automobile Production Management Application
For Automobile Production Management Application
I led the creation of the Atomic Design System, a comprehensive, atomic design framework built specifically for the complex demands of automobile production management. This system brings consistency, operational clarity, and efficiency across manufacturing workflows, quality control interfaces, and production planning tools.
I led the creation of the Atomic Design System, a comprehensive, atomic design framework built specifically for the complex demands of automobile production management. This system brings consistency, operational clarity, and efficiency across manufacturing workflows, quality control interfaces, and production planning tools.
Challenge
Challenge
Before it, our production management tools suffered from fragmented interfaces across departments, manufacturing, quality assurance, inventory, and logistics teams each worked with inconsistent UI patterns. Operators faced confusing dashboards, engineers rebuilt similar components for each module, and critical production data was presented inconsistently, leading to decision-making delays and operational inefficiencies.
Before it, our production management tools suffered from fragmented interfaces across departments, manufacturing, quality assurance, inventory, and logistics teams each worked with inconsistent UI patterns. Operators faced confusing dashboards, engineers rebuilt similar components for each module, and critical production data was presented inconsistently, leading to decision-making delays and operational inefficiencies.
1
Inconsistent status indicators across production stages created confusion
1
Inconsistent status indicators across production stages created confusion
1
Inconsistent status indicators across production stages created confusion
2
No standardized data visualization for production metrics
2
No standardized data visualization for production metrics
2
No standardized data visualization for production metrics
3
Form-heavy workflows lacked unified patterns
3
Form-heavy workflows lacked unified patterns
3
Form-heavy workflows lacked unified patterns
4
Real-time monitoring interfaces had conflicting information hierarchies
4
Real-time monitoring interfaces had conflicting information hierarchies
4
Real-time monitoring interfaces had conflicting information hierarchies
Opportunity
Opportunity
This was our chance to create a unified visual language that speaks the language of automotive manufacturing. By building a system grounded in atomic design principles and production domain expertise, we aimed to:
This was our chance to create a unified visual language that speaks the language of automotive manufacturing. By building a system grounded in atomic design principles and production domain expertise, we aimed to:
1
Reduce cognitive load for operators managing complex assembly lines
1
Reduce cognitive load for operators managing complex assembly lines
1
Reduce cognitive load for operators managing complex assembly lines
2
Standardize critical production data visualization
2
Standardize critical production data visualization
2
Standardize critical production data visualization
3
Accelerate feature development across quality control, inventory, and planning modules
3
Accelerate feature development across quality control, inventory, and planning modules
3
Accelerate feature development across quality control, inventory, and planning modules
4
Create seamless handoffs between design and engineering teams
4
Create seamless handoffs between design and engineering teams
4
Create seamless handoffs between design and engineering teams
5
Ensure accessibility compliance for factory floor environments
5
Ensure accessibility compliance for factory floor environments
5
Ensure accessibility compliance for factory floor environments
Research & Planning
Research & Planning
Phase 1: Domain Understanding (3 weeks)
Phase 1: Domain Understanding (3 weeks)
1
Shadowed production floor operators, quality engineers, and plant managers
1
Shadowed production floor operators, quality engineers, and plant managers
1
Shadowed production floor operators, quality engineers, and plant managers
2
Mapped 40+ unique workflows across assembly, quality control, and inventory management
2
Mapped 40+ unique workflows across assembly, quality control, and inventory management
2
Mapped 40+ unique workflows across assembly, quality control, and inventory management
3
Identified 150+ UI inconsistencies across existing systems
3
Identified 150+ UI inconsistencies across existing systems
3
Identified 150+ UI inconsistencies across existing systems
4
Documented domain-specific terminology and mental models
4
Documented domain-specific terminology and mental models
4
Documented domain-specific terminology and mental models
Phase 2: Technical Audit (2 weeks)
Phase 2: Technical Audit (2 weeks)
1
Catalogued existing components across 8 production modules
1
Catalogued existing components across 8 production modules
1
Catalogued existing components across 8 production modules
2
Analyzed 2,500+ screens for pattern redundancies
2
Analyzed 2,500+ screens for pattern redundancies
2
Analyzed 2,500+ screens for pattern redundancies
3
Interviewed 15 frontend developers about implementation challenges
3
Interviewed 15 frontend developers about implementation challenges
3
Interviewed 15 frontend developers about implementation challenges
4
Assessed accessibility gaps in factory floor lighting conditions
4
Assessed accessibility gaps in factory floor lighting conditions
4
Assessed accessibility gaps in factory floor lighting conditions
Phase 3: Industry Benchmarking Referenced design systems from:
Phase 3: Industry Benchmarking Referenced design systems from:
1
Siemens Industrial Design System - Complex machinery interfaces
1
Siemens Industrial Design System - Complex machinery interfaces
1
Siemens Industrial Design System - Complex machinery interfaces
2
ABB Ability™ Design Language - Industrial IoT standards
2
ABB Ability™ Design Language - Industrial IoT standards
2
ABB Ability™ Design Language - Industrial IoT standards
3
Rockwell Automation UX Guidelines - Manufacturing-specific patterns
3
Rockwell Automation UX Guidelines - Manufacturing-specific patterns
3
Rockwell Automation UX Guidelines - Manufacturing-specific patterns
4
SAP Fiori - Enterprise resource planning consistency
4
SAP Fiori - Enterprise resource planning consistency
4
SAP Fiori - Enterprise resource planning consistency
5
IBM Carbon - Data-heavy dashboard architecture
5
IBM Carbon - Data-heavy dashboard architecture
5
IBM Carbon - Data-heavy dashboard architecture
Key Insights:
Key Insights:
1
Production data requires specialized visualization (line charts for throughput, heat maps for defect clustering)
1
Production data requires specialized visualization (line charts for throughput, heat maps for defect clustering)
1
Production data requires specialized visualization (line charts for throughput, heat maps for defect clustering)
2
Status indicators must be universally understood across multilingual teams
2
Status indicators must be universally understood across multilingual teams
2
Status indicators must be universally understood across multilingual teams
3
High-contrast modes essential for factory floor lighting variability
3
High-contrast modes essential for factory floor lighting variability
3
High-contrast modes essential for factory floor lighting variability
4
Touch-optimized controls are critical for tablet-based quality checks
4
Touch-optimized controls are critical for tablet-based quality checks
4
Touch-optimized controls are critical for tablet-based quality checks
5
Role-based component variations needed (operator vs. manager views)
5
Role-based component variations needed (operator vs. manager views)
5
Role-based component variations needed (operator vs. manager views)
Approach
Approach
Atoms – Foundational Elements
Color palette, typography, iconography, spacing units, elevation, corner radius, grid system
Atoms – Foundational Elements
Color palette, typography, iconography, spacing units, elevation, corner radius, grid system
Molecules – Basic Compound Components
Buttons, input fields, badges, status chips, data cells, toggles, sliders
Molecules – Basic Compound Components
Buttons, input fields, badges, status chips, data cells, toggles, sliders
Organisms – Complex Component Groups
Navigation bars, data tables, filter panels, charts, card layouts, modals, toolbars
Organisms – Complex Component Groups
Navigation bars, data tables, filter panels, charts, card layouts, modals, toolbars
Templates – Page-Level Structures
Dashboard layouts, form pages, detail views, monitoring screens, report structures
Templates – Page-Level Structures
Dashboard layouts, form pages, detail views, monitoring screens, report structures
Pages – Real-World Applications
Production dashboard, quality inspection form, inventory management, maintenance scheduling
Pages – Real-World Applications
Production dashboard, quality inspection form, inventory management, maintenance scheduling
