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. ‘View All’ allows users to view and manage all equipment on the plant floor, allowing real-time equipment visibility and improved maintenance planning.
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
defining the objectives
UX features: create a screen where users can view all equipment on plant floor
CRUD functionality
add new equipment and resolve conflicts with existing + new data
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
concepts & wireframes
plant location-first navigation hierarchy: collapsable and expandable left panel to select plant location first, then load equipment data
horizontal scroll: horizontal scroll to view all attributes (Device Name, Device ID, Description, Type, IP Address, etc.) of equipment, attribute column selector at top of data table to view which attributes to view at first glance
expandable rows: introduced expanded rows in data table to show additional details
new feature: add new equipment with DCDL file upload
collaborated with developers and end-users to add CRUD functionality — started with ‘add new equipment’ feature:
user selects which parts of plant-floor equipment they want to view in left panel
user views all equipment info in ‘All Equipment’ tab on page
user navigates to ‘Import DCDL’ tab on page to upload DCDL file
once DCDL file is imported, user is guided to resolve conflicts in ‘Pending Resolution’ tab (selection of choosing between old existing equipment vs new imported equipment)
view all mockups & prototype here (these designs were part of 1st Launch of Application)
usability testing & results
conducted usability testing with engineers for feedback on ease of use:
users had difficulty accessing additional details in expandable rows, says info was “too hidden”
users did not enjoy horizontal scroll experience: preferred vertical scroll to save time and quickly find equipment
no users noticed the attribute column selector
users found expandable plant location panel unnecessary: expressed inconvenience on data table shifting as the left panel expands/collapses, preferred to see all equipment on plant-floor rather than certain areas of plant
potentially more steps in resolving ‘Pending Resolutions’: Resolve IP conflicts, Resolve Updates, Resolve Removals
concerns in implementation & performance: loading time with horizontal scroll took too long; developers had difficulty customizing each component used in Manufacturing Org’s design system components (switched to PrimeReact’s components)
key iterations towards Release 2 of Launch
condensed top navigation bar— reduced top nav height, removed breadcrumbs for more real estate on page
removal of expandable location hierarchy panel on left; only select Shop location when uploading DCDL file
zebra striping for better readability with data table, fixed footer with table navigation
embedded search bar and ‘Add Equipment’ button into data table header
two steps to ‘Add Equipment’ by importing DCDL file:
select Shop location and upload DCDL file
‘Resolve Conflicts’: screen takeover with stepper view to complete DCDL Import process
introduction of notifications panelcomponent (first to be used in Manufacturing Org Applications) to allow users to navigate to other areas of Application and alert users when DCDL file upload is complete
