top of page
  • Writer's pictureStefan Huber

How to leverage AI in the UI/UX process:


AI tools are significantly enhancing the efficiency of UX tasks. They streamline workflows by automating tedious processes, allowing you to focus on more creative and fun parts of your work. Acting as a supportive partner and assistant, these tools let you concentrate on what you truly enjoy doing. Just remember there is an AI tool out there for every step on the way!

We have split the process into 3 phases, for each we will provide tools and tips:



 

Part 1/3 - Research and planning phase


1. Audio to text

Stop typing off recordings! Utilize voice transcription AI tools such as Whisper AI to transcribe user interviews or meeting recordings, eliminating the need for manual typing.


If installing Whisper AI is too tedious, there are various mobile apps available for transcription, including Whisper Transcription, Fathom.video, Otter.ai, tldv.io and ChatGPT.





2. Photo to text


Stop typing notes off yourself and let GPT-4 do the work:

Take a photo of every physical writing (for example, workshop post-its), load it into

ChatGPT-4 to transcribe it, and let it group similar categories together.

Photograph whiteboards or hand-written notes. GPT-4 is very good at recognizing writing and
transcribing it for you.



3 . Summarize To Do’s

Summarize all inputs you get from clients, collagues in notes, tickets or emails:

Summarize client inputs or Jira tickets with ChatGPT to make them more comprehensible.

Organize your design To-Dos in a structured list for yourself and others.



Copy paste all your related ticket information, notes and chat messages and summarize your to do.



4. UX Personas

Create additional user personas with GPT by copying your real personas or by providing demographic details.


Generate pain points and user stories for all personas.

Prompt for Creating Personas, User Stories, and Pain Points:

"I need to create detailed UX personas based on my example personas, along with associated user stories and pain points. The personas should reflect a specific target audience with well-defined characteristics. Here’s what I need for each persona:

Persona Details:

  1. Name: A realistic first and last name.

  2. Age: An age range that accurately represents the demographic.

  3. Education: Their educational background.

  4. Hometown: Where they are from or currently reside.

  5. Family: Brief description of their family situation.

  6. Occupation: Their current job title and industry.

  7. Personal Quote: A quote that captures their attitude and personality.

  8. Goals: The main objectives they aim to achieve in their professional or personal life.

  9. Frustrations: The common pain points or challenges they face.

  10. Scenario: A brief story or scenario that describes their typical day, highlighting their goals, frustrations, and context.

User Stories:

  • User Story 1: As a [Persona's Role], I want [goal/desire] so that [benefit].

  • User Story 2: As a [Persona's Role], I need [feature/functionality] in order to [outcome].

  • User Story 3: As a [Persona's Role], I wish [action/task] so that [desired effect].

Pain Points:

  • Pain Point 1: Description of a common problem or frustration faced by the persona.

  • Pain Point 2: Another challenge or obstacle that the persona encounters.

  • Pain Point 3: Additional issue that creates difficulty for the persona." [Add examples of real personas, user stories, and pain points]



5. Miroboard with AI


If you use Miro you can use the AI assistent to:



  • Summarize notes and clustersimilar things together

  • Create lists

  • Add additional ideas or notes

  • Create presentations

  • Create images

  • Expand your mind maps


Example of adding additional notes based on the input note “make design”

Example: Expand your mind maps with AI



 

Part 2/3 - Inspiration and ideation phase

6. Mood boards with AI

Create mood boards with AI tools to convey a feeling for colors, icons, images, and overall look and feel.Split the generation of your moodboard into different parts:

  • Colors

  • Images

  • Look and feel

  • Icons


Moodboard - Colors

Color palettes are not a specialty of Midjourney or other image generators, so use specialized AI color palette tools like Khroma khroma.co, which lets you choose 50 colors and then trains a model based on your likes.


Or use Eva Design Systems colors.eva.design, where you specify the first color and it will generate coordinating colors for you.


Khroma khroma.co




Moodboard - Images

Create different mood board images with Midjourney, Adobe Firefly, Leonardo.ai, or similar image generators.


If you are looking for free alternatives, check out Fulljourney.


For real-time image creation based on shapes you provide, you can use Krea.




“imageheader for dog food company, photo”


"fish and chips, in the style of vietnamese backgrounds, old port, old chinese sailingship in the background, photo taken with provia"


"photo, concept design for car dealership shoroom, a white porsche stands in front of big blass windows, outside is a parking spot and a street, the porsche has a shelf with luxury rims next to it"


"product photography, beer can with yellow handdrawn floral design, white background"



Moodboard - Icons

Create different icons, logo drafts, and background textures with Midjourney, Adobe Firefly, Leonardo.ai, or similar image generators.




“simple flat icon, shopping bag set, light blue background”
“minimalistic black & white logo of octopus and chip brand”
“cute twitter logo”
“illustration icons AI”



Moodboard - Combine everything into a Moodboard

Bring colors, images, and icons together in a traditional program like Photoshop.




 


Part 3/3 - UX/UI Design phase


7. UI interfaces with AI



Use Galileo AI to generate quick UI interfaces with Figma-ready outputs.Use Galileo AI to generate quick UI interfaces with Figma-ready outputs.





8. UX Flows and Problem-solving with ChatGPT



During the UX phase, you can use ChatGPT-4, ChatGPT-4o, or Custom GPTs from the GPT Store like “UX GPT” to tackle complex design problems.


Examples:


  • Provide UX flow formultilevel checkboxes

  • Give ideas for UX flowswith the goal to ...

  • UX review this page: [insert URL]


Example: “what is a good ux flow for a multimlevel menu?”



9. UX Flows and Problem-solving with ChatGPT


After or during the UX phase, you can use ChatGPT-4, ChatGPT-4o, or Custom GPTs from the GPT Store like “UX GPT” to analyze your designs.


Upload a screenshot and let it analyze your design.


“UX analysis of [insert screenshot]”



10. Presentation with AI support


Use tools like Gamma.app to create instant professional presentations and export them as PowerPoint/PDF or publish them online.


Use ChatGPT to explain your concept ideas more professionally and spellcheck all your presentation slides.


Gamma.app is the best Powerpoint AI generator that we found in our research.


 

Takeaway:

Use AI tools and techniques to transform your UI/UX design process. From initial research and planning to prototyping, testing, and continuous improvement, AI can be a powerful ally in creating exceptional user experiences.



26 views

Comments


bottom of page