Stanley Flomin

SpendIQ was a product that was created to be a one stop shop for several related company departments to help their clients optimize their businesses. The greatest challenge was getting everyone on the same page in terms of what this product should do and should not do. Every department had their own needs, wants and wishes - many of which overlapped. Initially I spent a good chunk of time meeting with end users, business and stakeholder teams to get an understanding of the core goals they were trying to accomplish and from there we identified the requirements. From the requirements we created use cases, task flows before we moved on to wireframing.

Once we had agreement across all the teams on what our MVP should be we began to wireframe. Wireframing went relatively quickly and buy in from stakeholders was smooth. The existing processes that each department were using at the time heavily relied on heavily functional excel worksheets. This screen was an example of the type of functionality an excel sheet had which we had to directly integrate into our SpendIQ product. All the while keeping in mind the requirements from all other departments.

This was a screen of the hifi version based on the wireframe shown earlier. We had to add key elements to this page that would satisfy requirements from other departments. One of the most difficult aspects here was balancing a great deal of features that were relevant to one department but not another. It was important for me to ensure that ultimately this wasn't just a page with all the features but where it was clear that it had a user centered design approach.

Another example of an early wireframe that utilized parts of existing excel worksheets. I ran a card sorting session to understand the taxonomy of all the systems. Though the navigation changed quite frequently due to its complexity, ultimately we were able to pin down a logical sequence of pages that the user may go through. Different departments would only use specific portions of this product so it was important to keep that grouping of systems in mind while ensuring that on a whole the flow still made sense.

This is a screen of the final developed page based on the wires & hifi design. I provided developers with spec sheets that made it easy and intuitive for them to follow the final designs. All the font styling, colors, spacings, icons and form elements contained everything that the developer would need. I worked closely with them to ensure that these pages were responsive for the targeted screen resolutions.

This was a functional fully developed screen for our MVP. In later sprints we gradually identified the next logical modules to add to the product. It was important to have a scalable framework and we ideated several different types of navigational options before settling on this one.

We were running this product on 2 sprints and did usability testing on each release to ensure end user expectations and pain points were being taken care of.

I researched several different types of charting frameworks available. Ultimately we settled with using D3 since it was the most flexible and since it was open source it saved on costs despite the lack of support availability. The over look and feel strictly followed the companies design system. It was important to me that because we were cramming so much data into nearly every screen that there was enough breathing space. Typography was key and went through several iterations until our user testing groups reported that they were able to clearly discern which elements on the page were the ones they needed to see immediately vs. the lesser tiers of data of import.