TNow Mobile Application Design Case Study

Role

  • UI/UX Designer

Team

  • UI/UX Designer
  • Programmers
  • Content Creator 
  • Business owner and project managers

The Story

Bank of the West is a regional financial services company headquartered in San Francisco, California. I worked for the commercial banking group, and the TreasuryNow application is a highly intuitive Digital Banking Platform. The application is a digital self-service, informational, and transactional application. 

  • Users can sign in and go through bank security with TouchID, FaceID, Mobile PIN, or Password.
  • Send Money, Make payments, transfer, and deposit funds on the go.
  • View or modify scheduled payments and pay bills.
  • Easily move money between Bank of The west accounts and accounts at other banks.
  • Deposit checks through the app and gets the receipt in your internal email. Also, verify and view images of cleared checks.
  • Manage your credit and debit cards and activate new cards.
  • Access your Checking, Savings, Credit card account statements online. 
  • Quickly look up a transaction without endless scrolling using the search bar.
  • The app is available to download at no cost.

 

Overview

My mission was to redesign the TreasuryNow finance mobile application to improve overall UI/UX and show banking products and services. I wanted to make the commercial mobile application more intuitive and user friendly. The corporate banking app usually deals with extensive data, making it more convenient and easy to use was the most significant design challenge from the UI/UX standpoint. The redesign solutions will solve the problem with Sign in, user feedback, payment processing, bill pay, check services, Debit/Credit card management, deposits, leaving a note, contacting bank customer service, user management, and improve navigating throughout the app. After redesigning the app, I went through a quick cycle of the user-centered design process and tested my design through prototype testing.

Design Goals

  • Rebranded the mobile application
  • Design intuitive user dashboards
  • Customized user experience for mobile application
  • Increased product and services visibility and increase design consistency  
  • Solved ADA issues
  • Improved overall app navigation
  • Ability to sign in with multiple authentication methods
  • Designed card carousel for payment details 
  • Redesigned user flow for payments, check services, approvals, RTP, ACH, etc.  
  • Added new component interactive functionalities and utilities
  • Created user feedback ability 
  • Added ability to manage multiple users for admins
  • Added file upload feature 
  • Designed Live Chat and Chatbot
  • Created customized email and alert messaging functions 
  • Designed customized templates for banking transactions 
  • Discover the main pain point of users and test possible solutions with prototyping and testing

My Approach

Design without research has no value and is nothing more than an opinion. To solve design problems, I needED to understand and define those problems. Once I understood the difficulties, I ideate by considering potential constraints. The next step was to test my design, reiterate and get into the feedback loop.     

The design process starts with understanding, followed by ideating, prototyping, and testing. 

Understanding The Problem

Talking to the Users

Let’s start simple. What are some pain points that users have?
I started interviewing some friends and coworkers that used the application.
Here is what I found:

  1. Lack of clarity
  2. Lack of intuitive UI/UX
  3. Too much work
  4. No Feedback and Messages
  5. UI Issues
  6. Lack of profile management option
  7. Lack of Sign in multiple methods

 

Persona

Brian Goldman

40 years old male

Salary 250K

Married

He lives in New York

Education: MBA

 

 

Goals:

  • Look up extensive transaction data and reports daily
  • Need to have access to desktop and mobile app
  • He wants to interact with the easy to use digital banking platform
  • Save time and money on a banking application
  • Easy access to customer services assistance
  • Wants to have access to corporate payments, transfer funds, check balances, transactions, reports, view check images, manage loans, move money between accounts, receivables, liquidity and lending and credit, and manage investments
  • Easy access to self-service Walkthrough information
  • Leave comments and feedback

Frustrations:

  • Has difficulty sign in to the application via different Sign in methods 
  • Wastes time clicking on irrelevant information
  • Has problem searching, sorting, and filtering data
  • Difficulty going through transaction flows
  • Has difficulty finding relevant data 
  • Offen has trouble understanding his banking tools
  • Offen has trouble leaving feedback
  • Has difficulty seeing the error messages
  • Has difficulty filling information into the fields every time. instead, he wants to use templates and save them for future transactions
  • Has problem sending and receiving messages
  • He has difficulty managing his profile info

