Overview
TSYSAP serves some of the largest banks in the world including Truist and Citizens. As a B2B payment solution, banking clients can use virtual payment methods including virtual credit cards to streamline payroll services with vendors.
UX Methods
Competitive Analysis • User Stories • User Surveys • User Interviews • User Research Analysis • Affinity Mapping • User Personas • User Journey Maps • User Flows • Content Auditing • Sitemap • Card Sorting • Wireframes • Prototypes • Usability Testing
Tools
Figma. Usability Hub.
Project
TSYS AP’s original software was developed in the 1990s and the UI revamping starting in 2022. As the Lead (and sole) designer, I was tasked to upgrade the UI and finish creating necessary experiences before development. Development for our first stage is in the process of completion for our first roll out to clients. Included in new experiences, I brought up my concerns about the confusing navigation and how the site map had an unclear direction. So I created a new tab experience on the top of most pages, and breadcrumbs to help users navigate where they were on the site.
Along with Navigation upgrades, I also wanted to focus on a User Centered Approach at the forefront of my development, and I worked on creating a site that could be used on multiple platforms and that has a more accessible UI system. Our original site could only be used on desktop due to the large amounts of hovering with tooltips and the use of icons without text. I wanted to create more accessibility for use on tablet and mobile using more of a text list design, and a UI that was easier to access for keyboard only users.
TSYS AP allows users to:
• Pay invoices using Virtual Cards, ACH, Checks, and Wire Transfers
• Manage thousands of cards, payments, users, and vendors
• Upload Payment documents
• Schedule and download customized recurring financial Reports
Safely give vendors a Single Sign On process to view Account Details
Access to informational Resources
Spend Controls for physical credit cards
Process Overview
Usage Architecture
UserS
Personas
Site Architecture
TSYS AP is a very large project with multiple user personas and levels of user permissions. Different processes or parts of the site are only accessible by certain personas. This map is a high level overview of how the site is laid out. In a generic middle way that all users can see, and on the left are Spend Controls and on the right are Automatic Payments.
Modernizing the UI
The first task I was given was modernizing and updating the UI from the original website from the 1990s. See below for the legacy designs, and below that the new UI.
organizing
The TSYS AP prototype includes hundreds of screens for a complete site walk through. To tackle the organization for myself and my team to be able to quickly find what we were looking for, I created the Figma layout shown in the video below.
Collecting Data
After making the UI changes, I pushed for UX enhancements, and was able to procure multiple interviews with bank clients.
Through a series of Customer Interviews, I collected their feedback on the new design. Much of it was positive, and most pain points were directed at development bugs, which are currently being worked through. Customers also included feedback desiring future enhancements and experiences.
Through a series of Customer Interviews, I collected their feedback on the new design. Much of it was positive, and most pain points were directed at development bugs, which are currently being worked through. Customers also included feedback desiring future enhancements and experiences.
Affinity Mapping
I organized the above info using Affinity Mapping. Information on desired features were noted. Updates to TSYS AP designs is currently on hold as the Dev Team is working to fix bugs for our launch. Only a few items here have been given the go ahead to start iteration work on, as you can see by the few info dots that have been assigned to certain sticky notes. Multiple notes that had the same feedback, or similar themes, were grouped together with the dark gray rectangles.
Walkthrough
A quick walkthrough of a prototype presentation I made for Citizens Bank. There is no audio.
But you can clearly see the original TSYS AP created in the 90's, and what we are rebranding to today.
But you can clearly see the original TSYS AP created in the 90's, and what we are rebranding to today.
Mobile Ideation
Currently, mobile is on hold as we work to roll out the desktop version. Below are some of the responsive designs I created for a mobile experience on different tablet and phone sizes. Developer notes are included for ease of understanding.
Thank you!