Artificial Intelligence Meets UX Research and Design Part II: Creating UX Design Artifacts
In my last article, I explored how artificial intelligence can streamline activities related to discovery and user research preparation. I established the foundation of a fictitious company, using AI to create starting points for a business plan, market research plan, information architecture, a user research plan, and more.
This article will focus on the topic of using AI to create image assets. Specifically, exploring the capabilities of AI tools for designing wireframes, developing style guides, and crafting high-fidelity mock-ups. My experiments were focused on how designers can unlock new possibilities for creating visual assets and user-centric experiences.
Wireframes
To start my fictious company, of course I need a website. Let’s see if AI can help me out. In my experiment. The main tool I used was https://uizard.io. This tool is in beta, and it can be used to create wireframes or hi-fidelity mockups by entering text prompts using a feature called Autodesigner.
In my last article I used ChatGPT to generate information architecture and other artifacts. ChatGPT is designed to interact with people using natural language. It can answer questions, provide explanations, generate creative text, assist with various tasks, and more.
Incorporating the information architecture, I used ChatGPT to generate a prompt that I could use to create wireframes in Uizard, to see what kind of wireframe results I would get.
Here is the prompt I gave Uizard:
Design a home page for a B-Corp t-shirt company. Create pages for each of these sections: Home, About Us, Our Mission, Our Sustainability Practices, Our Community Impact, Shop, Product Page, Partners, Blog, Contact Us, About Our Materials, Cart, Checkout pages, My Account
The prompt gave me an error:
Autodesigner works best when given creative freedom, do not try to specify individual component locations or pages.
I iterated on the prompt and removed the page specific details. Eventually, I got to something usable by using this prompt: Design high-level pages for a B-Corp t-shirt company. Here are the wireframes the AI generated:
Overall, I would say the results were…decent. The wireframes were consistent and actual content was generated so I didn’t need to create placeholder content. I was happy to at least have a starting point and manipulate the content as needed. On the other hand, there are a few limitations. The prompt only supports 300 characters. Ideally you should be able to submit project requirements with user stories. Defining specific pages to generate is also prohibited. Being able to define what pages you need is essential (about, product page, etc).
This tool also supports generating hi-fidelity mockups, but It seemed that no matter what style prompts I submitted, the user interface felt like a PowerPoint slide with bad clip art. Here is an example of high-fidelity mockups that were generated:
Style Guides and High-Fidelity Mockups
The next step after wireframes is creating high-fidelity mockups - design that you would see in the final product. This often includes incorporating a style guide - a comprehensive set of rules, guidelines, and standards that define the visual and interactive design elements of a website or web application. I played around with Midjourney to see what it could do specific to creating a style guide and high-fidelity design. Midjourney generates images from natural language prompts.
Using several different text prompt approaches, I received varied results.
AI generated website style guides. Source: Midjourney
AI generated website style guides. Source: Midjourney
In this portion of the experiment, there seem to be more limitations than advantages. I will say, as with many AI tools at least it sparked some interesting concepts quickly. It’s an okay starting point to help focus on specific design options for further experimentation. As for limitations, there is a bit of a list:
Conclusion
These tools are great for generating new ideas and having a starting point to explore from. The tools are quick. Creating wireframes took under 2 minutes. They needed refinement but established a starting point. The ability to generate a full style guide was lacking. Given enough time, I might have been able to get Midjourney to create something suitable, with exception of font related styles. Creating high fidelity mockups was also quick, but the results weren’t sufficient and had elements that were often bizarre. Design tools have traditionally been fragmented. That is also true with the abundance of AI tools that are emerging.
In the future I see opportunities for a suite that supports AI generated design from beginning to end. It could support prompts with specific requirements on what pages you need, or at an even higher level, what problems you are trying to solve. It could integrate with a design style guide. Potentially the need for wireframes goes away. That has always been a lightweight way to share initial design ideas, but if AI generation can go straight to high fidelity mockups or even coded design in minutes, the need for lightweight design methods becomes less valuable. This would allow the designer to focus on problem solving, as well as refining and testing design ideas.
I’m speculating of course. It’s hard to tell where things are headed, but it’s certainly fun to explore and experiment!
Reach out if you have an interest in learning more about how generative AI can help your organization in the area of UX Design and Research.