Role:
Lead UX Designer
Overview:
I led a comprehensive revamp of how Commerce Bank’s commercial banking sector approached customer file uploads, redesigning a complicated process into being more user-friendly.
Commerce Connections, the business banking division at Commerce Bank, had a service where customers could upload files for various payment services. The system parsed each row, transforming them into transactions. Here's an example of a transaction file:
This feature was immensely beneficial for businesses, eliminating the need for manual entry of transactions one by one. However, the setup process posed a significant challenge. Users found it excessively complex, leading to a high rate of abandonment. Many customers ended up contacting customer support, where representatives would spend hours trying to configure the file setup instead. Resolving these issues became one of the most intricate projects I undertook during my tenure at Commerce Bank.
Original File Mapping
The UX Team conducted user interviews and shadowed users. We saw that users manually counted each item in a row for CSV files, double- or triple-checking their work before submitting. Uncertainty persisted even after completion, with users uploading test files multiple times to confirm their mapping matched their calculations.
Another challenge lay in that all businesses formatted their files completely differently, so the design needed to be incredibly flexible.
Moreover, it needed to address potential file issues, enabling businesses to decide how to handle them. For instance, if an amount was negative, a business might process or remove that transaction. Another example is some businesses would have notes in their file for specific transactions so the system wouldn’t process it.
Because every business had their own unique rules, the design had to provide businesses to create those custom rules.
I struggled to find existing user patterns for file mapping since it's not a common task. I was inspired after shadowing users - I noticed most users kept their files on the screen as a visual guide, so I knew the design had to somehow feature the file. Another core aspect was providing an area for businesses to define their own specific rules.
Because the core file mapping interaction was so crucial to the project, we decided to brainstorm and test some concepts first.
Concept #1:
Concept #1: This design featured dropdowns above each column, allowing users to make decisions about the relevant columns. The user would primarily focus on the file in the lower portion.
Concept #2:
Concept #2: This design prioritized the top half as the main workspace for users, offering a step-by-step process to guide them seamlessly. The file below served as a reference.
The first round of user testing proved to be immensely helpful in determining the direction the design needed to go. We found that Concept #1 was not very user-friendly - the many dropdowns overwhelmed users who thought they had to make a decision on every column. However, users really liked that the file would highlight selected columns.
Users liked the step-by-step process in Concept #2 much more, as it focused the users’ attention in one area and guided them along the process. We also discovered that many users didn’t really use the whole file, only needing to see a few rows to determine the correct columns.
I knew that we were headed in the right direction as much of the feedback was overwhelmingly positive. In particular, power users who had struggled with the old screens for years were excited about the new designs.
I concentrated on enhancing Concept #2, while integrating certain elements from Concept #1 and the complex business requirements.
Throughout this process, I coordinated with the developers to understand what was possible. I recognized that this was an entirely new and complex design, so I engaged with the developers in extensive back-and-forth discussions to explore the possibilities and constraints.
Here are some examples of how I designed solutions for the complex business requirements.
User testing of Concept #2 indicated the progress card was too complicated, so I focused on simplifying it.
Original progress card design
Updated progress card design
Following user testing, users highly valued seeing the column headings be highlighted with their selections. I further enhanced that concept so now the entire column or row would be highlighted.
In the second round of testing, nearly all users successfully completed the assigned tasks, effectively mapping each field to the correct columns. The second iteration received highly positive feedback from users, showcasing a substantial improvement over the initial round of testing. The consistent presence of the file view throughout the entire mapping process received positive feedback, with users expressing appreciation for the design's feature that highlighted specific columns.
While some users found the process somewhat complex, the overall feedback noted it was a significant improvement from the original process. Power users who used the old file mapping process found the new design significantly more user-friendly. They expressed enthusiasm about its launch, recognizing its potential to streamline and alleviate their workload.
This project stands out as one of my most challenging undertakings. Designing a process with no existing user mental model required a ground-up approach. It was a formidable challenge to design a solution with no existing user mental models, juggle multiple complex business requirements, and work with developers to ensure a feasible design.
The project emphasized the significance of iterative design and user testing. The user feedback from testing proved instrumental in shaping the final decision, and helped me combine the best parts from the initial wireframes.
Upon its production, user responses were overwhelmingly positive. The design's success led to its adoption across various file mapping projects within Commerce Bank's Connections Team, serving as a distinctive feature and a selling point for businesses seeking a more streamlined approach to managing large payment files.
Original Design
Redesign
