Bond Payment System
Our customers needed an improved system for distributing the costs of their business bonds across cases. The incumbent workflow was functional but created unnecessary work for users and could be intimidating to complete.
Bond Payment System
Our customers needed an improved system for distributing the costs of their business bonds across cases. The incumbent workflow was functional but created unnecessary work for users and could be intimidating to complete.
Bond Payment System
Our customers needed an improved system for distributing the costs of their business bonds across cases. The incumbent workflow was functional but created unnecessary work for users and could be intimidating to complete.



Project
Angular web application
2021-2022
My Role
UX design
Wireframes
Prototypes
Tools
Figma
Project
Angular web application
2021-2022
My Role
UX design
Wireframes
Prototypes
Tools
Figma
Project
Angular web application
2021-2022
My Role
UX design
Wireframes
Prototypes
Tools
Figma
Problems
To understand the problems users faced we interviewed clients in a focus group, met with business stakeholders and held one-on-ones with production support staff.
In our research, we learned fiduciary office assistants were often tasked with creating various bond options to present to their managers. The options were for different scenarios involving how to distribute the cost of a surety bond across their managed estates. The incumbent design required multiple steps to clean up and was taxing to users.
The second pain point was felt when users finalized a bond. Only one poorly labeled button stood between users and a complex operation that created bank transactions and prepared paper checks. The support team told us users would often call when finalizing a bond for “hand-holding.” Users were weary because execution was very difficult to unwind if a mistake had been made.
Problems
To understand the problems users faced we interviewed clients in a focus group, met with business stakeholders and held one-on-ones with production support staff.
In our research, we learned fiduciary office assistants were often tasked with creating various bond options to present to their managers. The options were for different scenarios involving how to distribute the cost of a surety bond across their managed estates. The incumbent design required multiple steps to clean up and was taxing to users.
The second pain point was felt when users finalized a bond. Only one poorly labeled button stood between users and a complex operation that created bank transactions and prepared paper checks. The support team told us users would often call when finalizing a bond for “hand-holding.” Users were weary because execution was very difficult to unwind if a mistake had been made.
Problems
To understand the problems users faced we interviewed clients in a focus group, met with business stakeholders and held one-on-ones with production support staff.
In our research, we learned fiduciary office assistants were often tasked with creating various bond options to present to their managers. The options were for different scenarios involving how to distribute the cost of a surety bond across their managed estates. The incumbent design required multiple steps to clean up and was taxing to users.
The second pain point was felt when users finalized a bond. Only one poorly labeled button stood between users and a complex operation that created bank transactions and prepared paper checks. The support team told us users would often call when finalizing a bond for “hand-holding.” Users were weary because execution was very difficult to unwind if a mistake had been made.
Cluttered screen
Users had to filter to separate drafts from permanent records presented on the same screen.
Clumsy cleanup
Draft clean-up was a select, delete, repeat operation.
Clumsy cleanup
Draft clean up was a select, delete, repeat operation.
Clumsy cleanup
Draft clean up was a select, delete, repeat operation.
Cautious users
Finalizing a bond made users uneasy and hesitant to perform themselves.
Cautious users
Finalizing a bond made users uneasy and hesitant to perform themselves.
Cautious users
Finalizing a bond made users uneasy and hesitant to perform themselves.
Opportunity
We had the opportunity to provide our customers with two improvements to this high-stakes but infrequent workflow. If we succeeded we would also reduce support calls for this issue and lower operational costs.
Goals
Clear view
Pre-filtered views would give users quick access to separated lists of finalized bonds and drafts.
Clean sweep
A single action could sweep all drafts to the trash.
Confidence of clarity
A clear bond summary would put users at ease before finalizing.
Solution
We separated draft and posted bond records, placing each in its own view to eliminate unnecessary filtering. With drafts separated from posted bonds, we added a feature to delete all unused scenarios in one step.
To build user confidence when posting bonds we designed a new confirmation modal dialog that summarized what would take place in the finalization step. Additionally, we specified a placebo delay into the button that finalized the bond. This gave users up to three seconds to cancel their command before the system actually began processing the job.
Solution
We separated draft and posted bond records, placing each in its own view to eliminate unnecessary filtering. With drafts separated from posted bonds, we added a feature to delete all unused scenarios in one step.
To build user confidence when posting bonds we designed a new confirmation modal dialog that summarized what would take place in the finalization step. Additionally, we specified a placebo delay into the button that finalized the bond. This gave users up to three seconds to cancel their command before the system actually began processing the job.
Solution
We separated draft and posted bond records, placing each in its own view to eliminate unnecessary filtering. With drafts separated from posted bonds, we added a feature to delete all unused scenarios in one step.
To build user confidence when posting bonds we designed a new confirmation modal dialog that summarized what would take place in the finalization step. Additionally, we specified a placebo delay into the button that finalized the bond. This gave users up to three seconds to cancel their command before the system actually began processing the job.



Design Process
While our UX team was given basic requirements to rebuild the feature using our new framework, we took the opportunity to make a significant update to the workflow. Potential improvements arose from our discovery process and were workshopped within the UX team. We then shopped high-level ideas to our product owners and relationship managers for feedback.
We took the results to a whiteboard session and mapped out how to implement improvements along with the base functionality in the new UI framework. We identified patterns used to solve feature issues in other parts of the application that fit naturally with the design of this project.
Design Process
While our UX team was given basic requirements to rebuild the feature using our new framework, we took the opportunity to make a significant update to the workflow. Potential improvements arose from our discovery process and were workshopped within the UX team. We then shopped high-level ideas to our product owners and relationship managers for feedback.
We took the results to a whiteboard session and mapped out how to implement improvements along with the base functionality in the new UI framework. We identified patterns used to solve feature issues in other parts of the application that fit naturally with the design of this project.
Design Process
While our UX team was given basic requirements to rebuild the feature using our new framework, we took the opportunity to make a significant update to the workflow. Potential improvements arose from our discovery process and were workshopped within the UX team. We then shopped high-level ideas to our product owners and relationship managers for feedback.
We took the results to a whiteboard session and mapped out how to implement improvements along with the base functionality in the new UI framework. We identified patterns used to solve feature issues in other parts of the application that fit naturally with the design of this project.
Results
Our final design shipped as part of a major update to several workflows. After the release we polled the support and relationship management team who reported positive feedback from users.
Previous
App Header