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 brownfield project web applicationcreated by GM to store and maintain meta data/ configuration data for Manufacturing applications. Basis for providing context to manufacturing telemetry data and enable Digital Twin technology.
there are multiple modules in this application, but only the ‘Equipment’ module will be shown. ‘Equipment’ module includes ‘View All’ and ‘Mapping’ sub-sections. ‘Mapping’ allows controls engineers to create relationships between equipment in the manufacturing process—introducing a capability never before available.
supports 20,000+ in-plant engineers across 23 GM plants and allows engineers to save 1,000+ hours annually in user operations
meets business need: consolidate multiple GM applications into a unified system– enhance operational efficiency, reduce complexity, and ensure a more more scalable and streamlined Manufacturing process
duration 2 years (designs were developed and implemented in 2 major launches; currently in ongoing development and refinement– project estimated to be completed by 2028)
role & collaboration UX Designer (1 of 2 UX Designers)— collaborated a team of UX Researchers, Product Owners, Product Managers, Developers, Solution/ Analytics Architects, Directors of Manufacturing Org
responsibilities conduct user research, create wireframes & prototypes, iterative improvements to improve information architecture and reduce cognitive load, lead developers to 2 successful launches, establish and redesign figma components for Manufacturing Org’s design system
identifying problem areas
controls engineers need a way to create relationships between equipment— none of GM’s internal Manufacturing applications had this capability
ensures process automation and sequence control; improves data flow between equipment; enhances predictive maintenance; predicts/ identifies failure points
all possible interactions between equipment: map & unmap equipment to a node in plant floor hierarchy (workstations, shops, etc.); map & unmap equipment to equipment (establishing parent and child relationship); move equipment to a different node
GM’s business needs: consolidate multiple GM applications into aunified system– enhance operational efficiency, reduce complexity, and ensure a more scalable and streamlined Manufacturing process
initial concepts & wireframes
user flow of first concept wireframes (shown below):
two expandable/ collapsable panels: user navigates to first panel to select shop and section, then opens second panel to view lower nodes of plant floor hierarchy (workstations, zones, existing equipment, etc.) to see all equipment in that level
expandable rows: user views equipment details to select which equipment(s) to map
user selects equipment, then clicks‘Submit’ button to map
mapping status for selected equipment in step 3 will show as ‘Mapped’, rest of equipment in that node will show as ‘Unmapped’
took up too much real estate on page, unclear way to break down plant-floor hierarchy
need for redefining terminology
collaborated with end-users and Business stakeholders to align on terminology used in plant (redefining ‘Groups’, ‘Stand-Alone Devices’, ‘Cell’, etc.)
unclear instructions and visual UI to guide user
‘Submit’ button does not provide accurate context to ‘Mapping’ interaction
no visual cue of where to start on page and what to do
refining workflow & redesigning interactions
condensed top navigation bar— reduced top nav height, removed breadcrumbs for more real estate on page
removal of expandable location hierarchy panel
created separate hierarchy panel for Equipment section of Application: Groups panel (includes plant-floor hierarchy and mapped equipment relationships)
zebra striping for better readability with data table, fixed footer with table navigation
two methods to map:
drag & drop— inspired by Gmail’s drag & drop UX pattern; Apple’s Finder/ Windows’ File Explorer of moving files by dragging right to left, left to right
manual map button— added for accessibility, gives users more control and encourages them to make intentional decisions
confirmation messages— every time user maps/ unmaps equipment, confirmation message ensures users to review and confirm their decision
