AI Chatbot Design

Design an AI-driven virtual assistant for a financial firm's website to answer FAQs, provide resources, and recognize opportunities for positive reviews on Google Maps.

Team
1 Conversation Designer (me), 2 Developers

Client
Strategic Planning Group

Methods
Prompt Engineering, Competitive Analysis, Prototyping, ARIA code

Tools
Voiceflow, Figma, ChatGPT, ANDI

Overview

Strategic Planning Group (SPG) is a financial advisory company that specializes in retirement planning and wealth management. I worked with them to develop a chatbot for their self-managed Wordpress website to improve customer service, attract new clients, offer self-serve options, and recognize opportunities for positive Google reviews. After a conversation with the company's executives and website manager, I determined which of their business objectives could be helped by an AI-enabled chatbot. This was a unique project because in addition to WCAG and Section 508 guidelines, I took special care with my prompts to prevent the bot from providing personalized investment advice.

Mockup of spgutah.com on a laptop that shows chatbot prompt

My Role & Impact

I approached SPG about doing the chatbot because the company seemed like a good candidate for it (their website touts a dedication to technology and future-forward thinking). I focused on making the customer experience as smooth as possible. My goal was to help users easily get financial information without having to call in or wait for the next business day. I used a mix of research techniques to understand what the users and business needed, and then designed conversations that felt natural and clear. By addressing common questions upfront with buttons, I believe the company will reduce calls to administrative support staff while improving overall user satisfaction. It was all about making the process direct and straightforward, while still keeping it personal.

 Initial Considerations

Before speaking with the staff at SPG, I spent time on its website as well as that of its famous partner, Fidelity.com, to come up with ideas. My initial presentation to them considered the following opportunities for the chatbot:

  • Lead Qualification & Appointment Scheduling Save administrative time by letting the SPG Assistant chatbot ask prospective clients qualifying questions in a friendly yet trustworthy brand voice

  • Investopedia Add credibility by allowing the chatbot to answer questions about general finance terms and investment strategies by utilizing the Investopedia Financial Term Dictionary site map and the firm's historic blog posts as the knowledge base.

Revised Intents

During the Discovery phase of the UX human-centered design process, I learned from the client that their business needs and pain points differed from those I'd expected. I edited the list of priorities to the following. These became the Intents I entered in the builder during the Develop phase:

  • Tax Forms It turns out that come tax season, the office staff fields many calls from clients requesting their annual tax forms. It uses administrative time during an already busy season. And the answer is always the same: download them yourself. For that reason, I programmed a self-serve workflow for answering tax questions that included the universal dates and link that the company usually emails to clients who contact them. This has the benefits of providing 24/7 support for customer as well as reducing the need for human intervention, thus saving on admin costs, especially as the firm grows.

  • Frequently Asked Questions Many of the website's FAQs are about SPG itself, such as the services it offers, its fee structure, and who its customers are. I used the site map for the website to add all of the pages to the chatbot's knowledge base then supplemented it with a few documents provided by the client.

    In the prompts, I made it clear that the AI would not provide any investment advice (picture below). I also provided a thorough disclaimer to the user, outlining the rules against entering personal information of any kind.

  • Debt Consolidation Services SPG does not offer debt consolidation or budgeting services but receives calls about them nonetheless. I programmed the chatbot to identify questions about these services, politely confirm that the prospective client is looking for these services, then provide a link to a manicured page of free and low-cost resources. Again, this benefits the company by decreasing admin time spent on phone calls, providing 24/7 service, and providing valuable information that underscores SPG's credibility. 

  • Google Maps Reviews The best compliment you can give is a  referral. Like any small business, SPG thrives on referrals and positive reviews. Its reviews on Google Maps are superb, but there could be more if they automate the process of posting them. I prompted the chatbot to search for complimentary comments about the company in the user's utterances then programmed a workflow to use ChatGPT/Claude (based on token amounts) to write positive reviews for the company. If the user approves the review, it can be posted right then.

Hands holding a smartphone with the spgutah chatbot enabled

Prompt Example for Chatbot Answer Parameters

AI Persona Prompt in detail

Content

  • Brand voice SPG uses financial giant Fidelity for banking, so I thought it was a good website to use for inspiration. I copied and pasted Fidelity's About Us statement into ChatGPT and asked it to summarize the brand voice. Then I used that description to craft the brand voice for the virtual assistant.

    "The brand voice of SPG is **professional, confident, and forward-thinking** because it aligns with the values and image that a financial advisory firm should project to its clients. SPG’s clients are trusting the firm with their most important financial goals, so it’s essential to communicate a sense of **authority**, **expertise**, and **trustworthiness**. This voice will inspire confidence in both current and prospective clients by showcasing SPG’s ability to handle complex financial matters while emphasizing its **commitment to innovation** and **long-term success**. Additionally, the aspirational tone highlights SPG’s dedication to staying ahead of evolving financial needs, which reinforces its reputation as a proactive and dependable partner.”

  • Sample Scripts I used Figjam's AI Generator to turn my sample scripts into illustrated workflows for the client and their development team to follow the logic of the flow. This also gave me the opportunity to show them where each piece of AI logic was based, so they could better understand why their chatbot wasn't going to spew random information it found on the internet (a common fear when dealing with generational AI for the first time). I also considered edge cases and designed to avoid assistive technology “keyboard traps.” 

  • User Journeys I wanted to design a chatbot that would allow customers to solve their own problems without human intervention. Using Voiceflow and its depth of options, I kept user journeys deceptively simple.

  • Natural Language Processing (NLP) & Natural Language Understanding (NLU) Both inside the Voiceflow software and while writing sample scripts, I utilized ChatGPT and Claude to consider conversation flows, edge cases, fallback scenarios, and understand user intent. I used NLU components inside Voiceflow helped extract meaning from the user utterances.

    Due to the private nature of SPG's services, I also padded sensitive topics with user confirmations along the way to ensure they were receiving relevant responses from the virtual assistant. For example, here's the conversation flow triggered by user utterances including “debt consolidation”and “bankruptcy.”

Accessibility

As part of the project, I used manual accessibility tools like ANDI (screenshot below) as well as UserWay and AccessiBe to assess whether the site was WCAG and Section 508 compliant. It was not. However, I made some recommendations regarding how to fix the problems for a passing score.

The main issues I identified were color contrast problems, unidentified links, and missing form labels, which could have made it harder for users with disabilities to interact with the site. Along with the automated checks, I did a manual audit to verify that the chatbot and site worked smoothly with screen readers and keyboard navigation. In the end, the updates will help the site meet accessibility standards while enhancing usability for everyone.

Screenshot of manual WCAG testing with ANDI

Delivery

screenshot of the website with the virtual assistant activated on the right side of the screen