← All work

One system from browsing to banking

Established a shared design system and page architecture for Truist's public site and digital account opening, so every new experience starts from a common foundation.

Role
Design Director, Public Sites and Digital Commerce
Company
Truist
Year
2024

Context

Truist’s public website and digital account opening are the front door to one of the largest banks in the U.S. I lead the design organization responsible for that acquisition journey end to end: discovery on truist.com, promotional landing pages, and the web application flow that turns a visitor into a client.

Like most large sites, it had grown page by page over time, with many templates built for individual needs, and the application flow had evolved separately with its own patterns.

Problem

As the portfolio of pages grew, so did the effort to keep it coherent.

Consistency. Pages built at different times by different teams didn’t always feel like one experience, especially at the moment a client moved from a promotion into an application.

Efficiency. Each new page involved re-solving layout, component, and QA decisions that had been made before.

Collaboration. Without a shared pattern library for these experiences, designers were approaching similar problems in different ways, which made reviews slower and quality harder to sustain at scale.

Approach

Rather than redesign pages, I focused on how pages get made.

Archetypes, not one-off templates. We audited the site and defined a small set of page archetypes: product pages, segment homepages, product detail pages, lending pages, and article and thought-leadership templates for the wholesale segment. A new page became a choice of archetype and components rather than a build from scratch.

One design system, two extended libraries. Everything sits on the Truist design system. On top of it we built two extended libraries: one for the public site (upper funnel — marketing, promotions, lending) and one for account opening (lower funnel — the web application flow). Shared tokens and foundations keep the brand continuous from browsing to banking, while each library addresses the specific needs of its half of the journey.

One design system, two extended libraries

Both libraries are built on the Truist design system, so the brand stays continuous from browsing to banking.

  1. Public site libraryUpper funnelMarketing, promotions, product pages
  2. Account opening libraryLower funnelWeb application flow
Truist design systemShared tokens, foundations, patterns

Design owns the system. My team maintains the extended kits, with a director dedicated to design systems and component libraries, so the system evolves alongside the roadmap rather than behind it.

What we shipped

  • A standardized truist.com built on archetype templates and shared components across consumer, small business, wealth, and wholesale segments
  • An extended component library for public pages, and a second for the account-opening web application
  • A shared design process across content, experience design, and research, with post-launch measurement built in

Outcome

  • Faster launches — new promotional landing pages go from brief to live in significantly less time
  • Measurable design efficiency — design time per page dropped meaningfully once teams worked from the shared libraries
  • A consistent brand from the first marketing page through the completed application, across every segment
  • Improved funnel performance between promotional pages and the application
  • Better collaboration — designers work from one library, reviews move faster, and quality no longer depends on who built the page