AI won't replace designers (well, not all of us), but the designers that know how to work with it will. It's time to take the opportunity to learn how to collaborate with Artificial Intelligence and boost your work efficiency.

In this article, I will go through several tools that may assist you through the entire design process. To highlight different activities, we will go through the following stages of the design process:

• Project definition & scope
• Understanding the business & user problem
• UX Research
• Ideation
• UI Design (High Fidelity Mockups)
• Usability Testing

Leveraging the power of AI will make your work faster and possibly achieve results with better quality.

‍

‍

Example of the design process

The first thing that you may ask AI for is to generate a project brief. This may be helpful when you work on your portfolio and cannot show real projects or just want to practice design skills.

One of the top tools I experiment with is obviously chatGPT. It will help us to figure out the design brief for this article.

Prompt "Write three mobile designs app brief ideas" resulted in briefs for the following app categories:

• "Fitness Companion"
• "Travel Planner"
• "Mindfulness and Meditation"

‍

‍

Because the first two feel not that original, let's continue with the Meditation app brief. Here is what we received:

‍

App Brief:

"Mindfulness and Meditation"

Overview: Our mindfulness and meditation app aims to help users achieve mental well-being and reduce stress in their daily lives. Through guided meditation, calming music, and breathing exercises, this app will provide a sanctuary for relaxation and personal growth.

Key Features:

- Guided Meditations: The app will offer a diverse collection of guided meditation sessions, ranging from short mindfulness exercises to longer deep relaxation practices. Users can choose sessions based on their preferences and desired outcomes, such as stress relief, focus enhancement, or better sleep.

- Customizable Settings: Users can personalize their meditation experience by selecting background sounds, music genres, or nature-inspired themes. They can also set reminders for daily meditation practice and track their progress over time.

- Breathing Exercises: The app will provide various breathing techniques to promote relaxation and stress reduction. Users can follow visual cues and audio instructions to synchronize their breathing patterns for improved mindfulness and emotional balance.

‍

Let's use this as our client's brief, business requirements & scope. We will use that material to demonstrate how AI supports designer with further works.

Now we should dive into the deeper details to gain domain knowledge, investigate competitors and do some initial research; we will do this with chatGPT (alernatively we may also use NotionAI), but first, let's learn how to make our prompts better.

‍

‍

Better results with the right prompts.

Before we just into the real design process, let's learn how to collaborate with AI tools.

After the initial hype for generative AI that amazed many of us, we realized that AI might lie to us. However, with the right prompt construction, we can actually limit the possibility of getting fake data.

To encourage AI to be more precise and generate real data that may be verified by us, add the following phrases at the end of your prompt:

"(...) Describe your way of thinking, step by step."

You may also be more specific and add extra phrases like:

"(...) Show the detailed process and rationales behind it. Add links to the websites with data you presented."

Thanks to this, you will be able to track if AI answers correctly. Eventually, you may find the answer on the website attached to generated content.

It's still not perfect, but it significantly increases the chance of relying on real data. What's more, in time, you will notice that chatGPT, trained to add sources & links, will start to attach them if you don't add the request in the prompt.

‍

‍

Up-to-date data?

You must be aware that some tools like chatGPT are trained on some specific data set. They do not browse the internet on their own, which means they may have gaps in their knowledge, or AI may not be aware of the newest information, news, or statistics.

‍

‍

Understanding the problem & research with AI

Ok, we strengthened our knowledge about writing prompts a bit. Let's use it for our project.

To understand the problem and business goal, we have to investigate every point & thought we got from our client. Ask chatGPT or Notion AI about some terms & knowledge you want to get.

For the purpose of this exercise, let's try to analyze 3rd key feature from the brief "Breathing exercises."

"What are breathing exercises used in meditation? Which of them are popular, and how do they help people? Describe your way of thinking step by step. Add links to the websites with data you presented."

As an answer, I received three techniques with step-by-step instructions. To confirm that they were not just an invention of AI, I also received links to web pages (here is the example of breathing technique link I got ) where I could verify them. Pretty handy and useful for someone who was not that expert in breathing techniques!

‍

‍

Worth to mention that the website article was much more valuable & precise than AI, but it was still worth taking a look at what chatGPT generated to get an initial impression.

Next, we may ask AI about the issues, pain points, and main reasons people give up meditating.

Finally, to complete benchmarking & research, You may also ask AI about competitors' apps, demographics, etc. Always remember to ask for some kind of confirmation to verify generated data (I always try to ask for links).

‍

‍

When I asked for demographics for meditation apps, I got several outdated data (links led me to empty pages). So as you may see, AI is great but not perfect!

‍

‍

‍

Ideation

Computers are not creative by themselves, but we can use them to get some inspiration and ideate on solutions.

‍

‍

Ask AI to create a customer journey or user flow

