Designed By Kayci

The Request

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:

Must remain pop-up (not become a webpage)
Updates need to be small/easy for developers

Tools: Figma, Hotjar, pencil & paper

Platform: Desktop browser

Analysis

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.

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. I also noted that that particular question would be better suited as a checkbox due to its opt-in, opt-out nature.

Manage Purchase Order Pop-up

Here, the heat maps showed that customers frequently clicked on locked-down fields (such as the one for PO Name and number) in addition to the editable fields. This led me to consider changing the locked-down fields so they do not look like input fields to reduce confusion about whether there might be a time when they can edit those fields here.

New Feature Logic Between Pop-Ups

Logic flow of expected results for all elements impacting the ability to allow overspending

Manage Purchase Order Updates

Only editable fields are displayed as input fields
Current purchase order amount made more prominent
Error messaging added for Allow Overspending edge cases
Close button changed to secondary button styling

Future State: Billing Address Updates

gif of future updates to billing address

Reasoning

Although the billing address side of the pop-up had usability issues with the "Change" button not being clear as to its intent to take the user to add a new address along with the issue that if a customer selected that button, then they could not get back to the radio button selections of billing address, fixing this section was delayed to a future iteration. This was primarily driven by factors such as the development effort needed for the new change and the customer data showing that the billing address is interacted with considerably less than the other inputs within the pop-up.

Adding Allow Overspending Feature