Exploring the Power of OpenAI ChatGPT for product designers

Using the GPT3 AI model, this AI chatbot can change our design process

Edward Chechique
UX Planet

--

ChatGPT for product designers

It is more than evident that AI technology will change how product designers work. One side is tools launched this year, such as Dall-E-2, Stable Diffusion, and Midjourney for images, while the other is AI tools that help write text, such as Wordtune or Lex.

As a product designer, I always look for new technologies and techniques to speed up my work. This year I shared an article about AI Image generation, and in that article, I wanted to demonstrate some use cases for using the new ChatGPT.

Following a brief description of ChatGPT, I describe some tests I conducted to test its capabilities to understand how product designers can use it.

What is OpenAI ChatGPT?

ChatGPT is an AI-powered contextual chatbot developed by OpenAI. A user can ask the chat to perform a task or to answer questions, and the chat will respond with an answer.

For example,

I asked this question:

Who is Elon Musk?

This was its answer:

“Elon Musk is a business magnate, investor, and engineer. He is the founder, CEO, and chief engineer of SpaceX, and the founder and CEO of Tesla, Inc. He has also been involved in several other ventures, including Neuralink and The Boring Company. Musk is known for his innovative and ambitious approach to business, and has often been described as a visionary entrepreneur. He has a reputation for taking on complex and challenging projects, and has been instrumental in advancing the development of electric cars, space travel, and artificial intelligence.”

Another example:

This is what I asked:
Can you explain to me what machine learning is?

This was its answer:

“Machine learning is a subfield of artificial intelligence (AI) that focuses on the development of algorithms and models that can learn from and make predictions based on data. These algorithms and models use statistical techniques to find patterns in data and to make predictions or decisions without being explicitly programmed to do so.

Machine learning algorithms can be divided into two main categories: supervised learning and unsupervised learning. In supervised learning, the algorithm is trained on a labeled dataset, where the correct output is provided for each input. This allows the algorithm to learn the relationship between the inputs and outputs, and to make predictions on new data based on that relationship. In unsupervised learning, the algorithm is not provided with labeled data, and must discover the hidden structure in the data on its own.

Machine learning is used in a wide range of applications, including image and speech recognition, natural language processing, fraud detection, and recommendation systems. It has become an essential tool for businesses and organizations looking to gain insights from their data and to automate decision-making processes.”

The chat is free for now, and I believe it is because Open AI wants to get user feedback on it. You can start using it right away.

ChatGPT interface
ChatGPT interface

What can a product designer do with the ChatGPT chatbot?

I want to show you the experiment I did with ChatGPT. The tool can be used for many tasks, including helping you think creatively. Below are some examples.

Write messages for an app

If you’re not working with a UX writer, you know that writing messages can be another task. However, because there are not always clear writing guidelines, we do not always know how to do it well. Here are the messages ChatGPT wrote for me.

This is what I asked:

Write a short message to explain to a user that the image cannot be uploaded because the system only accepts PNG files.

This was its answer:

Here is a possible message to explain to a user that the image cannot be uploaded because the system only accepts PNG files:

“Sorry, but the system is unable to upload your image because it is not in the PNG format. Our system only accepts PNG files, so please make sure that your image is saved in that format before trying to upload it again. If you need help converting your image to PNG, please contact our customer support team for assistance.”

Also, if you want more options, you can ask ChatGPT to give you more than one answer, like this:

This is what I asked:

Write five very short messages to explain to a user that the image cannot be uploaded because the system only accepts PNG files.

This was its answer:

Here are five very short messages to explain to a user that the image cannot be uploaded because the system only accepts PNG files:

  1. “Sorry, only PNG files are accepted.”
  2. “Image must be in PNG format.”
  3. “PNG format only, please.”
  4. “Invalid format. PNG only.”
  5. “PNG files only, thank you.”

Create SVG visuals

Because ChatGPT can write code, you can ask it to generate icons or other visuals. It will generate a code you need to convert to see the results. I believe that in the future, we will be able to see the images directly in the chat. In any case, for now, you can convert the code to an image on different websites.

To be honest, the results here are not the best. It works well for easy tasks like creating a circle but doesn’t give great results for more complex visuals.

Here are some examples; I’ve also added the code. You can use this page to test it if you want.

What I asked:

Make a 100px green circle SVG.

This was its answer:

<svg width="100" height="100">
<circle cx="50" cy="50" r="50" fill="green" />
</svg>

This is the Image:

This is what I asked:

Make an SVG of the USA flag.

This was its answer:

<svg width="300" height="200">
<rect x="0" y="0" width="300" height="100" fill="#002664" />
<rect x="0" y="100" width="300" height="100" fill="#FFFFFF" />
<circle cx="150" cy="50" r="30" fill="#B22234" />
<circle cx="150" cy="150" r="30" fill="#B22234" />
</svg>

This is the Image:

Create a prompt for AI image generators

If you played with some AI image-generated tools, you know that writing a clear prompt and getting a good image or AI art can be challenging. Of course, you can look at pages like Lexica to get an idea, but I wanted to see if ChatGPT makes this task easier.

This is an example, and the image was generated using Stable Diffusion.

This is what I asked:

Write a prompt for an AI image generator, and ask it to show me an image of a chef cook pizza in Rome.

This was its answer:
Please generate an image of a chef cooking a pizza in Rome. The chef should be wearing a traditional Italian chef’s hat and apron, and the pizza should be a classic Margherita pizza with mozzarella cheese, tomatoes, and basil. The background of the image should show the city of Rome, with iconic landmarks such as the Colosseum and the Pantheon visible in the distance.