AI may be useful in generating ideas for customer journeys. Adding some special commands, like specifying features that will distinguish the app from competitors, may add a little bit more spice to the results!

I used the following prompt in chatGPT: "Imagine you are a product designer. Design a customer journey for users that want to use a meditation app to use deep belly breathing exercises. Highlight the areas that may distinguish the app from competitors."

The results presented below do not present the best solution, but you may treat it as a starting point. AI is here to inspire you; you are the designer that makes the final decisions.

‍

‍

‍

‍

Optimizing your ideas

Alternatively, if you already have kind of an idea for the flow, you may describe it in chatGPT and ask a few questions too:

• Find optimization areas
• Seek for pain points
• Figure out make an extra step to delight users

If you would like to get an idea for the design with some specific approach, you may enter our project brief to dice.design tool.

Dice.design will provide you with some ideas on how to solve specific problems & requirements.

‍

‍

‍

‍

UI Design

So we have our flows. If you already have a vision of how it may look like you may sketch it and jump into high-fidelity mockups.

If you need a quick starting point, try to use these AI plugins to generate initial designs. They are not perfect, but they will give you a sort of inspiration:

• UIzard Auto designer
• Galileo

Both tools require early access permission, but worth to join the waitlist, to get notified when they go public.

‍

‍

‍

‍

Defining brand style

If your client already has brand guidelines, you are ready to go with an existing set of colors, typography, and other assets to create delightful User Interfaces.

However, many fresh ideas need to figure out the visual style of the solution. If you want to speed up the process, there are several ways to specify color palettes and typography with AI.

Obviously, you may ask Midjourney to generate some mockups, but it will be just an inspiration, a good starting point, but you will take care of the rest.

‍

‍

‍

Use these tools to setup colors

• Colormind
• Huemint
• Khroma

And leverage the power of deep learning with this one to play with font pairing for your typography - FontJoy

If the images you got have poor quality, try to use an upscaling tool like Let's Enhance, and when you need to remove the background, there are nice Figma plugins for that. You may test this one - Unbackground

‍

‍

Speed up UI Design with AI

With the previously mentioned tools, you were already able to kick off your project much faster than usual.

If you are diving into more details, like icon generation from text, and copy improvements, this tool will assist you: Magician

The team is also working on some kind of design companion; you may join the waitlist here: Genius

To generate illustrations, your first choice will probably be Midjourney or Dalle-2

‍

‍

‍

To create real 3d objects, you should join the waitlist for Spline AI tool

As you may see, for UI Design, we will get support in generating some assets like icons and illustrations. In the near future, AI will also become a better assistant helping us avoid repeatable parts of our work.

‍

‍

Improve copy

The first versions of the copy are usually far from perfect. Even if you ask an AI tool for some message, the first answer may be very generic.

To improve the quality and results, always write a prompt with additional requests & information like the tone of voice you need. The good idea is to ask for three alternative versions. Then you may pick one and ask AI to improve it further.

For copy improvements use chatGPT, NotionAI, and Jasper.

‍

‍

‍

‍

User Testing

Replacing humans during this phase will probably be the hardest thing to do. Interacting with people needs special skills, and additionally, AI won't be that good observatory soon.

However, there are some things to assist us.

First, heatmaps, even today, there is a service that will help us to simulate eye-tracking tests to figure out where the attention of the users will go.

Visual eyes promise 93% of accuracy.

Another use of AI during usability testing is to synthesize the data that you received from the users. Kraftful is the tool that should be helpful in that case.

‍

‍

‍

AI for Implementation?

There is more to come in the near future. If you work with a team, it is time to prepare a design handoff. However, if you are one of the no-coders, you will probably jump into your favorite tool and start turning your designs into real solutions.

This is the area where AI is also present. Very soon, Framer will introduce its assistant, that will immediately help you set up the website for a project.

‍

‍

Summing up

There are hundreds of tools that include AI to support us as designers at various stages of the process. Let's gather all of the tools mentioned in the article and once again highlight where they may be useful:

• chatGPT
• NotionAI
• Midjourney
• Dalle-2
• Colormind
• Huemint
• Khroma
• Let's Enhance
• Unbackground
• UIzard Auto designer
• Galileo
• Magician
• Kraftful
• Genius
• Jasper
• Spline AI tool (soon)
• Dice design
• Visual eyes
• Framer (soon)

A list of additional design tools may be found at tools.design.

Finally, remember, it's not about the number of tools you use but the results you get. If you will be able to improve your workflow only with 1-2 - go for it! It's better to master a few solutions than just waste time using 10 of them without any effects.

I hope you got inspired to jump into the world of AI supporting our work. If you seek for other time-saving tools like animated Framer Templates or Figma Design System Kits don't forget to check the ones I prepared for you - uxmisfit.tools.

Thanks for reading!

‍