Lessons from the Making of Truist's Web Platforms

Envisioning a Unified Experience for a Complex Organization

Role: I lead ux design for the design system and I lead ux design for business banking.

Credits: Too many to name — the entire DCAM collaborated in research, development, and content strategy

Methods: Design Strategy / Stakeholder Workshops / UX Design / Prototyping & Testing

Truist was formed in 2019 by 2 banks, SunTrust and BB&T. It's currently the 6th largest bank in the United States. Our team designed experiences for consumer, business, credit card, lending and investing products in the Consumer and Business segments for Truist.

Our webspace was in dire need of an update once the merger was complete, so we started with a design system, then, built a new truist.com banking experience from the ground up.

Creating an Environment for Change

In order to make large strides, we first needed to identify roadblocks, mitigate risks, and generate alignment. The following keys were essential in order to launch a design that would transcend bureaucracy:

  • The right creative team
  • C-level buy in
  • Company-wide communication
  • A solid solution partners would want to adopt
  • The ability to iterate, improve, and release changes over time

Stakeholder workshops and brainstorming sessions.

The Design Approach

Research

The team began by facilitating an experience mapping workshop with key stakeholders and the customers.

A Focus on Content

We had an important story to tell.

Responsive content components

Mobile-First

We designed for the mobile experience first, then scaled those designs up to larger browser widths. This caused us to question content and minimize the number of elements present on the screen at one time making for a more consumable experience regardless of device.

Prototyping

The design team then explored a number of variations before narrowing to three concepts that represented all of the brainstorming work up to that point. We tested those concepts with users.

Accessibility

Throughout the development process, we prioritized accessibility by:

  • WCAG 2.1 guidelines: We adhered to the Web Content Accessibility Guidelines (WCAG) 2.1, ensuring the website was usable by people with disabilities, including those with visual, auditory, motor, cognitive, and speech impairments.
  • Conducting regular accessibility testing: We performed ongoing testing using automated tools and manual checks to identify and address accessibility issues.
  • Involving users with disabilities: We included individuals with disabilities in the testing process to gain valuable feedback and ensure the website met their needs.
  • Providing alternative text for images: We included descriptive alt text for all images to convey their meaning to screen reader users.
  • Ensuring keyboard navigation: We made sure all interactive elements on the website were navigable and operable using only the keyboard.
  • Providing sufficient color contrast: We used adequate color contrast between text and background to ensure readability for users with low vision.
  • Creating clear and concise language: We used plain language and avoided jargon to make the website easy to understand for all users.

Regularly Scheduled Design Reviews and Critiques

In order to build upon your teammates' ideas, you need to hear them (especially in a remote team where you can't chance a glance at anyone's design.) Previously, there was little need for intentional space and time for design conversations to happen because they just happened.

We created critique and sharing times for discussing product strategy, sharing ideas, and sharpening designs in a collaborative setting. Here we inform each other of the problems we're solving, describe the thinking behind the solutions we're considering, and gain the perspectives of others who aren’t knee deep in the project.

Good feedback is hard. We had intentional training and practice to get better at delivering and receiving feedback that inspired action.

Implementation and Documentation

Once we converged on one design, we were ready to build. The designs were then broken up, iterated upon in the browser, and integrated into our content management system. We created detailed documentation explaining the patterns and best practices so that partner organization could easily manage and keep their content up to date.

The Results

Visit the new Truist Bank Website From the beginning we set out to be the carrot and not the stick by creating a beautiful and useful tool that would maintain a strong visual identity across all sites while being flexible to express each departments unique value propositions.