User Pain Points

I focused on the problems that were important to both user and the business. In this section, I have expanded the most significant pain points and the top reasons that they happen. Most of these reasons are based on the design reviews.

  • Lack of product and information clarity and outdated design
  • Missing the mobile-first approach 
  • Didn’t translate desktop functionalities into the mobile-friendly layout properly 
  • Needed redesign user flows for payments, check services, approvals, RTP, ACH, etc.  
  • Lack of upload file feature 
  • Didn’t support customized email and alert messaging functions 
  • Limited Sign in methods
  • Lack of customized templates for banking transactions
  • Missing Live Chat and Chatbot
  • Didn’t support customer feedback and customer service info 
  • Lack of interactive features such as card carousel
  • Lack of engaging dashboards
  • Limited interactive functionalities and utilities 
  • Issues with overall spacing, alignment font consistency
  • Lack of pinch and zoom features
  • ADA issues with background colors, text readability, and icon visibility 
  • Lack of floating buttons

 

Design System

Style Guide 

I created a new mobile Style Guide from scratch. A brand style guide is a holistic set of standards that defines a company’s branding. It references grammar, tone, logo usage, colors, visuals, word usage, point of view, and more.

Design System

I used atomic design methodology for creating design systems.

Reusable Sketch Library

My solution to a lack of a unified pattern library was to create a master sketch file. The Master sketch file is a library of components so everyone, including designers, developers, content creators, and stack holders, can use the same design patterns. This pattern library guaranteed a unified branding and look and feel for the entire company products. Through my research, I discovered that the difficulty of not having a centralized design system would lead to a bigger company problem.

InVision

I created a style guide, provided high fidelity mockups in Sketch, and then uploaded the sketch library into InVision. InVision allowed me to quickly and easily create interactive mockups for my designs and share these mockups with my team. InVision allowed our developers to use the Inspect elements feature to get the code behind UI elements.

Design

App Icons Design

The app icon is one of the first elements that visitors see on your Product Page. It is essential to have an icon that gives a strong first impression while communicating your app’s purpose and utility. I designed the mobile app icons based on the company branding guidelines. I provide app icons for iOS and Android. I followed iOS guidelines and Google’s material design suggestions for icon sizes. 

App Store Marketing Images 

I’ve designed the app Store marketing image based on app store creative requirements for the TNow application. Those Screenshots I provided support all device types and showed the application services, features, and functionalities. 

Application Dashboard Design

  • The first page that users see and interact with is the dashboard page. The goal of the user dashboard is to provide a summarized view of user balances and transactions. It’s an excellent tool for quickly getting a glimpse into what is happening with the user’s bank account, a task you have to take action on, and whether they’re on track with expectations and goals.
  • I designed a new customized user dashboard that shows the user’s daily account overview. This component is an interactive swipeable card carousel that offers a quick overview of their account. The user can swipe through opening available balance, pending approvals, debit/credit balances, and current available balance.
  • The profile icon on the top right allows users to take action and access their profile.
  • Created UI and background graphic for the header
  • The pending approval list view provides a quick way for the user to take action on pending items.
  • The frequently used templates allow users to use existing templates to process transactions quickly without entering information manually every time.

Side Navigation

  • The app side Navigation is redesigned based on new business requirements and user needs.
  • The mobile side navigation allows the user to navigate between the different modules in the application. 
  • The top bar covers the length of the screen and is made up of the following components: Side Nav Header and Side Nav List Items
  • The side nav is always left-aligned on the screen
  • When the user clicks the menu icon, the side navigation drawer is opened
  • To close the side navigation, the user can click anywhere outside of the side nav area or clicks on a list item to get into that module

Mobile Dialog – Component Design

