ACI Worlwide Universal Online Banker
Web App & Mobile Web UX/UI Design
Revolutionizing Fintech: How The Skins Factory Transformed ACI Worldwide's UI/UX Design for Optimal User Experience
When major fintech company ACI Worldwide needed to redesign their flagship product's UI/UX Design, they contracted The Skins Factory. Over the course of 6 months, our design team created 49 Adobe Photoshop .PSD files, completely overhauled the user experience design and the user interface for over 150+ screens (browser & mobile) and created a placeholder logo for the application. This is a truncated look at the screens our team designed and represent a fraction of the final output.
““Reaction from clients has been tremendous.””
Universal Payments: Desktop Web Browser UI/UX Design
Main Dashboard & Alt Versions
We recognized the need to revolutionize ACI Worldwide’s user experience design to stay ahead of their competition. That's where we stepped in starting with the main dashboard and navigation array. By combining strategic thinking, and a deep understanding of user behavior, The Skins Factory revolutionized the way users interact with their product. This fintech product was designed to be a “white label” offering to financial institutions. We opted to use blue on the title bars throughout the user interface as an example.
Navigation, Drop-down Menus & Modals
Global Navigation
Universal Payments wanted to overhaul the main navigation drop downs to make them more manageable. Our team set out to redefine how a navigation operates, by making the user experience customizable. Users are now able to move sub-navigation sections and hide unwanted entries. This sped up productivity and empowered the end user.
Global Dropdown Menus
Alerts Drop-down Menu Design
Messages Drop-down Menu Design
Approvals Drop-down Menu Design
Main Dashboard Modals
Account Balances Modal
Account Balances Modal: Showing row being repositioned
Edit Reports Settings Modal
Create Default Statement View Step 1 Modal
Edit Events Settings Step 2 Modal
Create Default Statement View Step 2 Modal
Edit Events Settings Step 1 Modal
Add Widgets Modal
Payments, Payment Template & Payment Import/Export
Payments
Create CCD Payments
Create CCD Payments: Drop-down Menus Expanded
Create CCD Payments: Page Errors
Create CCD Payments: Successful Submit
Create CCD Payments: Create Recipient Modal
Create CCD Payments: Select Recipient Modal
Payment Templates
ACI Worldwide Template Center UI/UX Design
ACI Worldwide Payment Center UI/UX Design
Advanced Search Modal
Payment Import
Manage Payment Import Profiles
Manage Payment Import Profiles w/slide-in column overlay
Set Default Values Modal
Edit Import Profile Modal
Preview Import Profile Modal
Create Import Profile Modal
Preview Import Profile Modal
Payment Export
Manage Export Profiles
Export ACH Template Profiles Modal
Create Export Profile Step 2 Modal
Create Export Profile Step 3 Modal w/row shift
Create Export Profile Step 4 Modal
Create Export Profile Step 5 Modal
Master Recipient
Wire Payments
Create Template Group Payment
Create Template Group Payment
Create Template Group Payment w/Menus Deployed
Create US Wire Payment
Add Structured Remittance Information Modal
Add Structured Remittance Information Modal w/Document Information
Add Remittance Document Information Modal
Preview Structured Remittance Modal
Prior Day
Prior Day w/moving row
Prior Day Transaction Details
Prior Day w/Corporate Loan Expanded
New User
Manage Users
Manage Users w/Expanded Column
Create New User Step 1 Modal
Create New User Step 2 Modal
Create New User Step 3 Modal
Set Custom Limits Modal
Set User Access Schedule Modal
Create New User Modal
Create User: Custom Access Modal
Create User: Set Custom Account Access Modal
Set Custom Account Access
Create User: Set Functional Access Modal
User Setup Report
Set Approvals Modal
Create User: Set Functional Access Modal
Create User: Set Data Service Access Modal
Fraud Service
Manage Positive Pay
Create ACH Authorization Rule
View Suspect Item Modal
Suspect Items: Check Positive Pay
Suspect Items: Positive Pay
Create Multiple Issue or Void Instructions
Create ACH Authorization Rule
Create US Wire Template
Create CTX Payments
Create CTX Payments w/menus expanded
Create US Wire Template
Add/Edit EPN 820 Payment Order / Remittance Advice
Add EPN 820 Payment Order / Remittance Advice
Add EPN 820 Payment Order / Remittance Advice w/Page Errors
Alerts
Manage Alerts Settings
Manage Delivery Methods
Create Alert Modal
Add Delivery Method
Account Activity + Create Upload
Account Activity
Account Activity
Account Activity
Create Fixed Width Upload Profile
Transfers
Create Transfer
Create Transfer w/Page Errors
Create Transfer w/Warning
Create One to Many Template
Transaction Search + ACH Quick Entry
ACH Quick Entry
Create ACH Quick Entry Payment
Preview ACH Quick Entry Payment
Transaction Search
Transaction Search
Transaction Search Results
Message + Reports
Message
Inbox
Create Message Modal
Reply to Message Modal
Reports
Account Reports: Standard
Account Reports: Custom
Customize Standard Report Modal
Login
Main Login Window
ACI Service Agreement
Create Authentication Credentials
Preview Authentication Credentials Modal
Change Password
Update Your Email Information Modal
Universal Payments: Mobile Web Browser Application UI/UX Design
After the browser application was completed, we ported over some sections to mobile. This is a true mobile web application using the small viewport resolution. This meant that the screens were going to be extremely tall due to the low resolution. To provide a better user experience, we added collapse / expand icons to sections. Because the screens are so tall, we're showing snapshots of different sections of screens. This is a small sampling of the screens we designed.
Dashboard + Dashboard Modals
Menus + Alerts + Login
CTX Payments
Fraud Services
ACH Payments
Prior Day
Wire Payments
Transfer
Payment Template + Transaction Search
Account Activity + Multiple Issue
Placeholder Logo
ACI Worldwide needed a placeholder logo for presentation purposes only during the UI/UX redesign. So our team whipped up a quick brand identity.
