Overview

SinglePoint is a web portal for all treasury management services and the main access point for business account information at U.S. Bank. It is used by large corporate clients of the bank to carry out day-to-day financial operations and manage finances. One of the main services is to transfer money between your bank accounts.

Problem statement

The current platform was developed in 2005 and has not been updated either in terms of design or functionality for more than fifteen years. On the other hand, the entry of the new accessibility regulation for web platforms, starting in 2024, made this modernization happen faster. The goal of the project was:

  • To modernize SinglePoint
  • To make it accessible by WCAG Website
  • Compliance Standards
  • To improve the user experience

Old design:

Roles & responsibilities

My role on the team was the Lead Experience Designer. I worked closely with another Experience Designer, Researcher, Content Strategist, and Product Owner. If we look more broadly at the team, it also includes Project manager, Scrum master, Accessibility partner, and developers. My responsibilities in the team were the creation of the information architecture, user flows, wireframes, visual design, and prototyping. As a lead experience designer, I also had to make sure that the content we use in Account Transfers is consistent throughout Single Point, and the terminologies we use are clear and usable by users. All processes and components are accessible, and the entire visual representation is consistent. I was working closely with our researcher on the preparation and execution of the usability tests. To test and provide feedback to developers for functional and visual inconsistencies.

Scope

The MVP requirements were to completely modernize Account Transfers, make it accessible, improve usability without adding new functionality.

Process

Research

Before I joined the team, interviews with users and an observation study were conducted. Main insights:

  • Users zoom browser to 150% when working in SP. The current tables and fonts are too small, and to make it more convenient for work, users enlarge their elements
  • Initiators need a creation-focused overview page
  • Knowing funds are available to create transfer is crucial for confident decision.
  • Ability for bulk approval will save a time
  • Making memos visible by default will save time

OOUX

For this project I decided to include Object Oriented UX methodology. The OOUX ORCA process helps to identify all objects that exist within a project, determine which actions can be performed with them and their relationships to each other, and ultimately build a system map to show how all of the pieces work together.
In the context of Account Transfers these objects are Accounts, Transfers, Templates, File/Document, Reports.

In Relationship discovery phase, we discover all the interrelationships between objects which creates our contextual navigation.

CTA Matrix assists us in determining the level of access for each user and their permitted actions.

 

Creating a design guide for each object. It includes a Mini card, Grid card, Table-row card, and Detail page. It is important to be consistent when we order the attributes between any of these cards. The users will learn this order and will expect to find them in the same position across the entire system.

 

User flow

As a user initiating a transfer, I want to receive real-time confirmation of the transfer,so that I can have immediate feedback on the success or status of the transaction.

As a financial manager, I want to upload a CSV file with multiple account transfers at once, so that I can efficiently process a large volume of transactions and optimize cash management for the company.

 

As an accountant, I want to use a template approved by a manager, so that I can easily initiate transfers without waiting for approval.

As a Treasury manager, I need to create a transfer template between two accounts so that my subordinates
can transfer money without my approval.

As a treasury manager, I want to be able to approve both, bulk transfers and templates.

As an accountant or auditor, I want the system to maintain a record of all account transfers,
including details and timestamps, so that I can easily access historical data for auditing purposes.

Wireframes

Low fidelity:

Visual design

The Shield Design System is employed across all digital products at U.S. Bank.

Desktop wireframes:
Tablet wireframes:
Mobile wireframes: