- The user uses the dropdown in the gray "new service" area to select a service.
- Once one is selected, let's say Web Design (cuz why not?), then they can click "Add Project Service."
- Once a new Project service (Ex. "Mock-ups" or "Mobile Responsiveness" or something like that) is added within that Service "category" they fill out some information. One of these bits of information is an estimate breakdown, which is where the user can break down their estimate in terms of Work/Doubt. This process is started by clicking "Add Breakdown".
- Each of these breakdowns (not shown) contains a number for the estimate, a description and the category of the estimate (like work or doubt). So three fields. The estimate broken down numbers get summed and validated against whole estimate. The suggestions are clickable and auto-fill the form based on previously completed projects.
As you can see, the user can have 1 to N Services, and for each Service 1 to N Project Services. There is also 1 to Several Breakdowns possible, but realistically only 2 to 3 would be used. Not to mention selecting from a list of employees, and categories. The thing that is puzzling me is how to organize and simplify this mess; it's all nested and crazy and unintuitive!
So far I have two thoughts, but I don't know if they're laziness or good UX:
- Have one form where the user selects a service, then fills out the information and when they click "add" it creates a card below the form and clears the form. The user can remove that card, or edit it. If they edit it, the data repopulates the form and any changes are bound to the card. Simple. Relatively clean.
- Have the whole form on one row of a table, like line items. In the bottom of the table would be a persistent row for adding. So you would have the form data in their inputs always editable. This seems less clean, but still simple.
- Any other ones you can think of that you've seen a convention for?
Anyway, my puzzler feels broken, so I appreciate any advice you're able to give. Thank you ahead of time!