Bank of America
Improving Online Banking Experience Through Contextual Search

Ivory Assan

Shira Bauman

Matthew Hsieh

Gaby Moreno


UX Design Lead

Visual Designer


Jan - Aug 2014


Literature Review

Competitive Analysis

Contextual Inquiries

Affinity Diagramming




Rapid Prototyping

Print Design/Book Design

The challenge: improving digital experience to generate online sales

As one of the four largest banks in the US, Bank of America faced a challenge: moving sales from physical branches to their online portal. To a great extent, their website functioned as an information resource and account management center. Consequently, fewer customers fully used the spectrum of services available online.

We worked with them on this 7-month project to tackle this problem by creating a postive online experience. We did comprehensive user research to collect needs and pain points, and then brought our ideas to fruition after rounds of validation and iteration.

🏆 Three patents filed 🏆

2 years after this project was done, good news came through - we were able to file three patents for our innovative design solutions. A good closure for the well-spent time!

Project timeline

User research to find problems and gather insights

We spent the first 3 months gathering customers’ stories to understand how they interacted with the bank and their various needs. We were particularly interested in seeing if customers are taking advantage of everything Bank of America has to offer and how much they interact with Bank of America in physical bank branches as well as online.

Field research "pyramid" summary

Field research pictures

We conducted a literature review and territory analysis to understand the existing domain. We then set out on field research with participants ranging from 21-year old college students to 60-year old parents. We used research methods such as directed storytelling, a diary study, and bank branch observations to collect data. We consolidated all this data and synthesized them into findings and insights. Based on our insights, we created visions to guide us through the summer and presented to our clients.

Timeline for opening a checking account visiting the branch vs. using the website

Affinity Diagramming

After gathering our data, we put our notes on individual post-it notes and created data buckets in the form of an affinity diagram. This affinity diagram allowed us to naturally group related ideas. After grouping ideas, we created higher level data buckets that encompassed the overall messages and themes of the various groupings. Our completed affinity diagram helped reveal our main findings and insights.

In the process of making the epic affinity diagrams

Research findings

By analyzing and synthesizing the data we gathered, we were able to get to the heart of the matter and see what our research was telling us. This led to four insights that encompass the overarching themes of our data. These realizations will help us formulate what specific areas and problems our solution needs to target.

Iteratively polish and craft design

Concept generation

Concept generation involves quickly brainstorming ideas and then determining which ones most interest potential customers. In order to validate the interest and need of concepts, the speed dating method is used to gather quick feedback. We initially generated concepts with our clients and eventually did 2 rounds of speed dating with a total of 17 ideas tested on 26 participants.

Storyboard deck for guerrilla user testing


We created three personas reflecting the three main groups of customers we targeted at: young single professional, head of a family, and couples.


After validating various concepts with participants and clients, their feedback led us to create and develop prototypes. We went through 3 rounds of paper prototyping, 2 rounds of medium fidelity, and 2 rounds of high-fidelity. The low-fidelity prototypes focused on concept validation and simple usability. Our medium-fidelity rounds were more concerned with testing usability and flow between screens. Lastly, our high-fidelity prototypes focused on content and visual design.

Usability Testing

During our medium-fidelity prototyping phase, we got the chance to go to Bank of America's headquater to test our prototype's layout with a scenario. It consisted of 2 rounds with a total of 12 participants. For both rounds, we used Sketch and Marvel to create a clickable prototype that participants interacted with inside a web browser.

Mid-fidelity usability testing feedback

The final prototype

Our final solution was an online interactive search tool that allows customers to receive personalized information and easily speak with banking specialists. It collects customers’ personal details to create a personalized experience, provides guidance and validation by suggesting information, and then giving customers direct access to banking specialists.

Asking household profile to customize the experience

Aiming to replicate the in-branch experience of specialists learning about customers’ needs before making product or service suggestions, we collect personal details and provide tailored search results and recommendations based on customers’ information.

A contextual search experience

Providing search suggestions to help customers explore topics of interest and update the search results they are interested the most based on the input of customers’ personal details.

Direct access to bank specialists online

Customers can speak with financial counselors without visiting a banking center to finish their purchases. All the documents and actions customers have done on the website will be loaded into the video chat session for the counselor to review.