Rebuilding Digital Banking for Scale & High-Growth Acquisition
Overhauling a legacy financial platform into an award-winning digital ecosystem through user-centered service design, life-moment routing and enterprise-grade accessibility.
I led the digital transformation of Webster Bank’s public web presence and application ecosystem across 2,000+ pages. Facing slow page loads, fragmented user experiences and a failing online account opening funnel, I reframed a $1.25M web refresh budget into an enterprise initiative to build the bank’s first design system and in-house UX practice.
600%
Increase in application starts
40%
Growth in account acquisition
$6.7M
New revenue generated
$1.4B
Facilitated in PPP loans
THE OUTCOME: Award-Winning Enterprise Rebuild & Unified Visual Craft
[AFTER]: Webster Bank Project Beacon – how a website redesign became an enterprise transformation
Problem
- Legacy Performance, Architecture & Accessibility Constraints: Pages took 20 seconds to load, failed wildly at basic WCAG accessibility standards and were structured around rigid internal product silos rather than customer financial intent. Mobile responsiveness failed across the site and navigation reflected internal organizational charts instead of user journeys.
- Prior Failures: Previous redesign attempts focused purely on cosmetic surface refreshes. They left underlying information architecture, accessibility gaps and backstage operational bottlenecks unaddressed.
- Conversion Crisis: The core consumer account opening process dropped to a 2.2% start-to-submit conversion rate against a 50% industry benchmark. The funnel required 14 screens and 42 manual entry fields while forcing users to read legal compliance disclaimers on the initial screen. Funnel data revealed a 33% drop at Personal Info and a 66% drop at Verify ID. This diverted roughly 4,000 customers monthly to physical branches or call centers, inflating operational service costs.
Deep Dive: Fixing Digital Account Opening Through Service Design
Read the full case study on how service design exposed where customers were breaking down and fixed the bank’s account opening funnel.
Approach
The Strategic Lever: I reframed what began as a $1.25M web refresh budget into an enterprise transformation initiative I named Project Beacon. I embedded design system thinking, outcome-based roadmaps and intent-based routing to solve core acquisition roadblocks.
Team Building & Execution
- Team Building: Recruited, built and led a seven-person UX team spanning research, content strategy and interface design.
- Cross-Functional Alignment: Facilitated alignment sessions across 60 stakeholders in Legal, Compliance, Risk, Marketing, Brand and every line of business.
- Delegated Production: Directed team execution for Figma UI pattern files, Atomic Design tokens, usability testing scripts, video clip synthesis and content mapping across 1,500 legacy pages.
The outcome of a facilitated group workshop to align voice, tone and messaging strategy with key stakeholders from across the enterprise
Diagnostic UI Audit
Before the design system could get funded, it needed evidence. I audited more than 2,000+ pages on websterbank.com plus seven core application flows, to quantify the design debt and find where conversion was leaking.
One artifact from that audit moved the executive committee more than any slide of narrative could: a single screen showing 30 different button styles, shapes and colors in active use across the site, all meant to do the same job. That audit became the business case.
BEFORE: The Disjointed Baseline I Was Hired to Replace
[BEFORE] THE INHERITED MESS: 30 completely disparate button styles discovered during my initial systemic audit.
[BEFORE] UN-AUDITED LEGACY CHAOS (2019): Mismatched components and visual debt built by external agencies before my arrival.
[BEFORE] UN-AUDITED LEGACY CHAOS (2019): – legacy Public and Product Pages, Branch Locator and Original Application Flow – illustrates visual fragmentation, unaligned layouts, cluttered pricing interfaces, text-heavy branch locators and the start of a 14-screen application screen with compliance warnings.
Discovery & Research
Before defining a strategy, I ran a 9-week discovery process.
- Reviewed 1,300+ pages of research and behavioral data
- Interviewed 50+ internal stakeholders across all departments
- Conducted design thinking workshops and competitive benchmarking
- Created a 150-page strategy artifact that informed UX, content and IA
- Focused on experiences customers loved, beyond basic feature parity with competitors
Project Beacon strategy document – the outcome of 9 weeks of discovery.
Intent-Based Routing
The project shifted the experience model away from internal structures toward user intent, such as buying a home or starting a business. The team built a persona-plus-life-moment routing engine that connects visitors to curated financial guidance and self-service application flows.
Customer “choose your own content” functionality – default state
Read the full case study on how we re-architected the bank’s core taxonomy and navigation around financial intent.
The Bank’s First Design System
The team built Webster’s first enterprise design system, OCD, using Atomic Design principles. It established tokenized UI components, global layout grids and WCAG 2.0 AA accessibility patterns.
This eliminated visual fragmentation, enforced brand governance and improved page load speeds tenfold.
THE OUTCOME: The Bank’s first enterprise design system
Webster Bank OCD design system component sheet
Trust Engine Redesign
The team repurposed existing TV testimonial assets into interactive customer story modules. Stories followed a unified narrative framework that I developed (Client Background to The Moment to The Response to The Results) connected directly to product application funnels.
Webster Bank – turning band content into a trust engine
Read the full case study on how we turned brand video testimonials into customer stories that led directly to product applications.
Leadership & Obstacles
- Defending Discovery & Research-Informed Practice: Overcame early executive pushback from senior leadership and C-suite stakeholders who demanded immediate deliverables. I put early login box and messaging platform concepts into testing, some of them ones I was personally attached to. I let the data disprove my own assumptions in front of the room. That was what tipped the C-suite toward a 9-week discovery and research window, which went on to uncover the deep funnel drop-offs that guided the broader redesign strategy.
- Standing Firm on Quality at the C-Suite Level: Defended a deliberate launch delay directly to the CEO and CFO when third-party vendor code failed technical standards and initial copy fell short. Personally sourced two contract copywriters from my network to remediate the gaps, securing executive alignment to protect the bank’s investment over hitting an arbitrary date.
- Turning Skeptics Into Advocates: Stakeholders skeptical of customer-centered design needed more than a pitch. I created clear swimlanes separating content accuracy from brand tone so both Legal and Marketing could own their piece without stepping on each other. Running a process that was visibly different from past attempts turned early skeptics into advocates.
- Overcoming Compliance Friction: Legal and Compliance teams resisted streamlining application forms. The team introduced usability video recordings to executive review loops. These recordings proved that cleaner layout hierarchy, reduced field count and progressive disclosure decreased human error, reduced drop-offs and lowered legal exposure.
- Shifting to Outcomes-Based Roadmaps: I replaced rigid release schedules with living UX roadmaps aligned to user confidence and business value. Nielsen Norman Group later recognized this operational framework and used it in their trainings.
Deep Dive: Shifting to Outcomes-Based Roadmaps
Read the full case study on how I shifted the organization to outcomes-based roadmaps. - Crisis Execution (PPP Loan Launch): When the pandemic struck in April 2020, the foundational design system enabled rapid engineering of a digital Paycheck Protection Program (PPP) loan portal under federal deadlines. The team launched a multi-step commercial application in days while adapting to real-time regulatory shifts.
Project Beacon – navigation test – used to disprove my own assumptions and demonstrate to c-suite leaders that “we are not our users”
Webster Bank – brand messaging testing results
Webster Bank – brand messaging testing results – verbatims
Why It Mattered
- Enterprise UX Capability: Transformed design debt into an in-house UX research, content strategy and design capability, eliminating reliance on external design agencies.
- Cross-Channel Scale: Scaled foundational design system standards across web, mobile app, ATM and branch environments.
This work won Hermes Creative Award Gold and dotCOMM Gold, both in 2020.
THE OUTCOME: Award-Winning Enterprise Rebuild & Unified Visual Craft
Websterbank.com fixed rate mortgage page redesign. I designed the calculator in partnership with the head of the mortgage team in the bank’s customer call center. We made sure to design it around actual customer feedback and conversations over time, and strove to deliver something that made a complex concept easier to digest through a clean and clear design.
Websterbank.com location finder redesign. This included information for visitors including when a branch opened or closed, in real-time (i.e. “closes in 20 minutes”)