I am but a simple BA, and I am currently working on adding functionality to an existing web application. I am told there is no budget for a UI designer! So I was hoping I can get some feedback on this design here.
On this page, the user will make selections in both dropdowns, and then click Calculate. That will generate the charts based on her selections.
Here's a conceptual mock-up. (I changed content and colors to protect proprietary information).
Now, some charts are dependent on the first drodpown only, some are dependent on the second dropdown only, and some are dependent on both. We would like to visually indicate which charts are which. Our solution was with color coded-badges in each chart that indicate the dropdown selection(s) that contributed to that chart.
In this mock-up, the first chart is dependent on both dropdowns, but the 2nd chart is dependent only on the 2nd dropdown.
Those weird looking shapes above the dropdowns are my attempt to come up with a color-coded design for the dropdown labels that I could draw with my basic Figma skills, and that didn't look like the rectangular button, and didn't look like the badges.
I would really appreciate some input on ways I can improve this! Thanks
