Back to all work
Bank of America responsive site shown on desktop and mobile viewports.

A responsive design model for Bank of America

How an offsite workshop and working prototype helped Bank of America replace legacy desktop and mobile sites with a unified responsive system.

ClientBank of America
Year2015
RoleResponsive design • Prototyping • Content strategy • Accessibility • Design systems

Overview

The bank’s design leadership recognized that a complete reset was necessary. They engaged my team at Mad*Pow to help modernise their approach to web design and develop a unified responsive model.

The bank’s design leadership recognised that a complete reset was necessary. They brought in my team at Mad*Pow to modernise their approach to web design and develop a unified responsive model.

We took a cross-functional team of the bank’s designers offsite to define and build a responsive proof of concept, intended to secure executive backing for the new approach.

My role

Project lead, workshop facilitator, and interaction designer. I led a cross-functional delivery team of two developers, three designers, and a content strategist.

Homepage transformation: before and after

The legacy desktop homepage was dense, cluttered, and disconnected from the mobile web experience. We rebuilt the layout as a single responsive system, prioritising secure sign-in, account balances, and direct navigation.

Redesigned responsive Bank of America homepage layout.After
Legacy Bank of America fixed-width desktop homepage.Before
⇄
Comparison showing the transition from the legacy fixed-width desktop portal to the unified responsive structure.
60%
Content reduction
Reduced page weight by prioritising essential user tasks and removing secondary content.
10x
Page weight reduction
Significantly smaller data payload across desktop and mobile browsers.
5x
Faster load times
Faster page loads through lean markup, optimised assets, and modular CSS.

“Three days wasn't enough! We’d love to have stayed for a week.”
Eric KarcherDesign Director, Bank of America

Workshop & methodology

I ran a three-day responsive design workshop, bringing together stakeholders from design, content strategy, and engineering.

We used physical paper prototypes and cut-up content audits to work through layout hierarchy, reading order, and responsive breakpoints before opening design software.

Workshop participants physically rearranging and annotating printed content modules on paper.
Hands-on exercises during the offsite workshop.

To move the team away from rigid desktop grids, we printed existing page layouts and cut the content into modular sections. This gave us a practical way to test how multi-column desktop layouts reflow on smaller mobile screens.

Architecture & journey mapping

We mapped user journeys across common everyday banking tasks to identify shared structures and consistent interaction patterns.

Journey map diagram outlining steps for onboarding, account overview, and digital deals.
High-level journey map developed for a primary persona.

Moving from journeys to layouts, the team sketched interface ideas on whiteboards, exploring how tabular statements, transaction feeds, and navigation menus adapted across different screen sizes.

Prototyping & delivery

Static design files were not enough to demonstrate fluid grids, keyboard accessibility, and responsive performance to leadership.

I led the development of a coded, WCAG-compliant responsive prototype covering three primary journeys: the homepage, the credit card application flow, and the customer account dashboard.

Coded HTML prototype showing the logged-in customer account dashboard in desktop and mobile viewports.
Coded proof of concept: responsive member account overview.