SIMPLIFYING THE EXPERIENCE
– Truist One View –
Reviewing financial information, approving payments, approving money transfers, setting permissions… these are just a few tasks Truist Commercial bank customers perform on a daily basis. The trick though, is taking two separate digital experiences, from two separate banks, and making them one.
THE CHALLENGE
TAKE AN UNKNOWN BRAND AND UNIFY TWO DISPARATE BANKING EXPERIENCES
Combined, heritage BB&T and heritage SunTrust banks utilized multiple third-party applications in their desktop experience. For this reason, and others, a completely new experience was needed for both desktop and mobile app.
Our high level goals were to:
- Combine the multiple desktop applications of two banks into a single, cohesive mobile app.
- With an incomplete design system in place, work with research to prove the necessity of new design components.
- Enable our customers to approve or decline payments and transfers for MVP.
MY ROLE
DEFINE THE VISUAL AND INTERACTIVE EXPERIENCE
I have served as the lead designer of the Truist OneView mobile app since February 2020 and collaborated with two other designers on the product. In addition, I worked alongside a Product Manager, Lead Developer, Quality Assurance Engineer and 2 Software Developers.
Specifically, my primary duties entailed UI Design, Prototyping, ensuring ADA Adherence and Art Direction. Secondary duties included UX Design and Research.
The product launched in October 2021.
HITTING A ROADBLOCK WITH MULTI-SELECT PAYMENTS
CIRCLE VERSUS SQUARE
Many of our users will be approving multiple payments at once, thus the need for a multi-select option when approving payments and transfers. However, the Truist Design System only had a radio button component, which I felt certain would not convey the “multi-select“ functionality that was necessary for our users. It was my assumption that we would need to create a checkbox component.
Early flows of payment approvals utilized radio buttons. However it was important that the user understood they could approve multiple payments at once. My assumption was that we needed a checkbox to convey this functionality.
I proposed a square checkbox component that I believed would signify a multi-select capability. However, as our developers were instructed to use only approved design system components I felt research was needed to validate my assumption. Only then could we feed in a new component to the system.
PUTTING IT IN THE HANDS OF THE USER
CIRCLE VERSUS SQUARE
The research involved ten users and took a total of two weeks to turn around. The results overwhelmingly proved the square checkbox performed better when it came to approving multiple payments or transfers at once. The executive summary findings:
- Square always performed better than circle for time to complete task
- Square was assumed by users to indicate multi-click more often (regardless of OS) than circle
- Most users who had a preference preferred squared over circle and indicated that square indicates ability to multi-select
CLICK TEST RESULTS
The accuracy of choice was no different from one to the other but in regards to “time” and “assumed multi-clicking ability“, square checkbox clearly performed better in regards to multi-select.
HEAT MAP RESULTS
Again, the heat map didn’t show much of a difference in accuracy between square and circle, however it did reinforce that the square checkboxes indicated multi-select.
DESIGNING WITH ACCESSIBILITY IN MIND
ACOMMODATING THOSE WITH DISABILITIES
I was challenged with ensuring that the OneView app was accessible to people with disabilities. To achieve this I took a series of college-level ADA courses through Deque University on designing with accessibility in mind. I received numerous certifications for my achievement.
If we design with disabled users in mind, with the use of Assistive Technologies, we can create an experience that bridges the gap between a person’s abilities and the content they want to access. For Truist OneView, UI and Development worked together in this effort. In particular my responsibility was to annotate the designs to give the appropriate ADA feedback to the dev team. These annotations covered items such as Grouping of Content around controls or content. This helps the user understand what is being presented and can establish the read order. Additionally, it’s imperative in mobile that we help the screen reader distinguish between Decorative and Informational images.
How'd it do?
One View was successfully released in the Summer of 2021, becoming Truist's first ever commercial banking mobile app, helping create workplace flexibility for users.
