How Well Can ChatGPT Help UI/UX Professionals Design an App?by@andriiliubymov
7,168 reads
7,168 reads

How Well Can ChatGPT Help UI/UX Professionals Design an App?

by Andrii LiubymovOctober 12th, 2023
Read on Terminal Reader
Read this story w/o Javascript

Too Long; Didn't Read

Will AI replace product designers? How can UI/UX and product designers use ChatGPT to create design concepts and bring their workflow to the next level?

People Mentioned

Mention Thumbnail
featured image - How Well Can ChatGPT Help UI/UX Professionals Design an App?
Andrii Liubymov HackerNoon profile picture

«Everything that can be automated, will be automated» - Robert Cannon, Internet Law and Policy Expert

We can't deny the fact that artificial intelligence (AI) is this year's trend. With the emergence of the technology and its rapid adoption in various industries, UI/UX and product designers were bound to be involved. Products such as ChatGPT, Midjourney, DALL-E 2, and Stable Diffusion are already pretty popular and actively used by many of my colleagues.

As a UI/UX designer, I've already realized that implementing ChatGPT into my working processes has significantly improved my ability to create more user-friendly interfaces. In this article, I'm going to highlight the specific ways of using ChatGPT, the benefits it can bring, and how it can improve your overall work efficiency. So let's get started!

ChatGPT as an Auxiliary Tool for UI/UX and Product Designer

Formulation of Requests or Prompt Engineering

Unlocking ChatGPT's full potential hinges on your ability to craft efficient queries. This can be achieved by mastering the basics of request formulation and experimenting with prompt styles.

Check out some cool examples that might help you:

**Writing the perfect request is like creating a recipe.**You need to add all the necessary ingredients in the right amount and mix them to get the expected result. Even if everything is done correctly, you may need to make some adjustments and tweaks to create the perfect final product. So, let's get to the point.

To make things easier to understand in the following paragraphs, let's assume that we have a task to develop a mobile application that will help users boost their math skills in a fun and engaging way. It can be a math quiz app that offers various tests and puzzles to improve and train brain skills.

Collecting Requirements and Ideas

ChatGPT can help designers collect requirements and ideas for new projects by analyzing user requests and generating answers to them. It can include developing concepts and determining key features and design requirements.

Let's see if ChatGPT can help us with this.

ChatGPT Conversation

As you can see, ChatGPT has described quite a detailed concept of the application. If necessary, we can ask additional questions about each feature. ChatGPT will provide clear answers and even highlight the most essential points.

What about some design ideas for MathWiz that will help make the app more attractive to users?

Design ideas for MathWiz

Our virtual assistant provided 10 fairly accurate points that will help you create a design concept for your future app.

Generating Design Options

With ChatGPT, we can get different design options that meet the requirements. It allows us to choose the best ideas and reject the less effective ones.

Since we already have a clear idea of our future MathWiz application, let's try to get a detailed description of its information architecture.

Generating Design Options

This is not yet the basis of the future product, but the suggested basic structure can help us develop interaction with users and become the initial stage in design.

Well, that's not bad!

Perhaps, ChatGPT can recommend the best colors for our product? Normally, I use other tools like Colormind, Colorhunt, or Coolors, but this time I want to get ChatGPT's opinion.

ChatGPT Response

Sounds promising! I especially liked the thoroughness of the description of color combinations and the conciseness of the explanations. I tried to recreate this palette and in general, I was satisfied with the result.

Color palette

What about fonts? We're going to reject the system's San Francisco and New York fonts and try to diversify the options.

Font suggestion

From a technical point of view, the answers are quite accurate, although at first glance they are boring. Let's check how these fonts look in reality:

Font comparisons

Primary Analysis of Competitors

Making thorough research on our competitors (other math tools) has become an essential part of my design process for MathMaster and AI is a great helper here. ChatGPT can assist you in analyzing competitors by automatically collecting and processing a large amount of data from various sources. To get the proper analysis, it is enough to specify the preferred format of data presentation, for example, in the form of a table:

MathWiz Competitors

Accelerating the Process of Mockups and Prototypes Creation

ChatGPT can automate part of the mockup creation process by generating element descriptions and recommendations for their placement and interaction. It allows designers to speed up the development process and focus on more creative aspects of design.

Creating a mockup

Text Content Generation

Artificial intelligence provides a convenient and efficient way to create texts for various placements, including landing pages and other parts of a product. It can help increase work efficiency by automating the process and reducing the time it takes to create the necessary text.

Text Content Generation

Accelerating the Development of Documentation for Design Systems

ChatGPT can make the process of creating documentation for design systems easier by automatically generating descriptions for components and the ways of using them. It allows designers to focus on the essence of the project, ensuring consistency and easy understanding of the documentation.

Let's take a look at an example of how AI can help create a detailed description of a color palette, extending it with design tokens, and creating typographic scales.

Creating a color palette

Creating a design system

Automation of UX Tasks

With ChatGPT, designers can automate complex UX tasks, such as analyzing user steps, identifying personas, or developing a detailed information architecture. Artificial intelligence provides in-depth data analysis, which allows you to create more intelligent and effective solutions.

As an example, let's review the creation of several user personas for our application.

User personas

Conducting User Researches

ChatGPT can automatically analyze user feedback, highlight key issues and trends, and generate reports on the clarity and effectiveness of various aspects of the product. It allows designers to respond faster to user needs and make appropriate changes to the product.

Ensuring Effective Communication

ChatGPT can make communication between designers, developers, and other team members easier by translating technical terms and simplifying complex concepts. It helps all team members understand project goals and requirements for better collaboration and faster results.

What else?

  • Creating user stories, scenarios, user journey maps, and user flow;
  • Creating A/B testing options for design and text;
  • Planning design sprints;
  • Creating your own cases for the portfolio;
  • Generating ideas for articles, posts, and other design-related tasks;
  • Professional development;
  • To be continued.

Instead of Conclusions

I hope that I have revealed the specific ways of using ChatGPT in the work of UI/UX and product designers using the example of the conditional MathWiz application and that you have found something useful and applicable for yourself.

In conclusion, I should mention one of the most frequently asked questions on the web: Will AI replace designers and deprive them of their jobs?

Drum roll…

Artificial intelligence will hardly completely replace design in the near future (except for repetitive tasks or those that can be automated). Why? Because every business, as well as a group of users and many other factors, is a personalized case. Design involves not only the creation of visual objects, but also empathy, creativity, and human-centered approaches to problem-solving. These skills are not easy to replicate with AI.

Thus, ChatGPT can be considered as your personal AI assistant. Who doesn't want something like that? This tool is already here, so let's learn how to use it.

And so, this brings us to the final statement, namely: AI won't replace designers, but designers who use AI will replace those who don't.