Need help with UX/design in a document form
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!