August 15, 2024

Folders in ChatGPT

We’re testing SearchGPT, a temporary prototype of new AI search features that give you fast and timely answers with clear and relevant sources.

Overview

In a short time, ChatGPT has become a popular service used by millions every day. From the start, users relied on multiple chats to improve their work environment.
And despite the fact that GPT is no longer just an auxiliary service, but a real Super-app, used across various work areas, it still doesn’t provide any way to organise chats

This is not just a personal opinion, for almost two years now, the OpenAI community has had a feature request to add organisation of chats. In response, several extensions have been created to add this functionality. However, many of these extensions are outdated and incompatible with the latest interface and service features.

So here’s my take on it.

And a couple of screens of the interface

Research

Competitors Research

Copmetitors' research didn’t provide any useful examples.
The only feature, similar to arranging chats was "Projects" in Claude by Anthropic. However the Projects feature was created for different purposes, and the ability to organise chats sorting is more like a side effect than the main idea of it. Besides, it is available only with a Claude subscription.

And a couple of screens of the interface

I conducted several interviews, to understand the users’ pain points with current sidebar

Respondent 1
Viewing GPTs. It’s actually a complete mess, I have more than 10 GPTs pinned Even though I don’t use them very often they cover half of the sidebar, and I have to scroll to see my conversations.
But I also can’t remove GPTs from the sidebar, because then I have to search for them in the GPTs Store each time
It’s also very annoying that every new chat with GPTs is saved in the general chat list, but it is not distinguished from other chats, so I have to read messages inside to understand what chat this is…

Respondent 2
I don’t know, I don’t see any big inconvenience in the way it is implemented now. This is probably because I don’t have many chats and I delete all unnecessary ones. Probably the only thing I would like to see is the ability to pin certain chats to the top, like the favourites…

Respondent 3
I have a lot of chats, and they are constantly mixed up, so I have to look for them. I used to use an extension, but I switched to another browser that doesn’t have it or some analogue.
In addition, there is a question about GPTs, for some reason, every time you use them, they create a new chat, like, actually for some GPTs it is useful, but for many others, it is not very convenient.

I should also mention that along with these respondents, I discussed my idea of how I see the new sidebar, showing them simple sketches. This method proved to be amazingly effective in getting a more detailed and clear understanding of user pain points and possible solutions.

Defining key problems

In short, the main problems of the current sidebar are:

  • Absence of any kind of chat sorting.

  • Users can't save GPTs for further use, only pin the on the sidebar.

  • GPTs take up too much space on the sidebar

  • Lack of differentiation between user conversations and GPTs chats in the overall conversation history

Concept

The moment I got the idea, I immediately made a few sketches where I outlined a few basic variants and wrote down some ideas for additional functionality

It is also important that I immediately thought about the possible problem areas of a particular concept, which allowed me to start the next stages with a stronger understanding of the problem and context.

Solution

New sidebar structure

So how is the new sidebar built? The new sidebar is divided into 4 sections: Header, Tabs, Folders, and Other Chats.

Header section
The header now contains the main sidebar controls. Here are buttons to hide/show the sidebar and a button to search for chats. For example, the Search chats feature, that has been available on mobile for a long time, is finally coming to the web version.

Tabs section / Chats and GPTs Reorganisation
The new sidebar separates user chats and GPTs into individual tabs, reflecting my research that personal chats remain ChatGPT’s main feature while GPTs are an additional one. Currently, users can only pin GPTs to the sidebar, which can clutter the interface and push chats to a secondary position.
That’s why I decided to completely separate Chats and GPTs. Now, users can access their conversations and folders without distractions. 
When switching to the GPTs tab, users are directed to the “Explore GPTs” page, with saved GPTs displayed in the sidebar.

Folders section
The second key change is the ability to organize chats into folders, allowing users to group chats based on their specific needs and purposes.

GPTs tab

As I mentioned, one of the main benefits of the new sidebar is the separation of GPTs and conversations. However, many people use GPTs regularly in their work, so the perfect solution is to allow them to add GPTs to folders. This gives freedom to create folders that perfectly cover any user needs for each task.

The next important step is to prevent users from getting confused between chats and GPTs, for this I added icons. Now it's always clear which is a user conversation and which is GPTs

Here is also a small corner case, if the user creates a new GPTs chat, it will be added to the folder containing GPTs that the user is currently using.

GPTs Tab

The new tab for GPTs provides not only quick access to all the necessary GPTs but also allows to see all conversations with each GPTs. This greatly improves the user flow when using both chats and GPTs

Recent chats

I also considered a corner case: What if a user’s active chat is in a closed folder? In this case, it will remain visible on the sidebar for 5 minutes with a simple mark. Also when the users first encounter this, they will see a message explaining what it is.

Other Concepts

After completing the research, I had a few concepts on how to implement the required functionality.

But why have I come to this option but not these?

I rejected these options with a separate tab for folders after creating low-fidelity concepts and reviewing them through user flow. The problem was that a separate tab for folders forced users to switch between different tabs.

By that time It was obvious that a separate tab for GPTs was needed to optimise and unload the sidebar, and with an additional tab for folders, users would have to switch between three tabs, which would be a nightmare.
So the option with separate tabs was rejected.

The option with folders as tiles looked good on the paper but in the process of implementing a low-fidelity wireframe, it became clear that this option simply did not work and was ruining the overall sidebar layout familiar to users.

Existing Solution

One of the key reasons for the version with folders at the top was that this design had already been proven convenient and effective by millions of users.
Arc browser also allows folder creation directly in the tab list, and many users find this organization method highly convenient.

Smart Organise

We’re talking about an AI service here, so we just can’t leave the process of organising chats to the user alone and not add some magic AI button)

Feature User Flow

So, when a user clicks on the Organise button, a dialogue box appears that allows them to configure how they want to organise chats.

The user must select the chats of what time period he wants to arrange.
Time periods:
1 Only frequently used chats: Only chats that are in the Frequently used chats section will be organised, meaning chats that have been used over the last few hours.
2 Custom period: The user can choose the chats of which period they will be arranged. In this option are available such time periods as Yesterday, Last 7 days, Last 30 days, Months, Years.
3 All chats: The System will arrange all chats for the entire period of using the service.

Do not change existing Folders: This is a separate checkbox, if active, new chats will not be added to existing folders.

After organisation

After sorting, users will see an updated sidebar with added folders and chats. To make it easy for them to understand where changes have been made, newly created folders and chats will be marked.

Tags look like labels for new messages in messaging apps. I decided to use this design because these are familiar elements of the interface, so they will not be confusing for users.

Conclusion

During the design process, I focused on aligning created solutions with users' behaviour and their needs. In addition, I tried to improve the overall user experience by adding additional functionality and considering corner use cases.

The new way of interacting with users, showing them sketches of the general idea and its implementation, turned out to be surprisingly effective for me, and I’m sure that was one of the aspects that significantly sped up my understanding of the direction I should go in.

Thank you for reading.