Role: Lead Designer

Document Organizer

Using the existing design system standards design an interface to provide basic document manipulation capabilities. This includes items such as adding, removing and re-ordering pages. The document organizer component will be added to the design system as a feature that can be applied to multiple applications across the product suite.

Default Component Features:

  • Upload multiple documents
  • Rearrange documents
  • Move single or multiple documents left and right in page order or between separate documents
  • Merge selected documents or entire documents together
  • Rotate documents
  • Delete documents
  • Change arrangement of document grid from list to grid view

Advanced Component Features

Indexing Documents:
The user can Index individual documents by clicking the index icon in the toolbar. This opens a side tray component with all appropriate fields.

The user can open the comment pane from the comment icon within the toolbar.

Saving Changed Documents

When the user clicks save they will be taken through a revision review process within an modal component.

Launching The Editor

The organize feature will be placed in viewer toolbar. From here a user can launch the organizer in either an overlay modal or full screen takeover component.

When space in the toolbar is limited the organize feature will be placed in the more menu.

Accessibility Notes:

Tab Order:

  1. Organize
  2. Undo
  3. Redo
  4. Reset
  5. Download
  6. Save
  7. Close
  8. Invoice 1 toolbar
  9. Invoice 1 page set
  10. Invoice 1 “next page(s)” arrow
  11. Invoice 1 expand chevron
  12. Add new document


Document Organizer

Set of Components/Directives that can be used to organize documents.

UX Design System Designer
Hyland Software