Project Creation & Deployment Flows

Project Overview

Due to shipping urgency and improvised dev work, the MVP had many flaws and loopholes that became evident within a few months of use. Plus the addition of new features like various integrations and deployment capabilities were needed.

What

CustomGPT

Agent Creation & Deployment

When

Mar 2024 – November 2024

The Problem

The problem with the current design was that project creation, project settings, project deployment (then called sharing) and integrations were all intertwined and mixed together with no clear demarcation or differentiation.

This led to a very complex interface for any new user to understand let alone operate and achieve any positive outcome from it. Following comparison shows the earliest version of project creation that is now obsolete against the most current version of it.

Obsolete UI - Create Project

Current UI - Create Project

The Goal

The goal of this project was to bring clarity to the user by simplifying choices available to the user at any given time. So to achieve this it was decided to re-imagine the whole user journey in such a way to maximize user focus on single task and progressively disclose further options that are more advanced and involve multiple considerations in decision making.

The Constraints

As we were dealing with live app and active subscriptions of paid users therefore it was not appropriate to ship major UI changes in single go. Therefore, we had to introduce changes in small chunks prioritizing the worst affected areas which was project creation and deployment user flows.

Following comparison shows the obsolete version of project sharing against the most current version of Agent Deployment.

Obsolete UI - Sharing

Current UI - Deployment

First Iteration

For the first iteration, the user flow was divided in 3 distinct sections.

1. Project Creation

3 methods available for user to create new projects
A breadcrumbs view at the top to indicate progress
Limited options available in the sidebar

2. Project Settings

Appearance, conversation, AI model selection and security settings were made part of project creation
Breadcrumbs continue from the previous stage

3. Project Deployment

Large card thumbnails were used to show different methods of deployment
Integrations and link sharing was also included

Following prototype shows the first iteration of design for the 3 stages of user journey. Large screens are preferred for best viewing experience OR follow this link 🔗 to view in Figma.

Second Iteration

For the second iteration major expansion was done in the project settings section with the addition of tabs and removing the breadcrumbs. This made it easier for the users to clearly differentiate between project creation and project settings. Major UX considerations and UI decisions were influenced by the following points:

- Appearance & Persona settings were made part of the project creation flow
- Rest of the settings were grouped according to semantic functionalities such as conversation, citations, intelligence, security and advanced settings.
- These groups were easily identifiable by the new tabs in the settings screen.
- New UI for AI model selection was added to make the experience more fluid and intuitive.

Following prototype shows the second iteration of design starting from “Conversation Settings”. Large screens are preferred for best viewing experience OR follow this link 🔗 to view in Figma.

Third Iteration

Third design iteration was mainly focused on the deployment flow. Following major changes were introduced in order to make the user experience more intuitive and minimal.

- After successful use of tabs in settings pages, tabs were also introduced in the deployment flow
- This helped bringing more clarity to the user options by displaying important features above the fold without the need of scrolling
- Deployment options were further differentiated using a sidebar under the settings tab
- These changes simplified the whole UI considerably and at the same time was much more clear to the users.

Following prototype shows the third iteration of deployment flow. Large screens are preferred for best viewing experience OR follow this link 🔗 to view in Figma.

Final Iteration

Final iteration was also majorly focused on further simplification of deployment flow. In this step the sidebar list of deployments was removed and cards format along with modals were introduced. This change was more interactive and only showed deployments that were currently active in the user account. The complete design is current and live on the web and is held due to privacy restrictions. Following is a comparison of the screens that points out major differences.