CustomGPT.ai

A RAG (Retrieval Augmented Generation) optimizer that is used to customize LLM on any business website or knowledge base for the purpose of resolving user queries.

Basically, it’s an AI agent who’s read all your company manuals, documentations, blog posts and is willing to go an extra mile to let users know all about it.

What

AI Driven Conversational Agent, SaaS Web App

Category

Artificial Intelligence, RAG, LLM

When

Oct 2023 – Todate

About CustomGPT

CustomGPT is a RAG (Retrieval Augmented Generation) system that combines LLM with authoritative source like sitemap of a website or SaaS documentation and provides live chat capabilities without human intervention.

The good stuff is it is secure, private and as professional as you configure it to be. You can create your own personas, customize conversation style, language and integrate with other platforms.

About CustomGPT

My Role

I was hired on the team to design their very first analytics page where users can put tabs on their bot and gain insights. However, my role expanded to UX/UI designer, working in a team environment with developers, marketers and project managers, resolving design inconsistencies and creating UI for new features.

New Customer Intelligence

With the introduction of new customer intelligence feature, our objective is to expand the analytics and build a suite that would enable our customers to analyze all sorts of information from conversations between their chatbot and their customers.

This feature can create immense value for the businesses – they can know everything their customers talked about – and have that analyzed and displayed in a digestible form.

Main Highlights of the feature

The users will be able to learn about the following insights about their customers and clients:
  • Context of the conversation
  • Intent of the user
  • Emotional score based on the tone of the user
  • Ethical score

UX Considerations

This feature could not be contained on a single screen therefore from the UX stand point, it required to have a separate flow where user is given a broader picture in the start, and it narrows down gradually to feed more detailed information.
CustomGPT bots are also actively used in the interface to prompt the user and help applying filters to the bring out the insights.

Enterprise Access Control via SSO

As the name suggests, this is an Enterprise feature where organizations can create a bot based on their documentation and then publish it to their users online to access this bot via SSO.

Best Use Case

The best use case for this feature is in the education industry explained by the following user story.
  • I’m a university professor and I created bot for my course using my data, and my course is called CS101.
  • Any student who enrolls in my course CS101 should be able to access my bot and query it.
  • Students who are not enrolled in that class shouldn’t have access to my bot.
  • I don’t want CustomGPT to create student’s account in their system, nor store any data about students. CustomGPT should ask students to login via SSO, and University’s IdP decides who’s allowed to use the bot and who’s not.

UX Considerations

This feature was designed in two parts:
  • First one is the Advanced Access Control configurations under the project settings. In order to enable this the user must have SSO configured.
  • Second one is the SSO configuration which are global and managed under the user profile.

Analytics Page Design

My very first task was to design the analytics page for the CustomGPT web app to measure the following metrics:

  • Number of Queries
  • Response score of the bot
  • Feedback give by the user
  • Daily Weekly & Monthly breakdowns
  • User insights and location

The Page Design Workflow

CustomGPT Founder and CEO Mr. Alden Do Rosario had a unique workflow for the design of analytics page. He shared with me a series of ChatGPT prompts, which were aimed at explaining to the AI the schema and database ORM (object relational mapping). 

In return the ChatGPT provided us with a Conversation Analytics Dashboard Plan which was then polished and designed in Figma. The prompts can be seen here.

I learnt that AI can be leveraged at an initial stage of idea generation as a perfect brainstorming tool. With just one line of prompt the ideas start flowing. With a little intuition and proper prompt engineering the UX designers can come up with really clever and out of the box ideas.

After several design iterations, the image on the right shows the final analytics page design that was finalized. 

The Problem

Although I completed the task of analytics page design right away but at the same time I informed the team of serious issues and short comings with the design file.

Plus due to lack of a well structured wireframe and prototype, developers were forced to guess in order to ship the MVP. This introduced a lot of inconsistencies between The Design and The App.

PROBLEMS

  • There were issues like inconsistencies in the design components, color schemes, layouts and variable definitions. The biggest concern that developers raised was the lack of structure in layout.
  • Designer who previously worked on the project used the Vuexy Design system. Instead of linking the design system through Figma library the designer copy pasted the elements and components which resulted in detachment from the main design kit. A mess really!!
  • The next design challenge was to sync every change in the app UI with the current design file. Correcting both ways in order to bring every stakeholder to the same page, consistency was the key.
  • The final step in this was to create a mockup / prototype of the app in Figma so that developers can feel comfortable with implementation of the designs.

The Solution

There was no quick solution for the range of issues here. So I needed to proceed step by step in order to solve one problem at a time.

SOLUTIONS

  • The very first task was to update the design system with latest component changes and layouts. Plus define new variables for sizes, spacings, corner radius, layout structures and scroll behaviors which were not there before.
  • Once the design system was sorted it was time for pain staking and boring task of updating each design element in the design file and link it to the proper Figma library. This was done even to the last icon and typography elements which took some real attention to detail.
  • The task of updating design elements and synchronizing with the live app went simultaneously as the developers were consulted for the updates in live app.
  • The final step in this was to create a mockup / prototype of the app in Figma so that developers can feel comfortable with implementation of the designs and adding new features.

© Copyrights 2024 | 🍥Dezine Crafts