Bank of America MFA App
An app that aims to empower bank employees to manage VPN access by supporting push-based authentication and OTP based authentication.
Role
Product Design (UX/UI)
Tools Used
Sketch
The challenge
With so many employees shifting to remote work during the COVID pandemic, there was a need to rethink the access management process to make it more self-service and easy to use. The goal was to simplify how employees accessed devices and networks, ensuring a smoother transition to remote work.
Key Pain Points:
-
The existing portal was unable to cope with the scale of the task, causing a flood of frustrated employees who struggled to register and activate new tokens independently
-
An overwhelming amount of daily help desk calls.
-
A poorly designed internal help desk portal led to longer calls, contributing to the backup.
-
The existing MFA app had limited features for access management
Key Definitions:
MFA: Multi factor authentication
A security method that requires users top provide more than just a password to access an account or application.
OTP: One time password
A unique password that can only be used once to login to a system or device.
Project goals
Intoroduce new
MFA features
Clean up
UI
Simplify the
user experience
Create an FAQs section with troubleshooting tips to help users easily resolve common login issues.
Enhance
online portal
Key project steps
Research
-
AAUs (Ask a user)
-
Functional Analysis
-
Moodboard
Prototyping
-
User Flow
-
Wireframing
-
Interactive prototype
UI Design
-
Visual Concept
-
Design System
-
Component Library
-
Illustration
Validation
-
Reviews
-
Surveys
-
Iterations
All bank employees
The Banks MFA app is used by all bank employees to access secure bank systems and software. From in bank tellers to corporate executives. The main focus of this project was to ensure a seamless experience for admin and standard users.
Standard User
Job Roles
Bank employee
No direct reports
Responsibilities
Standard users have the ability to manage their own MFA tokens and settings and place orders for teammates.
Admin
Job Roles
Managers
Team Leads
Assigned Delegates
Responsibilities
Admin users have the ability to order new MFA tokens, track orders, and reset passwords.
High level product views
We used information architecture to create a high-level map of the app’s structure, which allowed us to communicate the user journey to stakeholders clearly—from onboarding through to key app features. This overview helped align our team and stakeholders on navigation flow and content placement, ensuring each step in the user journey was intuitive and strategically positioned. By visually organizing the app’s components, we could illustrate how users would interact with various features, making it easier for stakeholders to understand the app’s functionality and flow.
Onboarding work flows
We continuously iterated on the onboarding process to address frequent user pain points. We noticed that the original onboarding was lengthy, leading users to skip through feature activation and ultimately miss out on key app functionality. As new features were also being developed, we needed a solution to streamline onboarding and make it more effective.
Another key pain point was users forgetting their app passwords, which was crucial for verifying their identity with the help desk. Based on user studies showing that numeric sequences are easier to remember, we replaced the password with a PIN system, making access and support calls simpler and more user-friendly. These adjustments created a smoother, more intuitive onboarding flow that increased feature engagement and reduced login issues.
The original onboarding journey's complexity and excessive steps have been significantly reduced, leading to a 65% decrease in the number of screens. Users can now enable all features on a single screen, eliminating the need for unnecessary navigational steps and enhancing efficiency. This streamlined approach ensures users enable all security feature that are needed for a seamless authentication experience.
Streamlining the Journey
App passwords were replaced with PINs, as research suggests that users are more likely to remember a sequence of numbers rather than a complex password. This change simplifies the login process and reduces the need for frequent password resets or calls to the help desk, ultimately improving user satisfaction.
Enhanced Password Management
To create a cohesive and visually appealing experience, consistent styling and adherence to brand standards have been integrated throughout the onboarding journey. By implementing a unified visual design, including typography, color schemes, and illustrations, the redesigned journey presents a professional and engaging interface that aligns with the overall brand identity.
Consistent Styling and Brand Standards
With the new security ecosystem in place, users:
-
are better equipped to self-manage the MFA process
-
require less assistance from the help desk, and call time to resolve individual cases has decreased.
-
can address security and accessibility concerns are more easily, and issues are remediated as expected.
Through post launch surveys, users have reported an improved understanding of the business need for MFA, and security management across the bank has been improved tremendously.
Dashboard
As new features rolled out in the MFA app, we reorganized the dashboard to prioritize quick actions for login options and device management. We also introduced a "What's New" section to keep users informed and educated on the latest features and updates.
Login approvals
The login request page was enhanced by modernizing the UI to create a cleaner, more intuitive design. We made actions more visible by removing nested behaviors, bringing primary functions to the forefront for easier access. Additionally, we emphasized the countdown timer, making it stand out so users could clearly see the time remaining to complete their login, improving overall user experience and reducing login issues.
Custom illustrations
To enhance the UI and bring more color to the utility-style application, we introduced customized illustrations tailored to each user’s assigned office. These unique visuals were designed to add personality and vibrancy, making the interface feel more welcoming and engaging while providing a subtle connection to the user's workspace. This approach aimed to transform the app’s look and feel, adding warmth and visual appeal to the user experience.
Security illustrations
Illusrations used through the MFA web portal and mobile app for enrollment, education, and promotional materials.
