Conversational Interface Redesign
Senior Experience Designer / Project Lead
With 3 years of user data at our disposal, it was recognized that a complete visual and functional refresh to the Erica interface was becoming necessary.
Challenge
Originally the Erica interface was designed to stand alone as its own channel. The goal was to differentiate it from the default Bank of America app.
Erica has now become a central strategic pillar of how the bank interacts with its customers and the mobile app itself is changing in response. Erica is now fully integrated into the app as the main source of assistance or help for users. However, visually Erica remains disconnected and this is breeding confusion and dissonance with users that should be avoidable.
Similarly, from an interaction and usability perspective we also have new data derived from the way in which users prefer to interact with Erica.
The original concept leaned strongly towards the use of voice when interacting with Erica. As a result, the overall design of Erica’s features often prioritized a conversational feel and structure. However, we now know that users overwhelmingly prefer to engage with Erica via onglass affordances, with ‘typing’ into the chat field a distant second. Voice on the other hand represents a fractional number of Erica interactions.
The original patterns in the Erica interface did not account for this behavior and the result is a pattern library that is not optimized for the manner in which users engage with it.
Discovery
It was clear that a main objective would be to have Erica’s visual elements feel fully integrated and consistent with the rest of the app. However, part of the work was to make sure the interaction patterns were suitable and aligned with how our users are interacting with the interface now that we have 3 years worth of data.
We set out to fully understand how our interaction patterns and affordances were performing. Through analysis of existing usage data and completion rates for different Erica flows, coupled with new unmoderated remote task-based studies that test specific affordances we confirmed some of our hypotheses.
We found that over time the Erica interface and its affordances had become inconsistent - what users expected would happen on tap was too often inaccurate.
Objectives
• Prioritize the user experience through simplicity and consistency across all our patterns.
• Optimize all interactions for a multi-modal, conversational interface.
• Leaner and more flexible design system.
• Establish clear design guidelines and documentation
I was the project lead for the Erica redesign.
Along with the interaction design, documentation and guidance for all interface patterns and collaboration on visual design, I was in charge of coordinating and leading recurring meetings and standups within the design team, with leadership for progressive approvals and with dev partners.
Design
Building on the work from the discovery stage, I began to inventory every single specific element or pattern in the Erica interface.
I wrote completely new guidance for each element in order to properly understand how everything was functioning and more importantly, how everything interacted with each other. This process would also help me identify redundancies and areas in which it would be possible to consolidate and reduce the overall footprint of the design system.
For certain patterns I began to experiment by breaking them up and evaluating the different ways in which the same task could be presented and how it would impact the overall experience.
A significant design question we wanted to answer involved the presentation of content and whether it should appear within a card/container or just directly on glass. Which pattern is better suited to a ‘chat’ interface such as Erica? How should CTAs be presented?
One of the main objectives was to make sure all interactions and patterns are optimized for a conversational and multi-modal experience. Addressing the problem we found regarding inconsistent patterns is an important step to meeting this objective.
A strong design priority I wanted to make sure was upheld in the redesign and going forward was that any affordance that would result in a user utterance (chat bubble for the user) should be easily identifiable as a ‘chat’ affordance to the user based on its visuals and copy. We experimented with different variations of visuals and guidelines for the content strategy and how the text should clearly be written from the user’s perspective.
As we defined the redesigned patterns, every individual element was thoroughly tested before proceeding. Early tests could involve simple questionnaires to fully featured prototypes and moderated usability studies.
Solution
The fully redesigned Erica interface delivered on all the principal objectives of the project. The Erica interface would now feel integrated visually with the rest of the Bank of America application, the patterns are more consistent and designed to take advantage of the chat presentation.
I also turned all the guideline documentation that was created during discovery and early design stages of the project into an Invision DSM (Design Management System). The Erica DSM houses detailed instructions and guidelines about all of Erica’s interface and interaction patterns, clearly defined copy and tone guidelines for content strategy, as well as every high fidelity visual element present in the Erica interface.