Below features an internal General Motors application. Certain details, including data and specific design processes have been modified or omitted to comply with confidentiality agreements. All screens below were recreated from scratch using Figma to closely match the original designs while maintaining confidentiality. All data shown is dummy data.
overview a greenfield project web application created by GM to enable in-plant personnel, Network Operations, and Manufacturing Operations teams to proactively identify, root cause, and resolve potential issues with OT devices
aims to support 300+ in-plant personnel & manufacturing teams
examples of OT devices: networking hardware, PLCs, cameras, robots, autonomous material handling vehicles
duration 2 months (initial design phase), currently in ongoing development
role & collaboration UX Design Lead & UX Researcher— collaborated with Product Owners, Developers, Solution/ Analytic Architects
responsibilities conduct user research, create wireframes & prototypes, refine information architecture, establish color-blind friendly palette for entire Manufacturing Org’s design system
identifying the problem
two platforms used to search devices, view device status and monitor alerts: internal GM app and Grafana
users expressed dissatisfaction from switching back and forth between two platforms because it delays work process and wanted a simpler dashboard to view only necessary device info
GM’s business need: consolidate applications that provide similar functions by creating internal applications for Manufacturing & not relying on outside platforms
Example of Grafana, a public, open-source observability and data visualization tool used for monitoring and analyzing metrics from various data sources.
understanding our users
Michael, the Maintenance Tech working at GM’s Arlington Assembly embodies the challenges and motivations of target audience of 300+ in-plant personnel
represents users with color blindness, ensuring accessibility considerations
design systems - color palette recommendations
developed a color-blind-friendly palette optimized for both light and dark themes, as well as a tonal palette, ensuring WCAG AA compliance
system was adopted as the primary color standard for GM’s Manufacturing Org, enhancing accessibility, usability, and visual consistency across interfaces
goal: ensure all colors are distinguishable for common types of color blindness (protanopia, deuteranopia, and tritanopia) while maintaining WCAG’s AA accessibility standards
MVP prototype of dashboard interface
web-app integrates existing internal GM web-app & Grafana into one application
users are able to view device info, active alerts (both critical and warning level alerts), various graphs on one dashboard screen
MVP includes new concept of floating action menu (first FAB menu component to be introduced in Manufacturing Org)— allows users to reposition toolbar freely on screen, providing quick access to functions for searching new device, setting a specific time range, refreshing graphs and device alerts/info
next steps: define core features for rest of application, continued usability testing with users, consider adding customization feature (widgets) to build personalizable and customizable PLC dashboard
