Sign in
Log inSign up

Need help with UX/design in a document form

Deactivated User's photo
Deactivated User
·Oct 10, 2016

So I have this document page:

http://codepen.io/gskema/full/zKWjVV/ (to edit this, change the view)

where a manager and a client discuss and edit a document with a product list together.

The document that I linked is a rough sketch in Bootstrap 3. This a client view. The product background colors mean:

  • Gray. Client included a product, but has not "proposed" it to be included in the official version of the document. Only the client can see this product row.
  • Green. A product proposed to be included in the offer. A manager has to approve this product.
  • Red. A product proposed to be removed from the offer. A manager has to confirm this removal.
  • No background. A product that is currently and officially in the offer document.

Upon marking products for inclusion/removal, the client needs to go to the bottom of the page and press "Save". This is because the system needs to generate a log/notification of all the changes proposed by the client at once (instead of automatically saving and generating a single log/notification for every change).

I need your advice/opinions on:

  • overall idea (is it too confusing to use/learn?);
  • contextual product row backgrounds in UX sense (is there a better solution?);
  • buttons for inclusion/removal (are they clear/descriptive enough?);
  • any other comments or ideas (anything will help) ;

This has been giving me a headache for the past few weeks, I'd really appreciate some help. Thanks!

2