Conversational UI

Role

  • Design Lead
  • User Interface Designer
  • Conversation Designer

Outcomes

  • Custom designed, chat-centric, user interface
  • Unified, enterprise-wide, conversational front end
  • Millions of dollars further invested in conversational practices

Lessons

  • Know thy chat persona! It sets the foundation for many UI dependencies
  • Mobile vs desktop or mobile and desktop? Follow the data
  • Start with your chat intents, map them to specific UI components

Story
-- --
When I describe my work as Conversational UX Designer, I talk about two areas of influence: 

  1. conversational flows and scripts- aka the turn by turn design of the actual conversation, and 
  2. conversational user interfaces (CUI)- or the UI specific container for which the conversation will live. 

The CUI or chat client, is the delivery vehicle for the conversation design. It's for that reason that both of the above practices are inherently tied, and it's why I think it's important to be involved in both. 

The financial institution for which I did this particular work was relatively new to conversational AI, let alone conversational UX design. The project came off a program building phase where we developed several proof of concept voice and chat experiences. The organization wanted to explore conversational AI to see if it could in fact help reduce call volume, help users self-serve, and increase satisfaction.

Throughout our jouney of exploration, business units took notice. Seeing the opportunity for conversation to improve experiences within their line, they began reaching out to our fledging team. Met with disparate groups seeking custom solutions, we quickly saw a need for centralized conversation services and a custom conversational vehicle that was scalable and adaptable to their unique needs, whilst maintaining our standards for experience design. 

The slider at the top of the page offers a view into some of the initial wireframing work and as well as a version much closer to production. Of course, please note that branding, including images, such as avatars, have been scrubbed.

Process
-- --
Discovery + Analysis
The design process took several months, beginning with a heaping dose of formative research and competitive analysis in our first steps of Discovery and Analysis. Naturally, we wanted to look at our competitors, as well as those outside our industry. 

 

BoA
Chase-1
Ally
AMEX
US-Bank
Capital-One

Ideation
As we moved into Ideation, we held design thinking workshops that helped us formulate ideas around the use cases and requirements. With project stakeholders, I facilitated exercises like Crazy 8s to brainstorm UI elements and concepts. 

A result of these workshops included a set of criteria for the header. We knew we needed it to be...

  1. Different - stand out not only amongst the competition, but also amongst the existing institution's assets 
  2. Inviting - users are coming here in search of answers, let's help put them at ease and instill a sense of comfort and tranquility
  3. Dynamic - conversation is ever changing, let the UI reflect that movement
Ideation-Crazy-8s

Prototyping + Testing
From there, we headed into Prototyping and Testing, building on ever higher levels of fidelity. During this time, we rapidly iterated and spent entire sprints focused on specific components, such as the header and animations. Additionally, the iterations reflect the several rounds of user feedback we solicited as a means of refining and validating our concepts. 
 

Mobile-Chat-Read-Receipts
Mobile-Chat-Red
Mobile-Chat-Start-MVP
Mobile-Chat-Start-MVP-14
Mobile-V4
Active-States
Iteration_01_02
Iteration_04_02
1Iteration_03_05
Iteration_03_01
2Iteration_03_01
Desktop-Chat

The above are examples of various iterations, mostly highlighing the evolution of the header

animation_500_koaasxhb
Expand
Collapse
Thinkers

The above are examples of various animations we explored to help create a sense of dynamism

--
Ultimately, having settled on the foundational components, we could move onto UI components mapped to specific intents, such as transaction history and card activation, as shown below in high fidelity. 

 

Transaction-History-3
Transaction-History-4
Carousel-Card-Activation
Carousel-Account-Selection

Conclusion
-- --
As of this writing, the chat client is in the process of being developed. Concurrent to that development work, is the work of integration, or figuring out exactly how we want the chat client to fit within the bank's mobile application, which will be the first to see it.

Moreover, despite having a clear voice and tone for the conversation itself, the bot is still missing a name! In hindsight, we wished we would have developed this in the beginning, as we gathered requirements. But our team has since contracted with a well-known marketing agency who is in the process of developing the name, and a marketing plan, in conjunction with the production launch of the chat experience. 

Perhaps most importantly, we've used this product to evangelize the work of our conversational AI and UX design team. It has lead to not only excitement from bank leadership and employees alike, but increased investment in conversational experiences.