This is the Image:

Image from Stable Diffusion
Image from Stable Diffusion

Response to HR recruiter message

Sometimes I receive job offers from HR recruiters. I respond to all of them because it’s polite, and I don’t know when I’ll need them. But instead of writing a message yourself, save time and let ChatGPT do it.

This is what I asked:

Respond to this email and explain I’m fine in my current position and I don’t want to move.

Dear Jhon,

I’m writing to you because I saw your Linkedin profile and believe you could be an excellent fit for our company’s senior product designer role.

We are a rapidly growing company with exciting projects in the pipeline in the financial B2B space.

We offer a great salary for this position, and you can work remotely.

Are you open to hearing more?

This was its answer:

Dear Jhon,

Thank you for reaching out to me about the senior product designer position at your company. I appreciate the opportunity, but I am currently very happy in my current position and am not interested in moving at this time.

I wish you and your company the best of luck in finding the right candidate for the role.

Best regards, [Your Name]

Writing code

Okay, so this isn’t a pure task for product designers, but if you need to write some code, you can ask Chat GPT to do it.

This is what I asked:

Please write a code for an HTML blog page.

This was its answer:

<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
</head>
<body>
<h1>My Blog</h1>
<h2>Recent Posts</h2>
<ul>
<li>
<h3>Post 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at sollicitudin magna. Donec auctor, nisi eu sagittis efficitur, enim nibh feugiat nunc, quis cursus massa mi quis erat.</p>
</li>
<li>
<h3>Post 2</h3>
<p>Suspendisse euismod risus eu risus placerat, ut pellentesque purus fermentum. Nullam vel porta dolor. Nulla facilisi. Nam nec lacus vel metus rutrum luctus.</p>
</li>
</ul>
</body>
</html>

Do you need to fix errors in a text?

It is possible to use Grammarly or Wordtune, but the advantage here is that ChatGPT fixes the text in one action rather than word by word.

This is what I asked:

Please fix the spelling and grammar errors in this text:
I was so excxited when I heard I was going to New Yok City for the week. I had been planning tsis trip for mosths, and it was finally here. When I arrived in the city, I was immediately taken aback by the sheer energy that plsed through the streets. Everywdere I went, I felt like I was in the middle f a bustling metropolis.

This was its answer:
Here is a corrected version of the text with the spelling and grammar errors fixed:

I was so excited when I heard I was going to New York City for the week. I had been planning this trip for months, and it was finally here. When I arrived in the city, I was immediately taken aback by the sheer energy that pulsed through the streets. Everywhere I went, I felt like I was in the middle of a bustling metropolis.

Do you need to translate a text?

While Google Translate is great, you can also try ChatGPT.

This is what I asked:

Translate this text to Spanish:
A strong team is built on effective communication. This kind of communication makes teams collaborate well, leading to successful product development.

This was its answer:

Un equipo fuerte se construye en base a la comunicación efectiva. Este tipo de comunicación hace que los equipos colaboren bien, lo que lleva al desarrollo exitoso de productos.

Need help brainstorming?

This is a highly effective and powerful tool to work faster and generate ideas. You can ask the chat for ideas, and it will provide them. Of course, you can take it as is, but I believe we need to polish the ideas to fit our needs.

This is what I asked:

Give me five ideas to solve this case:
My company gets many calls every day to ask about our products. How can I reduce the calls so people can find the information on our website and not call the company?

This was its answer:

Here are five ideas to help reduce the number of calls to your company about your products:

  1. Create a comprehensive and easy-to-navigate product information section on your website, with detailed descriptions and photos of all your products. This will make it easier for potential customers to find the information they need without needing to call your company.
  2. Add a frequently asked questions (FAQ) section to your website, where you can provide answers to common questions about your products and their features. This will help to address common queries that people may have before they decide to call your company.
  3. Use social media to share product information and updates. By regularly posting about your products on platforms like Facebook and Instagram, you can reach a wider audience and provide them with the information they need to make a purchase decision.
  4. Consider implementing a chatbot on your website, which can provide instant answers to common questions about your products. This can help to reduce the number of calls your company receives by providing customers with a quick and convenient way to get the information they need.
  5. Train your customer service team to provide detailed and accurate information about your products when they receive calls from potential customers. This will help to ensure that customers get the information they need and are less likely to call back with additional questions.

To summary

I wanted to share my experience with the ChatGPT chatbot in this article. Playing with this AI bot made me realize that this technology is just starting, but we can use it today to improve our workflow.

Below is a list of the experiments I conducted:

  • Asking questions.
  • Writing messages for an app.
  • Creating SVG visuals.
  • Creating a prompt for AI image generators.
  • Response to HR recruiter message.
  • Writing code.
  • Fixing misspellings and grammar errors.
  • Brainstorming.

Thank you for reading the article. I hope this article showed you how chatGPT could be used by product designers. Please feel free to share it with your friends or team members, and if you have any questions, please let me know.

If you enjoyed my article, I suggest you follow me and subscribe so you’ll receive an email whenever I post.

Want to get the most out of Medium? Click here to become a member. As a member, you’ll support me and lots of other writers.

--

--

Product Designer, Specializing in Complex Products and Design Systems | Figma Expert | Mentorship | Writing about Product Design: www.linkedin.com/in/edwche