A dialog is a type of secondary window which provide critical information to a user action or asks for a decision to continue on a specific task. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

Dialogs are purposefully interruptive, so they should be used sparingly.

Errors that block an app’s normal operation or a task flow:

– Information that requires a specific user task, decision, or acknowledgement

– Alerts or information which would be helpful to a context

Types: 

1. Alert feedback dialogs – Provide urgent information or a system feedback.

2. Error- Negative feedback dialogs – Provide error information or a negative feedback or take an action.3. Positive feedback dialogs – Provide success information or a positive system feedback or or take an action.

4. Information feedback dialogs – Provide details of a selected entity or take an action.5. Warning feedback dialogs – Provide warning messages or take an action.

6. Confirmation dialog – Required when an action of choice is required that can’t be made later. 

7. Simple Dialogs – Can display items that are immediately actionable when selected

8. Task assistive dialogs – Containing actions that require for a task completion.

List View Tabs

Tabs are used to separate sections within the same module. 

Anatomy:

The top bar covers the length of the screen and is made up of several components: 

1. Tab Container  2. Tab Content Text   3. Primary Tab Selection Indicator 

Sign In Flow Re-Design

  • My mission was to create new flows for Sign in interaction and include new authentication methods such as face id and fingerprint Sign-in. 
  • The original Sign-in process only supported password, so it missed other options to sign in to the application from the UX perspective. 
  • I collaborated with developers, business owners, and content creators to develop the best possible solution for Sign-in methods.

Flow#1-First Time Sign in

Flow#2-Passcode Sign in

Biometric Sign in

Enabling/activating FaceID biometric at the login page should prompt the user to enter client id, user id, and password. The system will validate the enter info and throw a step-up challenge. Once the user completes the challenge, the system activates the biometric option, and the user should be able to use biometric for login/step-up authentication.

Flow#3-FingerPrint Sign in

The user should Sign in to the mobile app via fingerprint by entering the client and user ID and then selecting the fingerprint icon. A user can also set the ‘Remember me’ option allowing the system to remember client and user ID. The ‘Remember Me’ option in mobile should be checked in by default. This will enable the user to login into our app via biometric without entering client and user id. A user will get three device attempts to authenticate his/her identity. If the user fails on all three attempts, the system should lockout the user, and he/she needs to call customer service to unlock.

Flow#4-FaceID Sign in

The user should sign in to the mobile app via Face ID by entering the client and user IDs, then selecting the fingerprint icon. A user can also set the ‘Remember me’ option, which allows the system to remember the client and user IDs. This will enable the user to sign in to our app via biometrics without entering the client and user ID. A user will get three device attempts to authenticate his/her identity. If the user fails all three attempts, the system should lock the user out, and they need to call customer service to unlock.

Transaction Payment List View

Business banking users needed to review and approve multiple pending payments on mobile, often across multiple currencies. The previous experience lacked clarity, didn’t surface totals, and made high-value approvals slow and risky.

Design a mobile Transaction Payment List View that gives approvers clear visibility into payment details, multi-currency totals, and tools to quickly approve or reject transactions — while maintaining enterprise-level security and compliance.

I created an intuitive list view with structured payment rows, contextual banners, filters, and status indicators. I introduced a multi-currency total footer and a Convert to USD option to support global treasury workflows. I also added drill-downs to transaction details and streamlined decision actions, ensuring accessibility and reducing cognitive load.

Specific screens include list views where the user can select items and take action. Some list views will have a total row.  

The total row will appear at the bottom of the list view and be highlighted in yellow. The total row can appear as a one line or two line list item depending on the context.

Pending Approval Flow

Corporate banking users regularly manage high-value approvals on mobile, often reviewing dozens of payments a day. The existing flow wasn’t optimized for decision speed, didn’t clearly support compliance requirements, and forced users to navigate multiple steps to approve, reject, or return transactions.

