ChatGPT

A library to enhance users conversations with the AI chatbot

Project Overview

ChatGPT is a popular virtual conversation partner powered by advanced AI technology. It’s like chatting with a knowledgeable friend who can answer questions, offer advice and engage in conversation on a wide range of topics.

As a regular user of ChatGPT, it is worth noting despite its user-friendly interface and powerful capabilities the platform has exhibited certain difficulties or frustration for active users like myself.

Timeline

80 Hours (2023)

My Role

UX Designer (Solo)

Tools

Figma/Figjam, Whimsical, Typeform

The Problem

Despites its emphasis on simplicity and AI capabilities, certain ChatGPT users still encounter challenges when using it for the first time or on a regular basis. Initially I had my ideas on the direction I could go with in addressing these problems, however, my primary goal was to learn first hand the experience through the lens of other users. So the question remains:

How might we assist ChatGPT users in addressing obstacles within their user experience that might have led to confusion or dissatisfaction ?

The Solution

Adding a Feature

The goal of this project is to add a feature to an existing platform that will address the pain points and enhance the overall user experience. Through exploration and research I could then validate and depict a design feature to

Research & Discover

Competitive Analysis

Learning how other do it

In efforts to understand other competitors' approaches in the AI chatbot market, I conducted a competitive analysis and SWOT with direct competitors of ChatGPT. Here is the analysis to help you form your own perspective

User Interviews & Survey

Understanding our users

In order to validate my assumptions further I needed to understand other user perspectives and experience of ChatGPT .

I conducted remote user interviews with 6 participants all with focus on understanding the ChatGPT users experience, use case, behaviors and barriers with the platform. 5 of the participants were frequent users of the tool and a majority utilized the application through a web browser.

“I have to manually copy and paste a question over and over in the message field to yield a different or additional responses”

Participant 3

Deconstructing our discoveries

Affinity Mapping

After speaking to users and collecting survey data to learn more about how users interact with ChatGPT and their experience, I needed to organize and make sense of all the information. So I proceeded to synthesize the gathered data through the process of affinity mapping.

Key Findings

  1. Users spend excessive time refining questions. A majority of users spend a long time asking ChatGPT to “better phrase” a response, question, etc. This often leads users to wasting time honing in on proper questions phrasing

  2. Users encounter generic or inadequate responses. ChatGPT users need guidance for how to best phrase questions for their intended goal. Currently they experience frustrations with encountering generic, too long, too short responses.

  3. Users lack guidance with prompts. Users spend a long time asking multiple questions on top of their initial prompt due to lack of phrasing ability. This drives users to feel frustrated with perfecting their responses to the correct verbiage, length and content.

Narrowing down our focus

Prioritization Matrix

I discovered that there were numerous potential directions for designing a new feature for ChatGPT. I faced the challenge of selecting one specific problem statement to address among the overwhelming options. To tackle this, I utilized a prioritization matrix to help guide my decision-making process and landed on the following major points I heard from users.

From a buisness’ standpoint

Project goals

After identifying user needs, my next task was to assess if introducing this new feature aligned with our current business goals and strategy.

To achieve this, I categorized the following topics into two clear sets: one highlighting user and business objectives, and the other spotlighting user frustrations and business challenges. By comparing these sets, I focused on common areas and determined the feasibility of the proposed design decision for the feature.

Define

Designing for users needs

Using the insight gathered I learned ChatGPT users struggle with asking the AI tool how to “better phrase” their questions and responses, which can consume considerable amount of time and cause frustrations in the repetitive process. Users need assistance in crafting better questions, getting guidance and receiving or viewing suggestions for prompts to improve the use case.

We got a potential solution in mind!

To address these pain points I developed a feature where users can access a library of predefined prompts that are commonly used or have been found to yield better results from a community of ChatGPT users similar to Figma’s community. This feature allows users to explore and choose from a range of suggested prompts, reducing the effort required to come up with their own.

A look into our user

User Persona

New insights into the users experience and pain points revealed this relatable persona whom we would design for,

Site Map

Leveraging what we’ve learned

Once we had identified the concept for the new feature, the next natural step was to pinpoint how it could seamlessly integrate into our existing platform. I proceeded with outlining a sitemap that would embed well with the current information architecture.

User Flow

Our expected flow

The goal is to design a product that is intuitive to the user experience, feels natural and forward-thinking all while reducing the pain points identified in our research.

Therefore came curating a series of user flows that outlined the path a user would take in utilizing this feature

Design

Low Fidelity Sketches

Early stages of designing

Now for the fun part, with a concept prioritized and user flows drafted I proceeded with brainstorming my ideas out on paper.

Sketching allowed me to explore potential directions for the placement of this feature while staying consistent to ChatGPT current design systems in place.

Low Fidelity Sketches

UI Kit

