CASE STUDY
Payment Processing
PROJECT BRIEF
Improve the accounts payable check printing process to provide users the ability to save their progress when reconciling a payment to a vendor against the vendor’s bill.
USER NEEDS
Reconcile invoices before selecting which ones to pay
Queue checks to be paid at a later time
Pay individual vendor checks
PAIN POINTS
The user must decide which invoices to display without knowing if they are paid/unpaid.
Once the user has begun the process, it must be completed. There is no way to save progress.
The only way to view the total per vendor is to preview the print queue.
PHASE 1: Discovery
The design team conducted research and decided to switch from their current design tool, Adobe XD to Figma. The cloud-based framework, collaborative capabilities, extensive plugin library and seamless workflow meant that the design system could more closely align with how the components are developed within the company’s proprietary software.
The team assessed the current design system and prototypes to devise a strategy for building the new design system in Figma. We began by creating a file structure that included style foundations, components grouped by use and variables.
PHASE 2: Wireframes
Because we had an iteration of the design system in XD, color, typography and spacing guidelines were already established. The major change to the foundations was adding variables. Not only do variables offer reusable values that save designers time and effort, but they coordinate with the components’ production code setup. Variables also allow designers to quickly switch between color modes. In the previous design system, a second prototype would be required to show a different color mode.
PHASE 3: Prototype
We adopted the concept of atomic design methodology which establishes a hierarchy of assets starting with the most basic component like a button and builds to a complete structure like a web page. So that we could start building prototypes before the project was complete, we began constructing the components that were used most frequently.
We set up the Figma components to mimic their coded counterparts, allowing prototypes to be passed to developers with little translation. This required examining the source code to determine the size, spacing, and color variables used, and whether other components were nested. We found that this review uncovered occasional discrepancies in the code that developers later fixed.