Design a secure, efficient Pending Approval flow that lets approvers review payment batches, drill into individual transactions, and complete decisions with minimal friction — while supporting audit trails, permission controls, and comment requirements for risk actions.

Design Objectives

  • Allow approvers to quickly view payment queues and review details

  • Support multiple decision paths (Approve, Reject, Return for Review)

  • Provide currency breakdowns and totals for international batches

  • Minimize risk by requiring comments on returns/rejections

  • Maintain clear audit trails and system validation messaging

  • Reduce cognitive load and avoid overwhelming users by reviewing many items

What I Designed

I designed a streamlined approval journey from dashboard to batch view to transaction detail, with clear action CTAs for Approve, Reject, and Return for Review. I introduced a transaction carousel for multi-payment review, added mandatory comment modals for rejections/returns, and built logic for empty states, permission gating, and auto-advance to the next item. Wireframes and flowcharts ensured alignment with compliance, engineering feasibility, and mobile use patterns.

Design Approach

I blended UX best practices, compliance requirements, and enterprise workflow patterns:

  • Flowchart mapping

  • Wireframes and edge-case handling

  • Cross-currency info hierarchy

  • Approval UX aligned with banking/regulatory needs

  • Guided error states and confirmation screens

  • User-driven plus system-driven actions

The flow reduced approval time for high-volume users and improved clarity around multi-step decisions and audit compliance. Stakeholders noted enhanced efficiency and reduced risk of accidental approvals. The experience now scales to batch-based enterprise workflows, setting a foundation for future automation and review-assist features.

Outcome

The redesigned flow:

  • Reduced approval time across batches

  • Create a consistent mental model across payment types (ACH/Wire/FX)

  • Lowered friction for high-volume approvers

  • Improved clarity around foreign-currency approvals

  • Supported audit and internal controls

It balances speed, security, and clarity — making high-value approvals safer and easier on mobile.

ACH Transaction Flow

Business users needed to review and approve ACH payment batches from mobile as part of daily treasury operations. The older experience made it difficult to verify transaction details, track status, and confidently approve high-volume ACH batches, which slowed decision cycles and increased operational risk.

Business users needed to review and approve ACH payment batches from mobile as part of daily treasury operations. The older experience made it difficult to verify transaction details, track status, and confidently approve high-volume ACH batches, thereby slowing decision cycles and increasing operational risk.

I mapped the end-to-end ACH approval journey:
Dashboard → Pending Approvals → ACH Batch View → Transaction Details → Action & Confirmation.
Designed list and detail screens showing key financial fields (batch ID, effective date, account, total debit/credit amounts, transaction count). Included a drill-in view for individual ACH items and enabled Approve / Reject / Return for Reviewlogic with justification prompts. Added system safeguards: permission gate, empty states, success notices, and automatic routing to the next transaction in multi-item batches.

The redesigned flow reduced decision time and improved clarity for ACH approvals on mobile, increasing confidence for approvers handling high-volume treasury activity. Stakeholders praised its balance of speed, clarity, and compliance — and it aligned with operational and audit controls for commercial banking environments.

Positive Pay

Reporting – Transaction Search

User Management

My Profile

Flow#1 Bound Devices

Flow#2 Change Password

Flow#3 Contact Settings

Flow#4 Face & Voice Setup

Flow#5 Profile Picture 

 

Message Center

User Feedback

Results

  • Collaborated with designers, developers, QA, and business owners to successfully create and launch the mobile application. 
  • I have designed a customized user experience for TreasuryNow mobile application that improved overall user experience.
  • Created an up to date design system, mobile style guide, sketch library that solved UI/UX issues.
  • I designed an intuitive user experience that helped increased product and services visibility and user accessibility.  
  • Solved ADA issues
  • Improved overall app look and feel and rebranded application as TreasuryNow. 
  • Redesigned user flows and provided transactions template redesign.
  • Redesign component and listview dashboards and added new component interactive functionalities and utilities
  • Discovered the main pain point of users and provided possible solutions with prototyping and testing