There was a business need for the ability to allow for the allocation of budgets in programs in our employee engagement product; in other words, allow an administrator to create a budget, assign said budget to a person or multiple people, and allow the person/people to allocate amounts down to other people within a hierarchy tree.

As a team, we literally ran through this entire process at least ten times over the course of several weeks, making sure we were getting it right. We started off with quite a bit of ideation based off of existing functionality on legacy systems - the business need was pretty straightforward on this feature; it was getting to the right solution that was the challenge.

One of the problems we encountered was how to display allocated, un-allocated, used (spent) and available budget to the users in a meaningful way. We focused on this specific area for quite some time. working closely with our client operations team members on layouts and terminology that resonated with them. After all, they would be the ones using this tool!

We then brought that piece into the bigger picture of the allocation structure.

Expanding even further, we iterated on how allocated budgets would fit into the already existing budget creation feature within the platform.

Then came the process of making sure the allocation hierarchy tree was laid out in an easy-to-use manner - no small task. This took several rounds of iteration, again, working closely with the client operations team.

Once in a good spot with sketches, I took the fidelity up a notch to wireframes created in Axure. These were interactive wireframes that I was able to use in usability testing with our client operations team, but also supported the Jira stories picked up by development. Check out the actual wireframes.

Refining the layout through some visual design.

The finished product, working flawlessly in our production environment.