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.
What
SaaS Web App
Category
Artificial Intelligence, RAG, LLM
When
Oct 2023 – Mar 2024
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.
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 Deployment Workflow
With the introduction of this feature our objective is to completely revamp deployment process and make it much more user friendly. We want to be top no-code solution, and we must be accessible to anyone and everyone.
UX Design Goals
In order to make the project creation and deployment process intuitive and easy to understand, onboarding processes of several renowned SaaS platforms were studied and analyzed. The major takeaways and design goals were achieved:
- For context awareness of the users, they need visual cues and feedback.
- Since users are building a chatbot, they need to see the changes happening on the screen.
- There needs to be clear separation between creation and deployment flows.
- All deployment options must be visible to the user at all times so that users can select what’s best for them.
- The same flow should be expandable to “Getting Started Checklist” and “Project Edit” screens.
- In the long term the same design should accommodate other project settings screens for CustomGPT app.
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
- Context of the conversation
- Intent of the user
- Emotional score based on the tone of the user
- Ethical score
UX Considerations
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
- 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
- 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.