Overview

SinglePoint is U.S. Bank’s web portal designed for seamless treasury management and centralized business account access. Tailored for large corporate clients, SinglePoint serves as the essential hub for managing day-to-day financial operations. Among its core services, the platform enables users to efficiently transfer funds between accounts, streamlining business financial management.

Problem statement

Developed in 2005, the current platform had not seen any significant updates in design or functionality for over fifteen years. As a result, it lagged behind in both modern user experience and compliance with emerging standards. With the new accessibility regulations for web platforms coming into effect in 2024, there was an urgent need to accelerate the platform’s modernization.

The primary objectives of the project were:

  • To modernize the platform’s design and functionality;
  • To ensure full accessibility following WCAG Compliance Standards;
  • To significantly enhance the overall user experience.

A series of six screenshots showcasing the interface of U.S. Bank's SinglePoint web portal, which appears dated with a blue and white color scheme. The images depict various screens within the platform, including the dashboard, book transfer initiation, daily activity view, audit report view, user management, and a launch point page. The design features multiple tabbed menus on the left side, small text, and dense tables of data, indicating an older and less modernized user interface.

Screenshots of U.S. Bank’s SinglePoint web portal before its redesign. The interface displays various financial management tools such as the dashboard, book transfer initiation, audit reports, and user management. The design reflects an outdated style, emphasizing the need for modernization and improved user experience. The use of editable tables, which give the convenience of initiating many transfers at once is noteworthy, however, they are not accessible.

Roles & responsibilities

As the Lead Experience Designer, I played a pivotal role in the project, collaborating closely with a multidisciplinary team that included another Experience Designer, a Researcher, a Content Strategist, and a Product Owner. Our broader team also comprised a Project Manager, Scrum Master, Accessibility Partner, and developers.

My key responsibilities included:

  • Information Architecture: Designing a clear and intuitive structure for the platform;
  • User Flows and Wireframes: Mapping out the user journey and creating wireframes to guide the design process;
  • Visual Design and Prototyping: Crafting the visual elements and interactive prototypes that brought the user interface to life;
  • Visual Consistency: Maintaining a cohesive visual representation throughout the platform;
  • Accessibility Compliance: Making sure that all processes and components adhere to accessibility standards, providing a seamless experience for all users.

Additionally, I worked closely with our Researcher to prepare and conduct usability tests, providing insights and feedback. I was also responsible for identifying and communicating any functional or visual inconsistencies to the development team to ensure the final product met our high standards.

Scope

The scope of the Minimum Viable Product (MVP) focused on the complete modernization of the Account Transfers feature. The primary objectives were to enhance accessibility, improve usability, and update the overall design without introducing any new functionality.

Process

Research

Before I joined the team, a series of user interviews and observational studies were conducted to gather insights into how users interact with the existing SinglePoint platform. Key findings from the research included:
  • Zooming in for visibility: Users frequently zoom their browsers to 150% because the current tables and fonts are too small, making the interface challenging to work with at its default size;
  • Need for a Creation-Focused Overview: Users, especially those initiating transfers, expressed the need for a creation-focused overview page that would streamline the transfer process;
  • Funds Availability: Users emphasized that knowing funds are available before creating a transfer is crucial for making confident decisions;
  • Bulk Approval: The ability to approve multiple transfers at once was identified as a significant time-saver, reducing the repetitive tasks involved in managing transfers;
  • Default Memo Visibility: Users pointed out that having memos visible by default would save time and improve efficiency, as this is a frequently used feature.

OOUX

For this project, I implemented the Object Oriented UX (OOUX) methodology. The OOUX ORCA process (Objects, Relationships, Calls to Action, Attributes) is a systematic approach that helps identify all key objects within a project, define the actions users can perform with them, and map out the relationships between these objects. This method ultimately leads to the creation of a comprehensive system map that illustrates how all the components interact within the user experience.

In the context of Account Transfers, the primary objects identified were:

  • Accounts
  • Transfers
  • Templates
  • Files/Documents
  • Reports

By leveraging OOUX, we were able to create a more intuitive and organized structure for the Account Transfers feature, ensuring that all elements were logically connected and easy for users to navigate.

An object map displaying various elements and their relationships within the context of Account Transfers. The map is organized into five columns representing different objects: Account, Transfer, Template, File list (document), and Reports. Each object is broken down into attributes (such as Account Name, Balance, Transfer frequency) and actions (such as Create Transfer, Approve Transfer). The map visually categorizes these elements using color-coded sticky notes, illustrating the hierarchical and functional structure of the system.

The object map for Account Transfer experience, outlining the key objects (Accounts, Transfers, Templates, Files, and Reports) along with their attributes and actions. This map was created using the Object-Oriented UX (OOUX) methodology to ensure a structured and user-centric design.


"Nested object matrix" visually organizes nested and host objects, illustrating their relationships and instances through labelled colored text boxes connected by lines. CTA Matrix assists us in determining the level of access for each user and their permitted actions.