I decided to keep the consistency of the current UI Style of ChatGPT to make the added feature seamlessly fit right in as if the user were utilizing the feature in a live setting.

Mid-Fidelity Wireframes

Building upon the insights gained from the low-fidelity wireframes, I jumped into creating the mid-fidelity wireframes for what the prompt library feature would visually make most sense.

The true challenge was staying consistent with the current design system, I paid close attention to the overall user interface and written content of ChatGPT. This led me to playing with various placements for the prompt library and prompt library dashboard.

High Fidelity Wireframes

Test & Iterate

Time for feedback!

With the interactive prototype in Figma created, It was time to put these designs to play and obtain some feedback

I proceed with conducting 5 moderated remote usability tests all with similar background to that of the user interviews.

Task Flows

Flow 1: Users were asked to navigate to utilize prompt library from the welcome dashboard of ChatGPT and view the prompt library dashboard for the first time. Withing Prompt Library Bookmark their first prompt.

Flow 2 + 3: Users were asked to locate the rephrase sentence prompt from the prompt library dashboard and bookmark their first prompt. Next, Users were asked to imagine they were a programmer and look for a prompt labeled “improve code” and use the prompt for the first time.

Analyzing our Feedback

Findings revealed room for improvement!

While the flows were straightforward, with all users successfully completing the tasks from beginning to end during testing, usability interviews brought to light valuable insights and perspective within the user interface and information displayed.

Testing reveled a pivot in the current design system in place by the platform could use improvement.

100%

Success Metric Validated

users validated use for a feature concept of a prompt library!

A key highlight to mention from conducting testing was a unanimous decision by users expressed interest in utilizing a feature like prompt library. This reassured me I was on the right track.

  1. Users at first glance had trouble locating the “prompt library” button. It was not until hover state was initiated did confusion lessen.

  2. Users felt confused at particular icons due lack of hover state with clear titles that the current design system by ChatGPT offered.

  3. Users would like more guidance in the process of introduction to new or current features offered by ChatGPT.

Key Findings

Priority Revisions

Time to iterate!

After prioritization from our insights gathered through our usability test I began working on the finalized high fidelity screens.

Which included the following changes:

  • Added tool tip to welcome dashboard and prompt library of ChatGPT. Added to provide more guidance and reduce confusion on where to locate the feature. Recued error and provide recognition to a change.

  • Hover states made more visible with a darker contrast of grey to reduce confusion and provide a reaction to a behavior change with components in the UI.

  • Selected states changed to a brighter green to reduce confusion, provide visibility to an action taken.

  • Hover indication with description of icon/action.

  • Redesigned interface to keep consistency with the live version out of ChatGPT. Started project around Jun - July 2022 and completed final design post revisions around August 2022. By then Open AI had updated the UI of ChatGPT.

  • View prompt details redesigned to provide more visibility and recognition to the information presented. Added section titles to separate between “Details” of prompt and what it can do to “Prompt” for users to distinguish the prompt being used.

See revisions below

Final MVP Design

ChatGPT’s Prompt Library

Welcome Dashboard, tool tip of prompt library

Prompt Library Dashboard

Worth Mentioning Takeaways!

ChatGPT Custom Instructions

(August 2023)

Overlap & Validation!

It is worth mentioning towards the final week of building out my final designs, ChatGPT themselves validated a remarkable finding in my research. Open AI themselves implemented their own Prompt Library feature! In order to address the issue at hand with users having difficulty asking the right questions and receiving the correct responses Open AI introduced “Custom Instructions” to ChatGPT.

Prompt Library Concepts designed by me

(July 2023)

Reflection Time

The current solution

The Prompt Library is a feature designed to provide users with a collection of pre-designed prompts for various topics and tasks. It helps users by offering a quick and convenient way to access ready-made conversation starters, making interactions more engaging, efficient, and tailored to specific needs

Why this design works ?

The solution's I designed aims to adheres to widely recognized design patterns, embracing a minimalistic yet functional aesthetic that maintains consistency to the current ChatGPT design systems in place while effectively addressing user frustrations with current designs.

How it helps a business & users?

From a business perspective, it boosts efficiency by ensuring consistent and effective communication, ultimately contributing to improved customer engagement and satisfaction.

From a user perspective it aims to assist effectively chat for their needs, provide readily available collection of prompts, streamlining interactions and foster creativity.

Lessons Learned

Challenges & Lessons learned

Throughout the project the two biggest obstacle I faced were the following:

  • Staying up to date with the ever-changing design systems of ChatGPT, being as the AI chatbot is growing and continues to reiterate their design systems often.

  • Lots of data is good, but prioritizing is crucial to staying consistent with the timeline.

Next Steps

If I had more time, I would have continued thorough another test and iteration phase to really hone into the design system changes. In addition, go back and design on the additional features that were uncovered during our research phase.