top of page
Truist Mobile
The better banking experience Truist Mobile offers customers a seamless way to manage their finances on the go. With features like mobile check deposit, account monitoring, and easy bill payments, the app provides a secure and convenient banking experience right from your smartphone.
Role
Product Design (UX/UI)
Tools Used
Figma
.png)
The challenge
For the Truist mobile banking app, the project focused on enhancing the dashboard experience to provide clients with a comprehensive view of their finances. The primary challenge involved redesigning the account display widget to increase the visibility of aggregated accounts, offering users a complete financial picture. New customization settings were introduced, allowing users to personalize their account views. Additionally, improvements were made to the dashboard’s Quicklinks feature, adding further customization options and enabling clients to tailor the interface for quicker access to key features.
Key Pain Points:
-
The existing accounts list displayed a limited amount of accounts for clients.
-
The accounts list lacked organization and hierarchy, reducing the possibility of scanning and quickly finding specific accounts.
-
Accounts with long names and/or high balances caused truncation due to additional graphics within list.
-
Clients were only able to view 2 quicklinks at a time before having to scroll.
-
Clients lacked a consolidated view for accounts from different segments. (business & personal)
Project goals
Modernize
the UI
Introduce personalization / customization
Improve performance and reliability
Increase scan-ability
Ensure users can quickly execute regular task
Improve and refine brand presence
How we solve and tackle problems
We define our scope of work to outline project objectives, deliverables, timeline, and resources needed. This ensures clarity, alignment, and accountability amongst the team. Ultimately facilitating efficient project execution and successful outcomes.
Combined client solutions
We designed the Truist mobile banking dashboard with flexibility in mind, accommodating clients who manage multiple accounts and combined account types.
Voice of the client
We incorporated "Voice of the Client" feedback throughout the design process to ensure our solutions truly addressed user needs. By gathering insights from client surveys, interviews, and usability tests, we were able to directly understand pain points and preferences. This feedback played a pivotal role in shaping our design decisions, allowing us to prioritize features, refine the dashboard interface, and introduce customization options that align with how clients manage their accounts.
Accounts widget ideation and exploration
We engage in ideation and conduct creative workshops to generate innovative concepts and solutions, fostering creativity and collaboration amongst teammates. Through brainstorming, we aim to uncover opportunities for testing and approaches to address current challenges.
Account Sections
The widget design separates account roll ups (categories with total sums) and individual account details into distinct sections, creating a clear, organized layout. Toggle switches and segmented controls offer users quick customization options.
Scrollable Accounts
Account roll ups and individual account details are presented as separate widgets, accessible through horizontal scrolling for easy navigation. All account types are displayed within a single, unified list, providing a seamless, consolidated view.
Account Categories
A consolidated widget organizes individual accounts by category, displaying total sums for each type. Segmented controls allow users to toggle between personal, business, and linked accounts. Additional customization options are accessible through settings in the widget's contextual menu, enabling a tailored user experience.
Results
Our dashboard redesign has significantly boosted engagement by giving clients greater control over the data they see and the actions they prefer through customization. We enhanced task efficiency by adding direct entry points to nested tasks, and we improved clarity around financial health by grouping account types. Additionally, we refined UI elements and content to enhance feature visibility and strengthen brand awareness.
Dashboard 1.0
Dashboard 2.0
Top-task
A new entry point for secure messages and alerts was added to the header, quick link content was shorten to increase the amount shown before scrolling, and "home settings" was changed to "customize" to clearly communicate the action. Improving top task allow for direct access to common actions and
Accounts widget
Placing the accounts list within a widget has decluttered the dashboard by grouping similar actions. With the new widget we added functionality to further improve customization and communication on clients overall networth.
Segment controls - enable users to quickly toggle between account types, enhancing navigation efficiency. After launch, 621,000 clients engaged with the new "Linked Accounts" tab, with 11% of unique visitors actively using this feature to manage their accounts.
Contextual settings - nest additional widget options so users can adjust display preferences, set default views, and configure settings to better suit their individual needs.
Account categories and totals - provide users with a high-level view of multiple accounts
Strategically placed key CTAs - to drive engagement with essential account actions. In the first two weeks post-launch, the "Open an Account" CTA generated 93,000 clicks, and the "Link Account" CTA received 120,000 clicks. By centralizing these actions, we enabled efficient account management and seamless interactions with the platform.
Wrapping up
The Truist mobile dashboard is an ongoing project that will continue to evolve with the client's voice at the forefront. As we build on our quick wins, our next steps include refining all dashboard widgets, modernizing the UI, and developing new features to enhance the overall banking experience.
Dashboard 3.0 exploration
I’ve taken on the challenge of refining the dashboard UI by reevaluating how we use colors from our existing design system. We’ve received feedback about the heavy use of purple, with some comparing our UI to the kids' TV character "Barney." While I appreciate the purples available, I believe we can utilize them more effectively.
In this redesign, I focused on enhancing color and UI elements without altering the existing user experience. Key solutions include removing the heavy purple header to create a more airy feel for foreground elements. Drawing inspiration from competitor apps, I explored the potential of incorporating a gradient to improve our UI patterns while introducing new complementary colors.
Additionally, I added drop shadows to the dashboard widgets to better define each section and introduced widgets with 50% opacity to emphasize key content areas.
3.0 Insights widget + Illustration style
A recent update to our dashboard includes the use of illustrations. I've contributed to the initiative of building a new illustration style for Truist’s mobile experience. This involved introducing vibrant colors and unique patterns to create a cohesive, visually engaging style that will serve as the foundation for a reusable illustration library. This effort aimed to enrich the app's visual identity, making it both more dynamic and memorable for users.
.png)
High-level widgets
I've reimagined the dashboard widgets to provide a high-level overview, allowing users to quickly assess their financial health at a glance. This redesign reduces the need for excessive scrolling and streamlines the dashboard content, creating a more intuitive, efficient experience that delivers essential insights without overwhelming the user.
More from Truist
View mini case studies for additional Truist projects and features
bottom of page