I need an inspirational UI, for a very particular set of requirements, and you ghave complete freedom in crafting a visually appealing & aesthetically pleasing, with easy to use, and ingenious UI and UX for that. Since I badly need inspiration and design ideas, which just nail the requirement at its best.
So, We have several Projects in our ERP. Each project contains some Departments and some Cost Centers. For a single project, The departments can range from 2 to 20, and Cost Centers can range from 10 to 100+, since they are too many in the system, and are constantly increasing. Now, the Departments and Cost Centers exist independently in the system, and they are just referred in the project, I hope you get the idea. Interestingly, the Project also doesn't define any relationship b/w the Departments and Cost Centers, they are just listed in the project.
Now, the Module / Feature we are developing now, is Budget Allocation Template for Projects, and then later the Budget Allocation itself, which can optionally use the Template. The template works on Percentages, and the user can define what percentage of the total budget for the project, should be allocated to each Department and Cost Center. I will define the heirarchy of the template's percentage distribution scheme below:
So, here is how the template works (has to be logically designed):
- The user selects a Project (which has 100% of the total budget).
- Based on the selected Project, the Departments and Cost Centers are fetched from the server.
- Then we have to allow the user to define what percentage of the total budget should go to each Department.
- Then, for each Department, we add the Cost Center to in that department, and then we have to allow the user to define what percentage of that Department's budget should go to each Cost Center. Across the departments, the Cost Centers can not be repeated, but within a department, all the Cost Centers of that project should be listed.
- The user should be able to see the total percentage allocated at each level (Project -> Departments -> Cost Centers), and the system should ensure that the total percentage at each level does not exceed 100%.
- Then, under each cost center, we connect the actual Accounts from the Chart of Accounts, which will be used while allocating the budget. The user should be able to select multiple accounts for each Cost Center. Though this requirement of selecting multiple accounts is not explicitly stated in the BRD. We will have a meeting on this one, but for now, let's assume we need to support multiple accounts per Cost Center, since the UI should be future proof.
So this is what we have to design the UI for. The UI should be intuitive, easy to use, and visually appealing. The user should be able to easily understand the hierarchy and the percentage allocation at each level. The UI should also provide validation to ensure that the total percentage at each level does not exceed 100%. We also have to ensure that the system performs well, even with a large number of Departments and Cost Centers, and adjust itself with the changing percentages dynamically.