Create an AI-driven virtual assistant that will assist consumer banking customers with banking tasks, understanding spending patterns, and providing insights to help them manage their finances.*
The Challenge
Create an AI-driven virtual assistant that will assist consumer banking customers with banking tasks, understanding spending patterns, and providing insights to help them manage their finances.*
*...at a time when the technology was so new that customers didn’t realize they needed or wanted such a thing.
Erica
Bank of America Virtual Assistant, 2017, 2018
Role: XD Director
Hiring Top Talent
Team Building & Management
Design & Editorial Direction
Hands-on Design & Editorial
Collaboration with Product, Technology, Marketing Partners
Erica, Bank of America's virtual assistant, is an AI-powered chatbot designed to help customers with banking tasks through the bank's mobile app. We designed her to provide:
-
Personalized financial guidance: Analyzes spending patterns and offers insights, like upcoming bill reminders and saving tips
-
Conversational AI: Understands natural language, so users can ask questions in different ways without needing specific commands
-
Automation & Convenience: Helps users navigate banking features and functions, find transactions, lock/unlock cards, and set alerts
-
Integration with Bank of America services: Connects with customer accounts, customer support, and financial products
The Visuals
The visual components for Erica were a mix of conversation-based elements (chat bubbles, sound waves, visual cues for audio responses), as well as items that were typical of standard mobile experiences, color palette, tables, lists, buttons, forms.)
User Feedback
Our primary and best method to collect feedback was to stagger limited releases with incrementally larger numbers of users. This allowed people to use Erica with their own accounts and perform natural, unscripted tasks.
Feedback from early rounds was mixed (not surprising since there was limited functionality): This is cool, but why do I need it?
While adoption numbers rose as we added new features, Erica didn't quite replace the daily tasks that could easily be completed in our mobile app. Where she did very well was helping people find answers to things like, "What is my routing number?", "I lost my debit card. What do I do?", or providing insights on recurring charges or spending patterns.
Our Approach
Our team* had never designed for AI before — and there was little documentation at the time about the best practices. As a result, we pretty much built the process as we went along. Luckily, we were operating in an agile environment which gave us some room for trial and error.
Visual Design
Erica needed a design that felt like BofA, but was still unique to her. These meant evaluating chat-specific elements (e.g., microphone) as well as overall look and feel.
Interaction / Conversational flow
Interactions had to reflect a dialog-driven flow where Erica could initiate engagement as well as react to user requests.
Conversational Content
To train Erica, we created and maintained a matrix of all potential questions/answers for each user intent. (Today's AI would make this much easier!)
* So much credit goes to the team leads: Dariane Hunt (Project Lead/ID), Julia Tiedge (Visual Design), Celeste Magee (ID). They were an amazing group to work with!
Conversational flows
The wireframes were fairly templated for Erica, but the focus was really on the conversational flow. Erica had to be able engage in dialogue proactively and reactively.
Proactive: Erica is reaching out to the user with insights, suggestions or alerts.
Reactive: the user has asked Erica for something.
Conversational AI Matrix
This may be where Erica different most from our typical digital projects. In other projects, we only had to think in terms of sentences, paragraphs, tone and style. Here, we had to break that down into intents, potential user utterances, verbal responses, responses on glass, mapping codes, transitional words, etc.
To do this, we set up a content matrix where we wrote, edited and maintained all content-related detail. Additionally, we partnered with our brand team to create guidelines to expand upon the brand tone of voice guidelines.
Fun Fact: The name "Erica" was derived from the bank's name. Bank of AmERICA.
Final Product
The overall UX/UI of Erica encompassed a broad range of considerations. From conversational elements to standard mobile app interactions to different approaches to creating content, it was (at the time) an entirely new way of thinking about the user experience.
