How to use ChatGPT in product design: 8 practical examples

How to use ChatGPT in product design: 8 practical examples

ChatGPT is an advanced chatbot created by OpenAI, a company that created GPT-3. Users can ask ChatGPT open-ended questions about any topic and receive responses generated specifically for the question.

I've already discussed what this tool is capable of, but in this article, I want to explore how product creators can make the most of this tool. I will use ChatGPT to create assets for the new website (a landing page for a robot vacuum cleaner) — eight practical tasks in total, along with my impression of how well ChatGPT can deal with them.

This article is also available in a video format:

1. Writing product briefs

How ChatGPT can handle this task: 3/5

A product brief outlines key product information that a product team uses to build a new product/feature. In our case, a good product brief will help us create a solid website for the product. ChatGPT can write pretty good briefs, but when you compare the generated brief to the actual briefs used in product design, you can see that it doesn't provide the essential details required for product designers. For example, information about the target audience is very limited.  

A product brief generated by ChatGPT.

2. Writing copy for product pages

How ChatGPT can handle this task: 4/5

Product designers are notoriously known for using dummy text instead of real text. When we design with Lorem ipsum, we often need to adjust layouts when we replace dummy text with the actual copy. ChatGPT makes it easier to create a realistic copy. All you need to do is write a prompt that represents your product type and let the ChatGPT do the magic. For example, below, you can see how the tool can handle writing a copy for the landing page.

A product description generated by ChatGPT for a landing page.

3. Writing error/success messages

How ChatGPT can handle this task: 4/5

Small things like error and success messages can have a huge impact on user experience. ChatGPT can be used not only for large text blocks such as product descriptions but also for microcopy (small bites of text such as success and error messages).

Error message generated by ChatGPT.

4. Writing marketing copy

How ChatGPT can handle this task: 3/5

What if we need to convince potential customers to try out the product? Skilled marketing writers can write copy that can persuade potential customers to try out the product. But can ChatGPT do the same? When I submitted the prompt "explain why people should buy our robot vacuum cleaner," ChatGPT generated a list of points with the benefits that this device offers. There are a few problems with this list. First, it's too long (it has 7 points, and each point is two sentences). Second, it's a bit dull (it doesn't provide any specific advantage over other products). Third, it repeats what was already mentioned in the product description.

Marketing copy generated by ChatGPT.

5. Visual design ideation

How ChatGPT can handle this task: 3/5

Visual exploration is not something that you expect from a text-based tool. You might say that it's better to do the exploration in tools like midjourney or Dalle-2, and I will agree with you. But I wanted to know how ChatGPT can handle prompts like "Find a good color scheme for [something]." The tool provided a few recommendations on color selection without specific details, such as actual HEX colors. I think the output can be a good starting point for visual designers and give them strong arguments regarding the colors they want to use.

Ideas on color selection generated by ChatGPT.

6. Writing code for product pages

How ChatGPT can handle this task: 2/5

What if you want to create a coded prototype of a web page? Most of the time, you either rely on ready-to-use templates or create something from scratch using one of the popular web frameworks like Vue. But can ChatGPT help us with that? When I asked the tool to write code for a responsive landing page, the tool created a very simple responsive web—it provided both HTML and CSS source code.

A responsive web page generated by ChatGPT. 

Unfortunately, this code doesn't look like something we can use in a real project because it creates a very basic page.

Using HTML and CSS code generated by ChatGPT in Codepen.

7. Writing code for small elements on the page

How ChatGPT can handle this task: 5/5

You may assume that ChatGPT is bad at writing code, but it's not true. In fact, there are a few cases when ChatGPT can show impressive results. For example, I've asked ChatGPT to generate a code for the rotating cube that I could use for the website. It generated a code in less than a minute, along with a text description.

Source code for rotating cube generated by the ChatGPT. 
Checking a code generated by ChatGPT in Codepen.

8. Translating text from one language to another

How ChatGPT can handle this task: 3/5

Let's assume that the website we create will be available in two languages—English and Spanish. It means that we need to translate our English copy into Spanish. GPT is a large language model, and language translation was likely one of the first practical tasks that it was used for. So it's easy to assume that the tool can easily translate text on the page from one language to another. Surprisingly, the translation result was average—the translated copy sounds a bit rough and robotic. Google Translate was able to handle this task much better than ChatGPT.

Results of translation from English into Spanish using ChatGPT.

A general impression of using ChatGPT for product design tasks

My general impression of using ChatGPT is positive. The tool can be very useful, especially during the early stages of the product design process when the team needs to move fast and explore various design ideas. ChatGPT can help the team to save time by generating text copy and code. But the output that ChatGPT provides is far from the final so it can be used only as a starting point for the designer's work.

Subscribe to Nick Babich

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.