I. BACKGROUND | PROBLEM OVERVIEW
What was the problem?
COVID-19 has provided a big hit on the United Stated economy both physically and psychologically—leaving some people without jobs and income to support their living expenses. This caused a lot of panic in understanding the rights present for homeowners and renters within the US.
Fannie Mae being one of the leading mortgage loan purchasers, wanted to be at the forefront in helping those affected by COVID-19, along with other issues that may arise, to ensure both homeowners and renters had all of the answer and resources needed to get the help needed. This resulted in the current Fannie Mae “Know Your Options” (KYO) website. While the goal was to get the content available to the general public, the team didn’t take the time to ensure some core elements like information architecture—making it very difficult for users to find the information they needed. This created some frustrating feedback, more calls to live agents, and users not getting the help they needed. We had to figure out something to help guide our users to the right information, faster and easily.
Through several interviews of website visitors and internal proxies, we found out that an overhaul of the website may not be enough—thus, the Fannie Mae “Virtual Assistant” was born. We aimed to create a chatbot that used Artificial Intelligence, with natural language, to help guide users down various flows resulting in providing the resources needed to make informed decisions during this trying time. Because the majority of the information was already on the KYO website, we were able to leverage the current content to help streamline the creation of the chatbot. We also needed to make this tool mobile-friendly as users may be coming from various platforms and needing the information quickly.
.
Suggested text interaction in the Virtual Assistant chatbot live on the KYO website.
II. TEAM | WHO CONTRIBUTED TO THE PROJECT?
Core Team:
1. Product Owner
2. Product Manager
3. Lead UI/UX Designer
4. Researcher
5. Marketing
2. Product Manager
3. Lead UI/UX Designer
4. Researcher
5. Marketing
Subject Matter Experts (SMEs)
6. Single Family (Homeowners)
7. Multifamily (Renters)
8. Call Center (Live Agent)
6. Single Family (Homeowners)
7. Multifamily (Renters)
8. Call Center (Live Agent)
My Role:
Lead the UX/UI of the project, and act as Creative Director on the visual design and language direction.
1. Aligned with product to help create the vision and strategy of the project
2. Partnered with different SMEs to understand each area of the personas experience
3. Partnered with research to conduct user interviews and usability tests
4. Create high-level user journey exercises with product and SMEs
5. Partner with Marketing on tone-of-voice language and ensuring the visual design adheres to brand standards
6. Partner with development and API vendor of the chatbot tool
7. Responsible for overall user experience throughout each guided flow
2. Partnered with different SMEs to understand each area of the personas experience
3. Partnered with research to conduct user interviews and usability tests
4. Create high-level user journey exercises with product and SMEs
5. Partner with Marketing on tone-of-voice language and ensuring the visual design adheres to brand standards
6. Partner with development and API vendor of the chatbot tool
7. Responsible for overall user experience throughout each guided flow
III. PROCESS | DRIVING TOWARD A SOLUTION
Because our initial interviews with website users and internal proxies helped conclude the direction of a chatbot, I was ready to work with the product owner to understand how we would make this work.
A. Understanding the user flows
Since the content was going to be leveraged from the current website, I wanted to understand from the SMEs what the high-level begin-to-end goal of each of our personas were (Homeowners and renters).
High level persona flows mapped out with Product Owner and business SMEs.
I took some time to sit down with a key stakeholder from each side of the enterprise (Single Family and Multifamily) to help craft out a general flow the user would take and what the alternate routes could be. This would help me in crafting out the language flow of chatbot, as well as, define what the end goals were for each type of user and their exit points. The picture became clear that we weren’t meant to answer everything within the chatbot, but to point the user in the right direction for them to be more informed in what they would need to do to solve their current issue.
By focusing on the high-level flow from beginning to end, the vision became clearer and made it easier to get more granular into specific flows.
Building the conversation
In order to make the experience more natural, we wanted to build our scenarios based on prescriptive QA. The would make the chatbot learn faster and also guide the user easier, as we would only be answering specific questions based on the content we already had to help them with their issues.
We had the business SMEs plot our possible conversation scenarios in excel, then we mapped it in a more visual style to iterate and build on, that would serve as the foundation of the Q&A flow within the chatbot.
B. Sketching concepts
With an idea of what the tool would be, a chatbot, I was able to begin developing low level sketches of what this tool could look like.
C. Mid-fidelity design
Because of the timeframe, I wanted to begin pushing toward testing some of the designs as soon as possible. I aimed to produce a few mid-fi screens within Sketch, while using Invision to quickly prototype.
D. Usability Testing
8 Consumer proxy interviews (renters, homeowners) | 18/75 Consumer surveys received/requested | 3 Rounds of feedback from MMI (Mortgage Counselor)
Testing included:
1. Usability
a. Can you find it?
b. What are your expectations?
2. Guided Tour: Feedback on scenarios
3. Consumer Sentiment: Feels the comfort of a warm hug after interaction
E. Refined design from feedback and test again
We took the feedback from testing and synthesized using common UX methods to align on where we wanted to iterate from the mid-fidelity.
We retested to ensure the modifications resonated well with our proxies prior to the MVP release.
F. Final MVP Product
The above design iterations tested extremely well with users and allowed us enough information to release toward MVP. I worked with our Marketing and Brand team to ensure we aligned not he visual aesthetic since this product was external facing. Here I played a cross roll between UI/UX and Creative Direction to ensure a clean blend between functionality and design.
Actions Taken Based on Feedback:
1. Conducted a soft launch
2. Made product revisions (including styling changes, conversation flows, and launch area message)
3. Added bot tutorial
4. Influenced user behavior through content and digital imagery
5. Created interactive/educational videos, downloadable digital pamphlets and calls to action
Revised specific flows (this one being the path to speaking to a live agent).
A revised floating action icon and timed bubble message to help invoke the user when a guide is needed.
Revised design of chatbot aesthetic (with branding applied) and modified conversation flow to make the dialogue more natural and warm to the user—adding feedback and alternation CTA options.
IV. METRICS | HOW WELL IS THE PRODUCT PERFORMING?
Engagement and usage from visitors to the KYO website and chatbot are well beyond we was expected. The tool averages roughly 3.5K questions asked from users daily.
Housingwire chose to interview our VP of Innovation on the ways our tool is proactive in helping homeowners and renters solve their housing needs. Read the article here.
