A-La-Carte Inspections Setup

For this screen, several fields needed to be included in the final screen that followed a workflow easy enough for users to setup templates and make adjustments to the template at any time. Additionally, the UI needed to correlate with the programs (materials.io) the front-end developers used to create more complex systems.

• Users need to add sections IF they want
• Users need to add steps IF they want
• Users should be able to add Prompts or Defects based on previous inputs
• Drag n Drop can allow users to reorganize information as needed
• Basic functions (duplicate, delete, drag n drop, collapse/expand areas) should always be available
• Must include attachments module from previous pages
• Must use materials.io elements
• Stay on brand

‍

Initial Sketches

Includes all required fields and possible UX principles that would allow user to categorize and move information around the screen in a simple way.

‍

UI mockup (dark mode) 

Built within columns to show where body of content should sit, as well as what fields and heading information is to be used in a practical example based on user research

‍

Final outcome (light mode)

Screenshot of developed product showing an example of a built inspection template (limited due to company IP)