Chat GPT
How I Taught Users Better Understanding of ChatGPT Using Good UX
Or a case study on redesigning the ChatGPT interface to make its advanced features more understandable.
My Role
UX/UI Designer, UX Researcher
Date
February 2025 - March
Category
Add A Feature
Chat GPT
How I Taught Users Better Understanding of ChatGPT Using Good UX
An explorative case study that merges the world of food delivery with a new fast paced environment.
My Role
UX/UI Designer, UX Researcher
Date
February 2025 - March
Category
Add A Feature
Users Don't Know How to Use Chat GPT Properly
Chat GPT is an AI used by a variety of people. However, since this technology is still very new, users are still going through a long learning curve with questions such as:
"What does the Reason Mode do?"
"I didn't know Search Mode provided cited sources!"
Are a few quotes I unearthed from my interviews. Research shows most users are familiar with normal GPT, despite this, not many are aware it has other modes that
can cater to different lines of work.
Which Is Why I Taught Them How to Use
It With the Help of Good UX
Which Is Why I Taught Them How to Use It With the Help of UX
My process involved adding a new feature panel to hi-light these less used modes and redesigning the interface to have better visibility and educate users. From sketch to full prototype, I created an improved version of Chat GPT's original interface.
Note: This project will only cover the free version of Chat GPT from before March 2025.
This case study start with a simple challenge:
"How might we increase usage of chat GPT?"
I'm a huge fan of AI, using on a daily basis, so it was a great challenge for me to tackle and make it more understandable for others. Which why I started with user interviews, asking people why or why not they use GPT.
This case study start with a simple challenge:
"How might we increase usage of chat GPT?"
I'm a huge fan of AI, using on a daily basis, so it was a great challenge for me to tackle and make it more understandable for others. Which why I started with user interviews, asking people why or why not they use GPT.
I Was Able To Uncover A Variety of Opinions Regarding The AI from Good to Bad
I Was Able To Uncover A Variety of Opinions Regarding The AI from Good to Bad
I Was Able To Uncover A Variety of Opinions Regarding The AI from Good to Bad
Affinity Map (Click to Zoom)
Affinity Map (Click to Zoom)
Affinity Map (Click to Zoom)
Affinity Map (Click to Zoom)
100% Said:
Chat GPT Gave False Info
Users were not happy with how the AI tried to make up information.
100% Said:
Chat GPT Gave False Info
Users were not happy with how the AI tried to make up information.
66% Said:
GPT Was Good A Assistant
Users who used GPT said they liked to delegate their busy work to the AI.
100% Said:
Chat GPT Gave False Info
Users were not happy with how the AI tried to make up information.
100% Said:
Chat GPT Gave False Info
Users were not happy with how the AI tried to make up information.
100% Said:
Chat GPT Gave False Info
Users were not happy with how the AI tried to make up information.
100% Said:
Chat GPT Gave False Info
Users were not happy with how the AI tried to make up information.
66% Said:
GPT Was Good A Assistant
Users who used GPT said they liked to delegate their busy work to the AI.
66% Said:
GPT Was Good A Assistant
Users who used GPT said they liked to delegate their busy work to the AI.
66% Said:
GPT Was Good A Assistant
Users who used GPT said they liked to delegate their busy work to the AI.
66% Wanted To Edit:
Chat GPT's Output
Once Chat GPT outputs an answer, some users wanted to add to it but couldn't.
66% Wanted To Edit:
Chat GPT's Output
Once Chat GPT outputs an answer, some users wanted to add to it but couldn't.
66% Wanted To Edit:
Chat GPT's Output
Once Chat GPT outputs an answer, some users wanted to add to it but couldn't.
66% used AI:
For Creative Writing
Users used GPT to come up with writing prompts or edit grammar.
66% used AI:
For Creative Writing
Users used GPT to come up with writing prompts or edit grammar.
66% used AI:
For Creative Writing
Users used GPT to come up with writing prompts or edit grammar.
66% Wanted To Edit:
Chat GPT's Output
Once Chat GPT outputs an answer, some users wanted to add to it but couldn't.
100% Said:
Chat GPT Gave False Info
Users were not happy with how the AI tried to make up information.
66% used AI:
For Creative Writing
Users used GPT to come up with writing prompts or edit grammar.
100% Said:
Chat GPT Gave False Info
Users were not happy with how the AI tried to make up information.
How Are Users Using Chat GPT?
How Are Users Using Chat GPT?
How Are Users Using Chat GPT?
All people interviewed only mentioned Chat GPT's default mode, where they claimed it made up false information.
Those who wanted to edit output did not know GPT already had an output editing feature.
Many users said they liked using GPT to assist them, regardless if its creative writing to grammar correction.
All people interviewed only mentioned Chat GPT's default mode, where they claimed it made up false information.
Those who wanted to edit output did not know GPT already had an output editing feature.
Many users said they liked using GPT to assist them, regardless if its creative writing to grammar correction.
All people interviewed only mentioned Chat GPT's default mode, where they claimed it made up false information.
Those who wanted to edit output did not know GPT already had an output editing feature.
Many users said they liked using GPT to assist them, regardless if its creative writing to grammar correction.
Other AI's Also Followed Similar Designs to Chat GPT
Other AI's Also Followed Similar Designs to Chat GPT
Other AI's Also Followed Similar Designs to Chat GPT
Note: All competitive analysis was done before February 26, 2025. Any updates to the following will be not be accounted for in this study. I will only be looking at the free versions.
Note: All competitive analysis was done before February 26, 2025. Any updates to the following will be not be accounted for in this study. I will only be looking at the free versions.
Google Gemini
Google Gemini
Has a similar site structure to Chat GPT and as of writing, AI does not have the ability to Deep Think or Search the Web for citations.
Has a similar site structure to Chat GPT and as of writing, AI does not have the ability to Deep Think or Search the Web for citations.
DeepSeek
DeepSeek
Also uses a similar layout to Chat GPT, is capable of its own "reasoning", is by far the most versatile compared all other competitors as of writing.
Also uses a similar layout to Chat GPT, is capable of its own "reasoning", is by far the most versatile compared all other competitors as of writing.
Mistral Chat
Mistral Chat
Has no reasoning feature and is more specialized in coding. Is capable of searching across the web like GPT.
Has no reasoning feature and is more specialized in coding. Is capable of searching across the web like GPT.
The New User
The New User
The New User
The Confused User
The New User
The Confused User
The Confused User
There were many opinions about Chat GPT and like its competitors, it had many modes users never mentioned or realized existed from my interviews. There was a clear knowledge gap. With this in mind, I set out a goal to educate users on GPT's full tool box using UX.
There were many opinions about Chat GPT and like its competitors, it had many modes users never mentioned or realized existed from my interviews. There was a clear knowledge gap. With this in mind, I set out a goal to educate users on GPT's full tool box using UX.
Educate Users on Chat GPT's Other Features
Educate Users on Chat GPT's Other Features
Educate Users on Chat GPT's Other Features
Research showed users knew how to use basic GPT but had no idea Reason or Search modes existed, nor the ability to edit their outputs.
I noticed a lot of the problems faced by the basic mode can be solved using other features, which means no one was taking advantage of them.
Research showed users knew how to use basic GPT but had no idea Reason or Search modes existed, nor the ability to edit their outputs.
I noticed a lot of the problems faced by the basic mode can be solved using other features, which means no one was taking advantage of them.
My Idea to Educate Was to Create A New Feature Where It Would Hi-Light The Already Existing Modes
My Idea to Educate Was to Create A New Feature Where It Would Hi-Light The Already Existing Modes
The concept sketches below show a new panel with the Search, Reason, and Edit modes being more visible to the user.
The concept sketches below show a new panel with the Search, Reason, and Edit modes being more visible to the user.
Several Concepts For The Educate New Feature
Several Concepts For The Educate New Feature
Several Concepts For The Educate New Feature
Suggestion Popup Along With New Feature Panel
Suggestion Popup Along With New Feature Panel
Search Suggestion Feature
Search Suggestion Feature
Search Suggestion Feature
Output From Suggestion
Search Suggestion Feature
Drop Down Descriptions to Help the User Learn What Each Feature Does
Drop Down Descriptions to Help the User Learn What Each Feature Does
Drop Downs With Descriptions For Basic GPT
Drop Downs With Descriptions For Basic GPT
Drop Downs With Descriptions For The Different Modes
Drop Downs With Descriptions For Search
Drop Downs With Descriptions For The Different Modes
Mid Fidelity Testing
Mid Fidelity Testing
A total of 5 users were interviewed one on one, with individual video calls. Users told to interact with the current mid fidelity.
A total of 5 users were interviewed one on one, with individual video calls. Users told to interact with the current mid fidelity.
100% Failed:
To Understand Search Mode
Users thought Search Mode "Google" and didn't use the drop down.
100% Failed:
To Understand Search Mode
Users thought Search Mode "Google" and didn't use the drop down.
100% Failed:
To Understand Search Mode
Users thought Search Mode "Google" and didn't use the drop down.
60% Complained:
About the Visuals
Colors and text blended in too much with each other for users to see properly.
60% Complained:
About the Visuals
Colors and text blended in too much with each other for users to see properly.
60% Complained:
About the Visuals
Colors and text blended in too much with each other for users to see properly.
60% Failed:
To Understand Reason Mode
Users failed to use drop down and did not understand what Reason Mode did.
60% Failed:
To Understand Reason Mode
Users failed to use drop down and did not understand what Reason Mode did.
60% Failed:
To Understand Reason Mode
Users failed to use drop down and did not understand what Reason Mode did.
60% Failed:
To Understand Edit Mode
Named "Edit in Canvas", users failed to use the drop down and were confused by it.
60% Failed:
To Understand Edit Mode
Named "Edit in Canvas", users failed to use the drop down and were confused by it.
60% Failed:
To Understand Edit Mode
Named "Edit in Canvas", users failed to use the drop down and were confused by it.
Failing Fast - Creating a New Interface Theme
Failing Fast - Creating a New Interface Theme
Most of the features from the mid fidelity failed, from the text to the visuals so I went back to the drawing board for next iteration. Since Chat GPT's base interface theme did not work, I decided to create my own.
Most of the features from the mid fidelity failed, from the text to the visuals so I went back to the drawing board for next iteration. Since Chat GPT's base interface theme did not work, I decided to create my own.
A New Theme Based On Accessibility And UI Were Created.
A New Theme Based On Accessibility And UI Were Created.
New UI Kit To Help Accessibility
New UI Kit To Help Accessibility
New UI Kit To Help Accessibility
Second, Everything Was Put Together In A New High Fidelity, Hi-lighting The Areas Users Failed To See
Second, Everything Was Put Together In A New High Fidelity, Hi-lighting The Areas Users Failed To See
During this phase, I also renamed Reason, Search, and Edit in Canvas to more understandable terms:
Reason is now "Advanced Reasoning"
Search is now "Cite Sources"
Edit in Canvas is now "Edit Text Output"
During this phase, I also renamed Reason, Search, and Edit in Canvas to more understandable terms:
Reason is now "Advanced Reasoning"
Search is now "Cite Sources"
Edit in Canvas is now "Edit Text Output"
The Search Feature Has Been Renamed To "Cite Sources"
The Search Feature Has Been Renamed To "Cite Sources"
The Search Feature Has Been Renamed To "Cite Sources"
The Search Feature Has Been Renamed To "Cite Sources"
The Search Feature Has Been Renamed To "Cite Sources"
A More Detailed, Unskippable Pop up Replaces The Drop Down And Color To Guide The Eye
A More Detailed, Unskippable Pop up Replaces The Drop Down And Color To Guide The Eye
Brand New Pop Explaining Each Chat GPT Mode
Brand New Pop Explaining Each Chat GPT Mode
Brand New Pop Explaining Each Chat GPT Mode
Advanced Reasoning
Brand New Pop Explaining Each Chat GPT Mode
I Tested The New Designs Once more In A 6 Person, One On One Interview. Here Are The Results:
I Tested The New Designs Once more In A 6 Person, One On One Interview. Here Are The Results:
50% Struggled:
With Visuals
Some users found the purple hi-lights to be too eye catching.
83% Hesitated:
On The Reason Feature
Users only partially understood what this feature did and could explain in-depth.
50% Struggled:
With Visuals
Some users found the purple hi-lights to be too eye catching.
50% Struggled:
With Visuals
Some users found the purple hi-lights to be too eye catching.
50% Struggled:
With Visuals
Some users found the purple hi-lights to be too eye catching.
83% Hesitated:
On The Reason Feature
Users only partially understood what this feature did and could explain in-depth.
83% Hesitated:
On The Reason Feature
Users only partially understood what this feature did and could explain in-depth.
83% Hesitated:
On The Reason Feature
Users only partially understood what this feature did and could explain in-depth.
66% Failed to Notice:
The Suggestion Popup
Users were too distracted by other features to notice the suggestion popup.
50% Failed to understand:
Edit Text Output
Some users mistook this as being able to edit their own prompts, not the output.
50% Failed to understand:
Edit Text Output
Some users mistook this as being able to edit their own prompts, not the output.
50% Failed to understand:
Edit Text Output
Some users mistook this as being able to edit their own prompts, not the output.
50% Failed to understand:
Edit Text Output
Some users mistook this as being able to edit their own prompts, not the output.
66% Failed to Notice:
The Suggestion Popup
Users were too distracted by other features to notice the suggestion popup.
66% Failed to Notice:
The Suggestion Popup
Users were too distracted by other features to notice the suggestion popup.
66% Failed to Notice:
The Suggestion Popup
Users were too distracted by other features to notice the suggestion popup.
The Design Was Getting Close To The Goal, But There Were Still Some Struggles Along The Way:
The Design Was Getting Close To The Goal, But There Were Still Some Struggles Along The Way:
Visually, it was close but the inferface went overboard with the bright purples, so colors needed to be toned down.
I was close to helping users understanding the "Reason" feature which was renamed "Advanced Reasoning."
Visually, it was close but the inferface went overboard with the bright purples, so colors needed to be toned down.
I was close to helping users understanding the "Reason" feature which was renamed "Advanced Reasoning."
The First Changes Came With Toning Down The Colors And Focusing On the Important Features
The First Changes Came With Toning Down The Colors And Focusing On the Important Features
Old Suggestion Tab Before Change
Old Suggestion Tab Before Change
Old Suggestion Tab Before Change
New Toned Down Colors And Improved Suggestion Tab
New Toned Down Colors And Improved Suggestion Tab
New Toned Down Colors And Improved Suggestion Tab
The Second Change Was Placing The Edit Button Closer To The Output To Create Association
The Second Change Was Placing The Edit Button Closer To The Output To Create Association
Old Version Where Editing Wasn't As Visible
Old Version Where Editing Wasn't As Visible
Old Version Where Editing Wasn't As Visible
New "Edit Text" Button Placed Closer To The OutPut
New "Edit Text" Button Placed Closer To The OutPut
New "Edit Text" Button Placed Closer To The OutPut
This project took many twists and when I look back I realized how much my objective changed. At first, it was just adding a simple feature to help users use Chat GPT more effectively, but as I tested the results, I realized just how much needed to change before I can even start with my original goal. Before I knew it, I was redesigning the entire interface.
If I were to move on with this project further, I'd be very curious to test this new iteration of my design and refine it further. The cycle of design and discovery is never over so there is always room for improvement.
This project took many twists and when I look back I realized how much my objective changed. At first, it was just adding a simple feature to help users use Chat GPT more effectively, but as I tested the results, I realized just how much needed to change before I can even start with my original goal. Before I knew it, I was redesigning the entire interface.
If I were to move on with this project further, I'd be very curious to test this new iteration of my design and refine it further. The cycle of design and discovery is never over so there is always room for improvement.
© 2025 Wei Yan
Email Contact
Yw.rworks@gmail.com
Socials
© 2025 Wei Yan
Email Contact
Yw.rworks@gmail.com
Socials
© 2025 Wei Yan
Email Contact
Yw.rworks@gmail.com
Socials
Chat GPT
How I Taught Users Better Understanding of ChatGPT Using Good UX
An explorative case study that merges the world of food delivery with a new fast paced environment.
My Role
UX/UI Designer, UX Researcher
Catagory
Add A Feature
Date
February 2025 - March
Users Don't Know How to Use Chat GPT Properly
Chat GPT is an AI used by a variety of people. However, since this technology is still very new, users are still going through a long learning curve with questions such as:
"What does the Reason Mode do?"
"I didn't know Search Mode provided cited sources!"
Are a few quotes I unearthed from my interviews. Research shows most users are familiar with normal GPT, despite this, not many are aware it has other modes that
can cater to different lines of work.
Which Is Why I Taught Them How to Use It With the Help of UX
My process involved adding a new feature panel to hi-light these less used modes and redesigning the interface to have better visibility and educate users. From sketch to full prototype, I created an improved version of Chat GPT's original interface.
Note: This project will only cover the free version of Chat GPT from before March 2025.