Finance Portal
Clients of a mail sorting service provider were using a complex and outdated interface to view financial documents. As the lead UX designer, I led the end to end design of a modernized finance portal from research to prototyping to launch.
​​
My work increased efficiency for access to financial documents by 50%. Within the first four months of launch, 34% of users self-reported high satisfaction for the product.
Role and Organization
Lead UX Designer at Pitney Bowes
​
Timeline
May 2021 - January 2022
Team
Product management, engineering
​
Tools
Figma, Mural
​
Background
I broke ground for designers in the mail sorting business unit at Pitney Bowes. They had limited experience with UX on product teams, and this was an opportunity to demonstrate the value of my role. After Finance Portal launched, a UX design role was added to three more product teams in the business unit.
​
Key Contributions
-
Strategized design process
-
Wireframing and prototyping
-
Tested with clients
-
Collaborated with product management and engineering
-
Presented designs to executives
Design Process
Interview Insights
Review insights generated previously from client interviews
​
Heuristic Analysis
Assess the current billing portal and what could be improved
Affinity Diagram
Cluster roses, thorns, and buds from client feedback to identify key areas for impact
Competitive Analysis
Learn what other products have done to solve similar problems
​
Sketch and Mockup
Explore diverse ideas that could solve the problem
​
Critique
Get feedback from designers, product management, and engineering
Interactive Prototype
Build out the best solution in Figma
​
Test
Assess the usability of the prototype with users
​
Handoff and Launch
Deliver the finalized prototype to engineering and oversee launch
Discover
The legacy version of Finance Portal was used by mail sorting clients for 10 years without major updates to the application. The main persona was in the finance department of a small to medium sized business who used Pitney Bowes services to sort their mail into ZIP codes before delivery.
​
The team had a UX research contractor that conducted client interviews and generated insights before I joined the team. I used the output of their work as a starting point.
Homepage of the legacy Finance Portal
Interview Insights
Interviews were conducted with 8 clients to understand how they use the legacy Finance Portal and what features they would value in a modernized version. The following are four key insights generated from the interview data:
The Finance Portal is where action originates but cannot be resolved. Clients can view their account balance and invoices, but cannot deposit funds or pay their bill.
Data accuracy is essential to the experience. Accurate, real-time data fosters trust and accountability.
Clients value proactivity. They want to solve problems before they show up on bills.
The UX of the legacy Finance Portal is not exceptional, but the mail sorting service and support experience is exceptional. So, clients are more forgiving when using the outdated portal.
Heuristic Analysis
I evaluated the legacy portal by looking at each page and identifying its roses (positives), thorns (negatives), and buds (has potential).
Homepage
1
3
6
2
4
5
Roses​
1. All menu items are displayed, easy to navigate
2. Viz is updated daily with the previous day's data
Thorns​
3. Portal is slow and not using the design system
4. No useful info related to finance on the homepage
5. Most data in the table is static save for 2 columns
Buds
6. Tie volume more explicitly with financial data
Daily Deposit Account Balances
1
4
2
3
5
6
Thorns​
1. Date range is the wrong input for viewing current account balance
2. The user is allowed to select conflicting date values
3. No distinction between pending and posted transactions
Buds
4. Always display the current account balance
5. Choose a smart default date range to display recent data immediately
6. Prevent errors before the user submits
Invoices
1
2
6
3
4
5
7
Roses​
1. Constraints get exact results, good for power users
Thorns​
2. Too many inputs to get the same document weekly
3. Dropdown options are technical (numeric dates and acronyms) and it's easy to pick the wrong one
4. Requires the user to know exactly what they're looking for - browsing is not possible
5. Only one document can be accessed at a time, requiring high effort to fix mistakes
Buds
6. Make the most recent invoices viewable by default
7. Support browsing behaviors
Define
The client interview sessions included an opportunity for users to share roses, thorns, and buds (RTB) regarding their experience using the legacy portal. The data collected was from a mix of new users, casual users, daily power users, and infrequent users. This phase focused on comparing the RTB from clients and the RTB from my heuristic analysis to identify key areas for impact.
Grouping the roses, thorns, and buds from client feedback on the portal.
Affinity Diagramming
The client feedback in the form of roses, thorns, and buds on the Finance Portal were sorted into like groups.
Example Roses​
I use it routinely. Invoices post once a week, so I log on then
I know who to contact if there is a problem with my finances
The site has all the basic information I need to manage finances
Example Thorns​
Finance Portal is down frequently. Old-style UX
Too many steps to access current account balance
I can't pay my invoices on the portal
Example Buds
Reduce the number of steps it takes to get to my data
Deliver invoices and volume information more quickly
Use real time data so I can see the status of my transactions.
Key Impact Areas
Comparing the client feedback and my heuristic analysis of the portal resulted in key impact areas that will kick off the design phase.
General Improvements
-
Implement the design system. It will:
-
Improve performance
-
Offer self-service account management
-
Modernize the visual design
-
Deposit Accounts
-
Always show the current account balance
-
Distinguish pending versus posted transactions
-
Display recent transactions by default
-
Allow users to add money to their accounts on the portal*
Invoices
-
Display most recent invoices by default for quick access
-
Show payment status for each invoice
-
Give more robust sorting and filtering capabilities
-
Make visible transactions that will turn into upcoming invoices
-
Allow users to pay on the portal*
* = After reviewing this list with product management, we determined that payment on the portal is out of scope. Payments are a key component of the client experience, however, multiple systems outside of this project need to be in alignment before payment on the portal is possible.
Design
With key areas for impact identified, I was ready to begin designing an updated version of the Finance Portal. This process began with a competitive analysis of internal and external applications to understand how similar problems have been solved, then with wireframing potential solutions, and finally with feedback from other designers, product management, and engineering to narrow down the right solution.
Sketches of the Finance Portal.
Competitive Analysis
Before designing, I wanted to build a mental model of how other products solved similar problems. I began by looking at internal products and noting the similar features and interactions (I am unable to show those products here). Then I looked at a banking application and a competitor's financial application for inspiration.
Banking Application
1
2
3
4
5
6
What I Noticed
-
The account balances are the largest text and near the top for easy scanability. ​
-
The accounts have both a truncated numeric identifier and a more human-centered name (like "Total Checking") for recognition.
-
Deposits and Withdrawals are main account activities. However, they don't usually occur within the online portal (users may go to banks in person). It's interesting to see how they've highlighted this information without making it a call to action.
-
"Transfer money," a method of withdrawing, is the call to action for both accounts. Likely the most frequent action taken by users.
-
The "Recent Activity" section shows the last 5 transactions but for one account at a time. What is their criteria for the default account displayed? What would it look like if each account had a Recent Activity section under it?
-
Pending Transactions are denoted by color and "(Pending)" next to the date
Competitor Application
1
2
3
4
5
What I Noticed
-
Users are given a lot of control over the content with filters, however, a faceted navigation might work better here because it has several dimensions.​
-
The invoice table appears to display the last 3 invoices by default. It's pretty low on the page as the main content.
-
The invoice table acts as an overview. Viewing a specific invoice or paying appears to take the user away from this page and into its own workflow.
-
The table is easy to scan and employs red text for data that needs more immediate attention.
-
Pay Now is not associated to a specific invoice. I wonder if that separate workflow will ask the user to choose invoice(s), or if it will show the aggregate value of all open and past due invoices.
-
Since there's no value associated with this action button, it's like, "pay what now?"​
-
Sketch, Mockup, and Critique
With the key impact areas and competitive analysis completed, I was ready to put ideas to paper. I began by sketching and then translating those sketches into mockups in Figma. Then I held critique sessions with other designers in the organization and project stakeholders (subject matter experts, product management, and engineering) to ensure alignment and get feedback.
Home Sketches
Home Mockup
For the Home design, I aimed to:
-
Use the design system for a modern look and feel and general performance improvements
-
Provide an overview of the financial data relating to the account
-
Snapshot the most important data to the user, like recent transactions and invoices they are likely to access
-
Arrange the data in vertical columns for postage deposit accounts, invoices, and analytics
-
Allow users to monitor their recent activity (including status) without having to go to the page
-
Give a jumping off point for specific data with the “view alls” and links
-
Give the user a call to action for each section to promote proactivity
Home Feedback
UX Designers
-
The single column layout doesn’t come across successfully. If more features are added, it’s limiting (can’t add infinite columns)
-
Placement of “View all” links is inconsistent and hard to notice
-
What would “Invoices” look like when everything is paid/there are no open invoices?
Subject Matter Experts
-
A user could have dozens of deposit accounts, so this page would get really long and hard to scan
-
Invoices have another dimension: there is one invoice per “job” of mail sorted
-
Volume data is not updated consistently like the graph portrays
Product Manager
-
A huge pain point for the business is account deficits and past due invoices. Can those be more actionable?
-
Adding money to accounts and making payments is not in scope. Consider adding static instructions
-
A user could be managing multiple subsidiary accounts and this data applies to them all
Engineering
-
The graph will not be possible because the data is not readily available
-
What does this page look like when it has no data, like for new clients?
-
What is the definition for “Recent Transactions” and “Open Invoices”?
Postage Deposit Accounts Sketches
Postage Deposit Accounts Mockup
For the Postage Deposit Account design, I aimed to:
-
Support viewing and comparing the balance of multiple accounts on a single page
-
Default to sorting the balance in ascending order so that balances that need attention (like negative balances) are displayed first
-
Allow the user to see recent activity for each account in expanded rows
-
Detail the full transaction history on a separate page by clicking the Deposit Account number
-
Give the ability to add money to accounts
Postage Deposit Accounts Feedback
UX Designers
-
Reconsider the default sort of balance in ascending order. A low balance account could be infrequently used
-
One button for add money where the user then selects the deposit account might be better than having the same action on every line
Subject Matter Experts
-
The process for adding money is offline, so the link does not work here. Maybe it could link to instructions about how to complete that offline process
-
Accounts can be active or inactive, and the users would want to see them
Product Manager
-
Try highlighting negative account balances in red
-
Recent Transactions in the expanded row is not as useful - if the user is interested in seeing this data they might as well click on the deposit account number to see all details
Engineering
-
The “Add money” functionality will not be possible
Invoices Sketches
Invoices Mockup
For the Invoices design, I aimed to:
-
Make the most recent invoice visible by default so the user can see charges and make payments
-
Allows the user to change the invoice opened on the right by clicking “View”
-
Group invoices by their status (open, past due, or paid) and dynamically re-group based on the current status
Invoices Feedback
UX Designers
-
Grouping by status is helpful, but less helpful than one list with more powerful filters would be
-
The “View” link doesn’t feel connected to the action of viewing it on the right. Try marking the current invoice opened on the list
Subject Matter Experts
-
Add a paid date column
-
Users would want to download both the invoice PDF and the raw data file for their records. They like to compare them with internal records
-
One invoice is created per job of mail sorted, so add a column for job
Product Manager
-
Add filters like date range and search
-
“Your Last Invoice” does not make sense when multiple invoices are generated at the same time for each job. It should show all that were posted this week
-
Add a column for subsidiary account
Engineering
-
Rethink the “Pay” buttons and how they can work within constraints; some users pay on an external site and some pay by mail
-
The total amount due value displayed on the homepage is missing here
Deliver
With feedback from the product stakeholders, I converged on a design, tested it with clients, and delivered it to engineering for development.
​
Interactive Prototype for User Testing with Clients
I created an interactive prototype of the Finance Portal in Figma to prepare for testing with clients. The prototype included revisions of the design based on stakeholder feedback.
Homepage Revisions
-
Used single widgets for scanability and scale
-
When more features are launched, they'll be individual widgets
-
Widgets stack for smaller screen sizes and mobile
-
-
Met the business need of reducing account deficits by showing postage deposit accounts in ascending order and displaying past due invoices
-
Made “View All” links consistent and supported multiple points of entry for the user’s workflow
Postage Deposit Accounts Revisions
-
Kept transactions history for the detail page
-
Multiple transactions occur simultaneously when money is applied to multiple invoices, and it's easier to see on the detail page
-
-
Added account status and a filter that defaults to showing active accounts
-
Added a button to an external page for payment instructions
-
On the detail page, added columns for job, account, and status for each transaction
Invoice Revisions
-
Divided the page into tabs and added a tab for Pending Transactions: activity that will become an invoice the following week
-
This is a new feature that gives more visibility to data before it is formalized into invoices
-
-
Removed the viewing area for an invoice to accomodate more columns on the table: job, account, and status
-
The invoice number link will open a PDF in a new tab
-
The status column is color coded to aid scanability: green for paid, orange for unpaid, and red for past due
-
-
Added filters to support robust interactivity with the table
User Testing Findings
I conducted testing with 5 users: the financial personas of our clients ranging from small businesses to large corporations. The findings from testing are outlined below.
Home
Users love seeing their account balances and invoices without having to input parameters like date range.
Suggested actions
-
Continue to display important data upfront and eliminate barriers to entry
Postage Deposit Accounts
Add more functionality so it can be more valuable to users.
Suggested actions
-
Let users refill their accounts online
-
Let users set up auto pay for accounts to pay recurring invoices for specific jobs
The homepage is ineffective for users that have accounts in good standing.
Suggested actions
-
Create a section for accounts with negative balances
-
Create two sections for open invoices and past due invoices
-
Bring delight with an illustration that displays when the user has paid all their invoices
Users expect the data to be updated in real-time.
Suggested actions
-
Ensure the data is real-time, or include a “last updated” timestamp to manage expectations
-
Add an available balance versus pending balance value
Pending Transactions
The table is difficult to read.
Suggested actions
-
Make it more explicit that the postage is the rate times the quantity. Move the postage column next to those columns
-
Add a total column for each line, so that the user can see the total for postage plus additional fees
Invoices
Users don’t notice that filtering data is subordinate to the date range.
Suggested actions
-
Add a message: “showing results for <date range>”
-
Show that x amount of invoices outside of the date range match the criteria, and allow the user to expand their search
More visibility to data is highly valued.
Suggested actions
-
Ensure that the data displayed aligns with user expectations - more visibility also means more accountability that the numbers are correct
For users that pay offline, the invoice is considered “paid” to them. The status doesn’t show as paid until it's processed.
Suggested actions
-
Allow users to mark an invoice as paid on their end, and add an extra signifier when it’s considered paid by Pitney Bowes
Final Prototype and Engineering Handoff
Based on the feedback from user testing, I improved the design and handed off the prototype to engineering for development. I led review meetings to ensure that the engineers understood the interactions, attended their sprint reviews as a stakeholder, and performed design quality assurance after it was coded.
Product Launch and Impact
The Finance Portal was launched in December 2021. A few weeks after the release of the product, I checked in with 5 users to understand their experience. Overall, the users believed the product is a vast improvement to the legacy version and they could not wait for more functionality to be added.
My work resulted in a 50% increased efficiency for client access to financial documents. High satisfaction was self-reported by 34% of users via email to the support team. Furthermore, my impact on this project led to the formation of a UX design role on three product teams in the mail sorting business unit.