Budget Movement Tool

The Budget Movement tool is an application that allows the user to move budgets between different regions and programs.

The application was already created a few years ago, but not used a lot.  I came into this project to just do a few UI changes according the updated requirements. 

Project: Budget Movement
Role: UI and UX consultation
Tools: Whiteboard, pen and paper, Sketch, Invision and Abstract
Users: Financial Analyst

I reviewed the earlier mockups and notes I had from meetings with the PM about the feedback the users had about the current screen.  Due to busy schedules I wasn’t able to get to talk to the users before designing.

I started with the some whiteboard sketching and then to went to Sketch.

The 1st one was a tweak of the old screen. The 2nd one was a flow I thought would be good.  3rd one was a mixture of the two.

Towards the end of the handoff of the mockup to the PM I asked once again if there was anyway possible to do some testing with the users.

I got lucky!  Some of the users were available.  I teamed up with my UX Researcher and started to come up with some task and questions.

3 Financial  Analyst were interviewed. 1 super user and the other two would use it a lot less.  The users current process of moving budget funds is a long 10 step process with manual calculations using two spreadsheets. The number of touch points is a major pain point. 

As each user went through the screens they understood what each drop down menu represented. We were using their lingo on the labels and the column headers made sense on the table. 

The main difference on each mockup was the layout.  1st screen was a TRANSFER TO side and a TRANSFER FROM side.  The results table was below the fold.  So they didn’t even realize the filtered results were showing until they started to scroll.

2nd screen: The TRANSFER TO section was to the left and the results were to the right. The TRANSFER FROM was on a different tab.  My thinking behind this was, maybe the user didn’t need everything on the screen at once. Maybe they wanted to focus on one thing at a time.  Sort of like how your bank app does it when you are transferring money. The users didn’t really like this flow for this particular job, but mentioned it could work on a different application.

3rd screen: This screen was very similar to the first screen but instead of having the columns across from each other I decided to put them on top of each other.  This would bring the results table up above the fold.

In the end, all the users picked option 3 as the best choice.  They all agreed it was an easier flow.  They also mentioned that having everything on one screen was what they prefer instead of going to different tabs. When they ranked the mockups, the one that I thought would be #1…was actually last.

I assisted my Researcher by taking notes during the call.  I used a method using stickies called Rose, Thorn Bud as they went through the pages.  Rose – listening for the good (pink).  Thorn was listening for the bad (blue).  Bud is listening for the opportunities (green) regarding the app. After the call it was easier for us to quickly see the results of each user. Almost like a heat map.

The Budget Management app was a nice experience for the team. It was looking a little iffy on getting any user feedback in the beginning. But in the end we were able to talk to the user. Got some great feedback.  And the project will be going in the right direction when they are ready to start building it out.  I’m glad I had enough time to crank out a 3rd option of the flow because you just never know what could happen.  Never be so in love with your design you can’t be open to feedback 🙂