Abacus is the only real-time expense management software in the market. Everyone else does monthly expense reports. What this means is that we have incredibly timely and granular quality control over every single expense submitted, unlike other expense solutions whose control stops at the report level.
When I began working at Abacus, there were already many problems with this supposed-to-be incredibly powerful feature page. They could be grouped under 2 categories:
This was my first time (re)designing an entire web app page jam-packed with functionalities and micro-interactions. In hindsight, I did try to tackle too much in too much detail during the first round. Because there was so much co-relation between how a rule is created and how it manifests itself on a page, I stumbled a bit to find a good starting point. Finally, I settled on redesigning the page itself first.
At a first glance, you will immediately notice that it now has a one-column layout. Rules are now grouped under one sections but are clearly labeled and color-coded to signify their severity degree/type–Block, Warn, Mile(age), and Auto. I also create a “highlighting logic” for each type of rule based on their differentiators to make it easier for one to scan through the page. For example, for requirement rules, we bold the requirement (note, receipt, etc.) and for auto-approval rule, we bold the merchant.
I also create a highlighting logic for each type of rule based on their differentiators.
I also used our internal dashboard, Abadash, to look up and study the rules of 10 differents companies with 20+ rules. By doing close rule sentence analysis, I started drawing patterns about one common rule formula.
I came to understand that part of the reason why it was difficult to use the old rule creation was because it was so dense with unstructured content. In addition, users aren't able to preview the rule they're trying to construct. I decided to separate the rule creation flow into 3 parts:
Check out a detailed explanation of the first 2 steps in the proposed new information architecture below:
After my proposal for a new modal's architecture was approved, I started working on the new rule modal's UI. There were serveral UI concepts. I was working with both horizontal and verticle modal wizards. After a couple of reviews, we decided to go with the concept below.
I creative some quick InVision prototypes to test out the new rule creation flow. Working with 2 members of the customer success team, we hopped on a couple of calls with our customers and did a cognitive walkthrough with each of them. We also gave them $50 Amazon giftcards!
Among what we found:
This project was launched mid-April, 2019.