Go back

Led the design and front-end development for a pre-ChatGPT smartbot

SmartFAQ

SmartFAQ

Innovative application that provides intelligent chatbot experience that incorporates a dynamic knowledgebase Powered by Amazon LEX and Elastic Search that utilizes Natural Language Processing (NPL) to engage users with interactive FAQ support experience. I was tasked with extending the product and allowing quick and seamless integration with our client's application. This was design before ChatGPT widely known!

download the pitch deck

The Requirements

  • Usecase 01: Organization A has over ten different software products developed by in-house tech teams plus many public-facing websites. All have static documentation or FAQ, which have been minimally updated over the years. In addition, the support knowledgebase can be scattered in multiple sites and formats. Product support rely on expensive product support personnel, with high turn-over rate and ever-climbing costs.

SmartFAQ can be embedded inside each of those software products and websites, with matching themes to each product. Support knowledgebase can now be centralized in one location, and is updated in real-time, in response to customer queries and requests. The integrated AI chatbot runs 24/7, answering most of customers’ questions, lessening the support burden on the support team. New support team members can be quickly trained on the product, as the knowledgebase is now centralized and can be smartly queried.

  • Usecase 02: Organization B recently released into Production a internally developed software application. Executive management has been surprised by the target users’ resistance to the application adoption. In addition, the support team is inundated by a huge volume of support requests, from simple print problem to complicated workflow algorithms.

SmartFAQ tracks users’ interactions in association with the supported application, including context-sensitive FAQ requests within each section of the application. These insights can help identify application areas where users have the most questions and requests. Custom dialogs to provide answers to more simple support requests via the AI Chatbot also alleviates pressure on the Application Support team, allowing them to concentrate on more complex support requests.

  • Usecase 03: Organization C needs to communicate on daily (periodic) basis its priorities (such as pushing certain products to sales team) or daily update of loan rate etc.

Certain designated super user of SmartFAQ can act as someone who updates these messages on the daily basis. All regular users of the software application, from a few to millions, can quickly do a daily query via voice or chat or the FAQ page to tune in the changing priorities or memos. In essence, SmartFAQ can act as a centralized memo distribution point.

Designing for scale

A key challenge of this project was integrating chat functionality into our client's existing suite of product, which previously focused on asynchronous communication. We had to answer several questions: How would chat interact with our reporting tools/can it generate some BI dashboards? How could we prevent users from feeling overloaded by message volume? And most importantly, how do we make it run quickly while trying to limit the amount of data we feed to this bot.

I fostered a highly collaborative environment, involving engineers and leadership throughout the process. This ensured that every decision we made was not only technically feasible but also aligned with the company's strategic direction and emerging market trends. Given the distributed nature of our team, a core part of my approach involved utilizing sketches, prototypes, and video feedback to facilitate clear communication and gather input.

Research

The challenge of this application is to create a VERY intelligent chatbot that the users can interact with as well as having a supporting FAQ built in. In order to know what type of "intelligence" that powers this application, I had to research all the latest "AI" technologies including:

I did a deep dive of each of these services to see how they made their bots "intelligent", but also easy-to-use

The client is very particular in making this application "adaptive". That means, we inject our application to theirs and create a handshake connection. What this ultimately means is we had to make it lightweight, responsive, and customizable.

Sketch & Design

Design Solutions

  • Utilize ElasticSearch and LEX to create a dynamic FAQ and AI Chatbot
  • Create widgets: Chatbot, FAQ panel that can be maximized
  • Client wants admin widget to manage FAQs for advanced users w/ permissions
  • Themeing variables for customizations

UX Taskflow

Taskflow

Wireframing

Wireframe

Visualization Attempts

Visualization attempts

Design Summary

Chatbot Experience

  • Q&A search combines textual analytics, language detection, keyword equivalents to return best matched answer
  • Customized greeting and good-bye messages
  • Tightly coupled to FAQ/Knowledge base
  • Full support of NLP (Natural Language Processing)
  • Support text and voice questions
  • Multi-language support
  • Cloud-based, scalable to the largest enterprise organization’s needs

Chatbot experience

FAQ Experience

  • An integrated platform of A.I. chatbot and clean application interface to ease the process of creating and maintaining the documentation for a software applications.
  • Documentation and FAQ are updated in real time, assisted by Insights into knowledge base gaps and customers’ questions and requests.
  • Seamless integration between search and dialog

FAQ experience

Admin Experience

This portal enables admin users access to their knowledge base:

  • Modify and create intent and QnAs
  • Create users and permissions
  • Set agent settings like greeting messages and hang-up phrases
  • Stylize their app to anything they would like

Admin experience

Admin experience

Development

This application is developed using Angular 7 as the front end framework. For backend, our developers used .NET Framework In this stage of the design process, I assisted the Front End Dev with coding the UI components and web views.

Technologies used

Tech used

Theming & Customization

For themeing, we utilized SCSS for our front end, therefore changing up the theme color is very easy and can be done for any clients.

Theming