Adding Allow Overspending Feature
Interactive Logic | UI Design | Heatmaps
A Project Manager added me to their project, asking that I help them implement a solution that would give their eCommerce customers the ability to allow overspending on their Purchase Orders easily and intuitively. In our initial discussion of the ask, we knew we would be making changes to the "Add New Purchase Order" pop-up and the checkout page, but further analysis of the application also led us to realize that a change on the "Manage Purchase Order" pop-up would also be needed. Additionally, the project manager wanted to improve the UI of any areas we touched so long as the changes were low effort for the developers.
Primary Goal: Add ability for user to allow overspending on their Purchase Order and make pop-ups easier to use
Constraints:
Tools: Figma, Hotjar, pencil & paper
Platform: Desktop browser
Before beginning any design work, I pulled up Hotjar heatmaps for both pop-ups. From this, I was able to find a few helpful insights. On the "Add New Purchase Order" pop-up it was clear that there wasn't nearly as much interaction on the right side of the pop-up as on the left (for both move and click data). This led me to believe that the address field didn't often need to be changed away from the default primary address, but it was inconclusive on whether customers were overlooking the one radio button question on that side or if they didn't need to change it from its default "no" very often. Finally, on the "Manage Purchase Order" pop-up it was very clear that customers were frequently clicking on locked-down fields (such as the one for PO Name and number) in addition to the editable fields. In short, these insights led me to suggest design and layout changes based on the data gathered. Additionally, from speaking with the requesters, I was able to lay out the expected functionality of the pop-ups based on the decisions of the customer, since we knew we only wanted to show the field to allow overspending when it was applicable.
