Updated Process Documenter UI


Following please find proposed changes to the Process Documenter UI in response to our usability research results. 


Note: These are rough mockups. The font, font size, pop-up size, button size, blue bar width and all other formatting should match the standard ProcessMaker Designer UI. 

PageCurrent UIProposed UIChanges
Process Documenter


  • Added blue bar to the top of page to be consistent with the Designer UI so users know this plugin is part of ProcessMaker
  • Deleted settings icon bc it didn't work
  • Deleted percentage bar bc users were confused 
  • Changed Review > Preview
  • Reordered Designer and Preview so they are in the correct order 
  • Added Process Documenter in bold in the middle so the user knows where they are 
  • Changed buttons from white buttons to white text w/ light blue lines between the links - w/ blue background (links should look and function like Designer UI below)

  • Added blue bar to Process Inspector to be consistent with the Designer UI and to differentiate as a heading 
  • Bold Key and Value titles to differentiate them from content below 
New Section Pop-up
  • Changed current pop-up style to Designer pop-up UI to be consistent 
    • Added blue bar to top of pop-up with darker blue x to close window 
    • Capitalized New so pop-up title now reads 'Create a New Section'
    • Changed white Cancel and Save buttons to a red Cancel button and green Save button
    • Deleted Required (Count in %) since we are not currently using the progress bar 
    • Pop-up UI should match this pop-up 

Preview Page 
  • Added blue bar to the top of page to be consistent with the Designer UI so users know this plugin is part of ProcessMaker
  • Changed 'Return to EasyDoc' button text to 'Process Documenter' 
  • Added Preview in bold so users who where they are 
  • Changed buttons from white buttons to white text w/ light blue lines between the links w/ blue background to be consistent with the Designer and Process Documenter UI

  • When user scrolls over another button it becomes bold to signify that its clickable