Artificial Intelligence (AI) has undeniably become a huge part of the design process. As UX/UI designers in this AI-driven era, it's crucial that we embrace and incorporate AI tools into our daily workflow.
Through my research and experimentation, I've explored various AI tools, assessing their integration into my design process, from the discovery phase through to the final delivery. Let's explore how AI can enhance our design process in a hypothetical scenario.
Imagine you run a business that allows people to book alpacas for their events. You have six alpacas available, and customers are limited to booking a maximum of two for no more than two hours to ensure the well-being of the animals. Currently, customers can only book via phone, making the process cumbersome, resource-intensive, and challenging to manage the schedule effectively.
To streamline and modernize the system, you decide to digitize the booking process. Let's utilize AI to develop a comprehensive digital booking system, covering the entire process from start to finish.
Using AI tools effectively
ChatGPT
I know it may seem obvious, and you might think, ”Well, I already know what I can do with ChatGPT,” but wait, it goes beyond simply replacing Lorem Ipsum.
ChatGPT has the potential to breathe life into user personas by generating responses that mimic real user interactions. In our case, we can utilize ChatGPT to generate initial ideas from a UX and research perspective. Let’s see if it can help us understand our target audience.
Here is my initial prompt:
ChatGPT gave quite a good suggestion to start with:
Introducing a fictional scenario can significantly aid the entire empathetic process. Let's explore how ChatGPT can help us in creating user personas.
ChatGPT can be used as a source of inspiration, effectively complementing existing user personas. This is particularly advantageous for projects facing limitations in terms of budget or time, where traditional user research processes may be challenging to implement. However, it's important to acknowledge the cons.
The insights that come from this approach may be hypothetical, potentially far from the actual experiences of real users. In my view, while this method can offer valuable insights, it should be approached with caution, and efforts should be made to balance it with more robust user research methods where feasible.
QoQo
With QoQo, you can create user personas, improve your UX writing, generate user journeys, and even craft user interview scripts. What makes it more convenient, when compared to ChatGPT, is its integration as a Figma plugin.
Note: QoQo works as a plugin on Figma.
Now that we have identified target customers and user personas let's visualize them and create a customer journey map with QoQo. I utilized one of the personas that ChatGPT gave me, and QoQo developed and expanded it in more detail.
After trying QoQo with a sufficiently detailed brief, my impression is that it excels at generating thoughtful personas and customer journey maps.
I find it incredibly useful as a starting point for fostering empathy with target customers. It serves as an excellent tool, particularly for preparing workshops and collaborating with stakeholders.
QoQo not only saves time but also provides a comprehensive starting point that covers almost all aspects of the user journey. However, obtaining real data from your users is the most important and credible way to inform your design decisions. Therefore, it's crucial to acknowledge that this tool cannot replace the user research and discovery phase in your design process.
TheyDo
TheyDo helps in generating user journeys that promote cross-functional collaboration and insightful analysis. This tool automates the mapping of insights, extracting and categorizing key findings from customer feedback and interviews. It even identifies and highlights the most impactful themes, making it an invaluable asset for your design process.
Unfortunately, I haven't had the chance to try the journey AI features of TheyDo as it is still being developed, so I can't provide a concrete review of this AI tool. However, based on the basic features, one aspect that stands out as more helpful than QoQo is its ability to integrate user research insights into the software and create a user journey based on this.
The AI assists in categorizing the data and transforming it into actionable insights. As I haven't tried it yet, I remain somewhat skeptical about how effectively it can handle user research data, given its vast and diverse nature. User research data encompasses both quantitative and qualitative, and dealing with qualitative data may pose a bit of a challenge.
Relume
This AI tool excels in quickly producing sitemaps and wireframes by utilizing a versatile component library that allows for effortless layout adjustments. The resulting designs can be seamlessly imported into Figma.
Returning to our case of creating a booking system for renting alpacas, Relume AI provides a starting point for the sitemap, especially when given a detailed prompt, as results and copywriting improve with this.
It serves as both an inspiration and a customizable foundation, allowing easy modification of the sitemap. This, in turn, facilitates the creation of wireframes with actual content (as opposed to generic Lorem Ipsum text), and I appreciate that aspect.
The tool is particularly useful for responsive design, enabling the testing of various layouts through its library or customization based on your ideas. In my experience, it significantly reduces the time spent on manual work during wireframe creation, allowing more focus on crucial tasks such as iterating solutions and preparing for user testing with these detailed wireframes.
UIzard
I find the wireframe above to be entirely unrelated. Do you think it looks familiar? It resembles the layout of Airbnb.
With the free version, UIzard only provides a wireframe based on your prompt and displays the UI as a preview. However, when comparing the wireframes generated by UIzard with those from Relume, the former appears less sophisticated. The results and content are not as aligned with the prompt. For instance, UIzard uses Lorem Ipsum text, making it challenging to see the value of the wireframe beyond a generic layout.
Moreover, the generated UI seems rough and not suitable for use as a final design; it requires significant changes. The layout is rather generic, providing limited inspiration.
Let’s generate the UI again and use it to move to the next phase:
Attention Insight
Attention Insight is an AI-powered tool that provides attention heatmaps to identify potential performance issues during the design phase for various interfaces, from websites to mobile apps.
Let’s find out if the Alpaca website design that we got from UIzard captures user attention effectively:
My impression after trying Attention Insight is that it's a helpful tool with versatile applications. Beyond providing a heatmap, it also offers a clarity score based on various design aspects, including the amount of text, contrast, size, and color saturation. However, I would appreciate more detail on how they calculate this score and the criteria for generating the heatmap. Since the data doesn't come from real users, the results should be used as a reference.
There are several use cases that come to mind; for example, it is invaluable for A/B testing and ensuring that your design effectively captures the attention of users.
Attention Insight can also serve as compelling evidence in design pitches to stakeholders, helping to illustrate the rationale behind design decisions.
The tool proves most effective when you have clear design goals. For example, if your objective is to draw more attention to the call to action (CTA), Attention Insight can analyze design iterations to determine which aligns best with your objectives.
Other tools that support UI design
Magician (Figma plugin)
As a Figma plugin, Magician streamlines the design process by swiftly generating images, icons, and text, significantly enhancing the efficiency of your design workflow.
Icons8 Background Remover (Figma plugin)
For creating polished, versatile graphics, this Figma plugin is essential. It simplifies the task of removing backgrounds and ensures your graphics are clean and ready for a variety of applications.
AI and opportunities for the future
AI isn't something to fear; instead, it's an opportunity to learn and grow in your design practice. Most UI/UX design AI tools are to inspire and empower designers to create exceptional user experiences. However, it is crucial to be aware of the limitations of AI when designing for humans, such as potential issues arising from a lack of context or resources on specific topics.
Additionally, ethical considerations play a significant role in ensuring responsible AI use. By maintaining awareness of these factors, we can utilize AI tools in the most effective way.
Embrace AI in your daily work, and you'll discover how it can enhance your design processes, streamline tasks, and fuel your creative inspiration. The possibilities are endless, and the future of design is undoubtedly intertwined with the capabilities of artificial intelligence.
When striving for brand success, some companies prioritize UX while others don't. This could be because of the uncertainty surrounding the financial return of UX design and how it impacts businesses. Read our blog post to learn more.
Published: Dec 12, 2023