Improving Contextual Navigation

We noticed that the old system had features and objects that were disconnected, making navigation difficult. To enhance the user experience, we focused on creating better connections between these elements. For the Account Transfers feature, we introduced two tabs on the Overview page: one for transfers and one for templates.

This design improves navigation by allowing users to easily switch between managing transfers and creating templates. It also speeds up the approval process, making the overall experience more seamless and efficient.

A screenshot of the "Account Transfers Overview" page. The page displays a summary of transfer activity, including sections for "Approval Required" for templates and transfers. The main table lists transfers with columns for status, from account, to account, effective date, and amount, along with an option to approve transfers. Filters for status, account, date, and amount are available on the left side, along with a search bar for transfers.
The redesigned "Account Transfers Overview" page on the U.S. Bank SinglePoint platform, featuring a modernized layout with clear sections for transfer approvals, a detailed table of transfer activities, and user-friendly filters for streamlined navigation.

Creating Object Design Guides

To ensure consistency and improve user experience, we developed comprehensive design guides for each identified object. These guides included specifications for various display formats:

  1. Mini card
  2. Grid card
  3. Table-row card
  4. Detail page

Importance of Attribute Consistency

A crucial aspect of our design approach was maintaining consistent attribute ordering across all display formats. This consistency is vital because:

  1. It aids user learning: Users quickly become familiar with the layout and structure of information.
  2. It improves efficiency: Once users learn the attribute order, they can locate specific information more quickly across different views.
  3. It reduces cognitive load: Consistent ordering means users don’t have to reorient themselves when switching between different display formats.
  4. It enhances system predictability: Users can confidently anticipate where to find information, regardless of the current view.

By adhering to a consistent attribute order across mini cards, grid cards, table-row cards, and detail pages, we created a cohesive and intuitive interface. This approach significantly contributes to a smoother, more efficient user experience throughout the entire Account Transfers system.

A user interface design guide with sections for card design, mini cards and list design, for transfer object shown on a grey background. Placeholder templates and notes are visible in each section. A user interface design guide with section detail page design for the object transfer, shown on a grey background. Placeholder templates and notes are visible in each section.

A user interface design guide with sections for card design, mini cards and list design, for template object shown on a grey background. Placeholder templates and notes are visible in each section. A user interface design guide with section detail page design for the object template, shown on a grey background. Placeholder templates and notes are visible in each section.A user interface design guide with sections for card design, mini cards and list design, for transfer file object shown on a grey background. Placeholder templates and notes are visible in each section. A user interface design guide with section detail page design for the object transfer file, shown on a grey background. Placeholder templates and notes are visible in each section.

A user interface design guide with sections for card design, mini cards and list design, for report object shown on a grey background. Placeholder templates and notes are visible in each section. A user interface design guide with section detail page design for the object report, shown on a grey background. Placeholder templates and notes are visible in each section.

User flow

 Each flow illustrates the user’s journey through various tasks, emphasizing the interactions and pathways that guide them toward successful completion of their objectives.

As a user initiating a transfer, I want to receive real-time confirmation of the transaction so that I can instantly know whether it was successful or understand its current status.

As a financial manager, I need the ability to upload a CSV file containing multiple account transfers simultaneously. This feature would allow me to efficiently process a high volume of transactions, streamlining our company’s cash management operations and significantly improving overall financial workflow.

 

As an accountant, I want to utilize a manager-approved template, enabling me to initiate transfers quickly and efficiently without having to wait for additional approval.

As a Treasury manager, I need the ability to create and save transfer templates between specific accounts. This feature would empower my team members to execute routine transfers independently, streamlining our processes and reducing the need for my direct approval on each transaction.

As a Treasury manager, I want the ability to approve both bulk transfers and transfer templates to streamline financial operations while maintaining oversight and compliance.

As an accountant or auditor, I need the system to maintain a comprehensive, timestamped record of all account transfers, enabling easy access to historical data for efficient auditing and reporting purposes.

Wireframes

In this section, I present the low-fidelity wireframes of pages, modules, and drawers created for the Account Transfer experience.
1. A collection of screens displaying various document types, showcasing diverse formats and information layouts. 2. Multiple screens featuring an array of document types, illustrating different formats and content presentations. 3. A set of screens exhibiting different document types, highlighting various styles and information structures.

Visual design

U.S. Bank employs the Shield Design System across all its digital products, ensuring consistency and efficiency in its user experience design.

In this section, you can find the high-fidelity designs for the Account Transfers feature, which visually articulate the refined user interface and interactions based on the wireframes and design principles established earlier. These polished designs incorporate the Shield Design System, showcasing a cohesive aesthetic and user-friendly experience that aligns with U.S. Bank’s commitment to delivering exceptional digital banking solutions.

Tablet wireframes:
Mobile wireframes: