Backstory
In the fast-paced world of manufacturing, managing quality inspections at scale is a complex challenge.a company specializing in AI-powered quality inspection stations, needed a scalable interface to manage hundreds of inspection stations and millions of quality inspections across global manufacturing plants.
I led the effort to create an intuitive, scalable management system that could handle the increasing complexity and volume of data, aligning with operators' mental models and supporting Elementary's growth objectives.
Managing Complexity at Scale
Elementary's existing user interface was designed to manage a small number of inspection stations—typically 3 to 5 per factory. However, as we began deploying over 100 stations per factory, the limitations of the basic UI became apparent:
- Visual Overload: A single, flat list of stations became cluttered, making it difficult for operators to find the station they needed.
- Lack of Hierarchy: The inability to organize stations into hierarchies that matched factory layouts hindered intuitive navigation.
- Inefficient Navigation: Operators struggled to maintain a real-time grasp of quality data, frequently switching contexts multiple times an hour.
- Scalability Issues: The system couldn't support the growing demand for real-time defect detection and efficient management across multiple global manufacturers.
Impact on Operations
- Reduced Efficiency: Operators spent excessive time navigating the system, leading to delays in identifying and addressing defects.
- Increased Errors: Difficulty in monitoring station statuses at a glance increased the risk of overlooking critical issues.
- Operational Bottlenecks: The lack of an intuitive interface hindered scalability, affecting customer satisfaction and sales goals.
Objective: Design a scalable, intuitive management interface that mirrors factory layouts, provides real-time insights, and supports operators in managing hundreds of inspection stations efficiently.
My Design Process
Customer Interview Insights
- Hierarchical Organization: Operators desired a system that mirrored their factory layouts for intuitive navigation.
- Real-Time Feedback: Immediate access to station statuses and critical KPIs was essential.
- Flexible Data Sharing: Needed the ability to share insights quickly across teams.
- Seamless Context Switching: Frequent station switching required an interface supporting rapid comparison and minimal clicks.
Secondary Research
- Industry Analysis: Studied existing ERP and SCADA tools to understand how other systems addressed similar challenges.
- White Papers: Reviewed industry publications on manufacturing best practices and information architecture.
Data Modeling
- Visual Representations: Created models of various factory layouts, recognizing diverse methodologies across customers.
- User Goals Mapping: Used affinity diagrams to map out user goals during installation and management phases.
Outcome: Developed a deep understanding of operators' mental models, informing the foundational structure of the new interface.
Ideation: Translating Complexity into Usable Features
I facilitated an experience mapping exercise with cross-functional teams:
Key questions to answer:
- "What's the status of my manufacturing process?"
- "How do I share data to ensure quality?"
- "How can I quickly identify problem areas and shift focus?"
Prototypes
I created prototypes that translated complex requirements into usable features:
- Multiple Layouts: Sketched various interface layouts, focusing on hierarchy and ease of navigation.
- Nested UI Design: Developed a nested interface to simplify navigation without overwhelming users.
Iterative Testing
- Feedback Integration: Piloted the design with two key partners who found the system intuitive.
- Adjustments: Observed the need for quick access to station summaries, added the right-hand panel to reduce clicks.
Turning Design into a Scalable Solution
Worked closely with engineering and architecture teams to ensure seamless implementation:
- Database Framework: Assisted in developing a new database framework to support current and future needs.
- Feature Breakdown: Decomposed features into epics and user stories, providing clear guidance for engineers.
- Edge Case Resolution: Identified and solved potential edge cases to maintain smooth development.
Outcome: A scalable, flexible interface that operators loved, addressing all their pain points.
Key Design Elements
- Left-Hand Panel: Implemented navigation for factories, acting as folders containing lines and stations.
- Accordion Lists: Used for lines and stations, allowing operators to expand/collapse sections.
- "Other Stations" Section: Included one-off stations, ensuring all were accessible.
- Right-Hand Panel: Provided quick summaries with camera feeds, inspection status, metrics and top 5 defects, reducing navigation time.
- Station Details Page: Designed for tracking inspections with a filmstrip view updating with failures.
- Breadcrumb Navigation: Helped users jump from detail views back to the overview with one click.
Impact
- 40% Reduction in Navigation Time: Operators managed stations more efficiently.
- Improved Accuracy: Organized KPIs allowed at-a-glance status understanding, minimizing overlooked issues.
- Scalability and Sales Support: Enabled Elementary to sell scaled solutions confidently.
- Future-Proofing: The new system set the stage for valuable line and factory-level analytics.
Key Takeaways
- Collaboration and Communication: Shared information early and often, coordinating with engineers, architects, and experts.
- Innovative Solutions: Translated complex needs into intuitive designs, enhancing efficiency and user satisfaction.
- Strategic Impact: Supported sales goals and market expansion, ensuring the system's scalability for future needs.