AI UX Design: Non-Traditional UX design process for AI products

Anna Demianenko Photo
Anna Demianenko
Design Lead
July 26, 2024
Articles
15
min read
Summary

About pre-made interface layouts that will become a thing of the past, modular design systems that will rebuild the interface dependent on the user’s intent, a no-standard design process for AI user experience, and real example of UX design workflow for AI platforms.

AI can be a game-changer for customer engagement—if integrated thoughtfully into the user experience. When done right, it leads to a deeper understanding of customers, driving business growth. The synergy between ai and ux design enhances product accessibility and user experience.

For brands developing AI products tailored to their users’ needs, Lazarev came up with a unique approach to UI UX—a generative interface that can build itself up depending on users’ queries. What does it mean to design user scenarios instead of mockups? How does designing for AI differ from traditional UI/UX? Find answers to these questions, backed by real examples, in the article. Additionally, we explore the potential impact of AI on the future of UX design, specifically questioning whether AI will replace UX designers.

Since 2017, Lazarev has been designing UX for AI products and succeeded with clients like Accern.

UX Design for AI, Step One: User Research

Once you decide to implement AI technology into your digital platform or create a new solution with AI, it starts with looking at who you create for and later seeing if your tech stack can support these hyper-personalized experiences. Innovation workshops are great places to start to gather key insights. So our UX designers begin with the standard procedures of product discovery, requirement and user behavior analysis, focusing on answering several crucial questions:

  • Who is our customer?
  • What are we trying to build for them?
  • What metric are we aiming to affect?
  • What changes do we expect post-innovation?

Answering these questions we analyze user data and establish the foundation for successful AI innovation ensuring we know what we are doing, why we are doing it, and for whom.

To strengthen relationships with customers brands need to go beyond segments and user persona. With the help of AI, a brand needs to understand every user’s personal sentiments, curiosities, and needs and address them all giving a hyper-personalized user experience.

That’s why, our ux professionals conduct thorough user research to collect data, shaping and outlining job stories, which we may then place on a customer journey map. This helps us understand how customer needs evolve over time, how people navigate their repetitive tasks, and which parts of their day, journey, or lifecycle could be enhanced by our product.

Research deliverable example
It is crucial to note that at this stage, we do not discuss features, solutions, or any specific AI applications. Approaching innovation with a vague intent to "implement AI" without a clear user need will lead to failure. Thus, our focus here is on identifying customer problems, areas for improvement in their lives and within existing products, and how our product can influence their journey.

With a clear understanding of product requirements and customers, we do a competitor analysis and reference research to understand the market, identify solutions to customer problems, and assess current AI solutions.

Referencing Don Norman’s pillars of product design — technology, user, and business — is crucial here. We ensure the user and business aspects are thoroughly covered before exploring the technology aspect.

Step Two: Technical Discovery & ideation

While the first step may span from two to four weeks, the second step, technical discovery, is more concise but equally essential. This stage involves answering fundamental questions about the technical possibilities for development:

  • What is the expertise of our development team?
  • What budget is allocated for development and data acquisition?
  • Will we train a language model in-house or use an existing solution?
  • Do suitable solutions exist?
  • Do we have the data to train our own model?
  • Can we acquire or generate the necessary data?
  • What frameworks are accessible and affordable for us to use (e.g., machine learning, NLP, computer vision)?

During the technical discovery stage, we also address questions about the capabilities of natural language processing (NLP), continuous improvement of language and machine learning models, data security, and gathering user feedback on AI performance. This is where the integration of an AI tool can significantly enhance our process by automating tasks and improving efficiency.

That’s where we can finally start thinking of solutions, so we together with the development team lock ourselves up for a few sessions of intense brainstorming to find the best way to address customer needs while also staying within what’s technically possible and within budget.

Design and development teams in discussion of AI integration

A prime example of the power of our technical discovery and ideation process is the news aggregator VT.com. The client approached us with a vision: an AI-driven platform that could analyze news for bias.

During the research phase, our team uncovered the product’s real potential—its ability to collect, analyze, and summarize news from multiple sources and detect bias. The work of an AI UX designer and an AI UX researcher resulted in an AI-driven platform that meets the growing demand for reliable, fact-checked information in the digital age.

That's how AI reinvented transparent journalism.
AI-powered news aggregator interface designed by Lazarev.

Another example—Rhea, a FinTech platform for financial analysis by Accern. While diving into the tech side of the project, we discovered its potential to customize its language model for financial analysis, training it on Accern’s proprietary ten years of historical data. This insight inspired us to develop key product features like market analysis, trend prediction, and data-driven decision-making, leveraging both historical and open-source information.

Building on this research, we crafted a strategy where the interface dynamically generates widgets based on the design system, adapting to user queries. For instance, when an analyst requests financial data, the system automatically produces relevant charts and widgets tailored to the specifics of the query. This approach enhances the “jobs to be done” for our core audience—financial analysts—by delivering actionable insights seamlessly.

UX Design for AI Fintech product
Modular design system, AI Fintech platform

Here’s another example of how our AI UX team’s technical discovery and ideation shaped a platform designed to help in-house legal teams efficiently find and access relevant legal data while cutting through unnecessary noise. The client initially requested a UX design that followed best practices and provided an upper hand in sales efforts for the platform.

We began with user research (step one in our process), followed by tech research, where Lazarev’s AI UX team discovered that the platform’s language model was trained on a vast dataset of well-structured reports. With this in mind, we developed a machine learning algorithm that can analyze a user’s company profile and, based on extensive data, generate legally accurate reports.

Now, the platform doesn’t just offer intelligent search and summarization—it also generates legally compliant report templates tailored to each user’s company profile and peer group examples.

Legal research assistant conversational interface

Step Three: Use Scenarios & Testing Feasibility

Typically, UX designers work with a predefined layout and static features. In contrast, our method involves anticipating the needs the target audience might encounter within the context or industry in which our product operates and encompasses all potential use cases that we researched through user interviews. So during this next step, we design possible use scenarios and user flows for the features within our interface.

AI tools can automate the task of creating wireframes, enhancing the workflow by allowing designers to focus on more creative aspects of the design process. This automation streamlines routine tasks like wireframing, enabling designers to save time while generating multiple design variations that can be further refined.

By leveraging a decision tree and contextual data, such as time of day, location, and past behavior, AI better interprets user intent and dynamically generates multiple variations of how the interface builds itself based on user queries. This is achieved through a modular design system with simple predefined rules (we’ll cover the modular system in more detail later in this article).

To better understand how it works, think of a search engine. For instance, if a user searches for places to hang out and the system detects wildfires in the area, it will automatically display a warning widget about the fires. Or, if someone searches for sensitive topics like death, the AI may present resources like a suicide prevention hotline

HOW IT WORKED BEFORE 😤

Consider a traditional search engine, it processes input based on:

  • keywords, 
  • semantics, 
  • and query expansion. 

Then it spits out a pile of links, images, and ads—all ranked by SEO metrics and keyword relevance. But here's the problem: it lacks a real understanding of what the user actually wants, like an evil genie granting literal wishes without grasping the intent behind them, drowning users in a sea of results.

HOW IT WORKS NOW 🔥

With AI in the mix, we can decode user intent by classifying use cases and scenarios pre-trained in our machine learning model. By analyzing natural language, sentiment, and user context, we refine inquiries to deliver hyper-personalized, ready-made solutions—rather than just a flood of search results.

Simplified visualization of use scenario tree of variations

Let’s walk you through how pre-trained use cases and scenarios come to life with our Pika AI project—an AI-powered search engine. When a user types “best places to eat near me,” the AI instantly classifies this as a planning scenario. Within planning, it breaks down into subcategories like hobbies or outdoor activities. Under the "spending time outside" category, it narrows down to options like traveling or staying local. For evening plans, for example, the AI takes into account factors like weather, attire, ratings, pricing, and trending spots to create a fully personalized evening date planner—no guesswork is needed.

Another use scenario of Pika AI could be navigating business logistics. In this scenario, the system factors in the best route, weather, time of day, and whether the destination is for leisure or business. Answering this user query, the interface adapts—looking completely different from the one designed for a date planner, ensuring a tailored experience every time.

AI search engine, modular design system
Hyper-personalized AI search engine

To dive deeper into how use scenarios work, let’s revisit Rhea, the FinTech platform we mentioned earlier. For this AI-driven FinTech product, we crafted use scenarios around the tasks our primary persona—financial researchers—carry out as part of their daily workflow. Each task translates into an interface element, represented by a widget, and is supported by machine learning and the conversational AI interface. These tasks include:

  • Evaluating industries
  • Assessing regions
  • Comparing peers
  • Analyzing trends
  • Monitoring product reviews, news, forums, and discussions
  • Evaluating startup potential
  • Making data-driven decisions
  • Communicating data-driven insights to the team
Left: Rhea's main workflow; right: set of appropriate widgets

For Rhea 2.0, we’ve taken personalization to the next level by expanding the diversity of “Lenses.”

Think of financial analysts specializing in Venture Capital, others focused on Equity Research—each with unique workflows, needs, and even conflicting priorities. To accommodate these variations, we developed a system of distinct “Lenses,” with each bundle tailored to a specific set of use cases, rules, and constraints. These Lenses are powered by LLMs trained on corresponding data..

Each Lens also comes with its own modular design system, enabling hyper-personalization for its users.

Rhea’s Lenses:

  • Venture Capital
  • Equity Research
  • Product Research
  • And more to come...

We applied a similar approach when structuring Suits AI, a mobile app featuring a virtual assistant designed to boost productivity for professionals. During our tech research phase, we identified the need for multiple language models, each trained on datasets with predefined rules and use cases tailored to specific roles. 

  • Business Assistance
  • Design
  • Marketing Research
  • Sales
  • And more...
AI assistant app designed before it was cool

Once we’ve mapped out scenarios and brainstormed tech solutions, we collaborate closely with the development team to conduct a series of feasibility tests and proofs of concept. This crucial step helps us assess whether the proposed scenarios can be effectively managed by AI, deliver the expected outcomes, and remain scalable within budget constraints. If certain features prove unfeasible or are limited by existing constraints, we pivot and develop alternative solutions that continue to prioritize user needs.

This rigorous approach ensures that we’re not just creating innovative solutions, but also building viable ones that align with real-world requirements.

Step Four: Identifying Challenges Users Face with the AI-Powered Interface

At this stage, we prioritize ensuring that users feel comfortable, safe, and confident when interacting with AI within our products. Our aim is to maximize the usability and value of artificial intelligence for our users. Here are some common challenges we tackle, along with examples of how we address them:

  • How can we communicate the model’s level of confidence?
  • Can we provide the output resource and reference?
  • How might we overcome the Articulation Barrier?
  • How might we utilize the use of context?
  • How might we minimize the risk of mismatching output?
  • How can we increase the accuracy of output?

Throughout this process, we keep the user's ultimate goals in focus—not just the mechanics. Our aim is to streamline the user journey by identifying and automating any steps that can be simplified.

Keep in mind to focus on the final goal of the user, not on the process. Ideate the ways toremove all the steps that can be automated in the user's journey.

One of the key challenges we face is overcoming the articulation barrier. To tackle this, we employ clarifying questions. For example, let's revisit Rhea AI. The system assists users by asking clarifying questions based on contextual clues and tags. This method not only enriches the context but also highlights advanced functionalities within the product, such as enhanced search capabilities and contextual actions within the conversational interface.

Rhea clarifies context important for efficient output

Another challenge is effectively communicating the model's confidence level and the reliability of the information it provides. In the Rhea AI project, we address this by displaying the number of sources from which the information is derived. This transparency not only reinforces the trustworthiness of the data but also allows users to see the actual sources utilized, fostering greater confidence in their decision-making.

Interface displays the amount of sources backing up the news

In the project for lawyers we talked about, we tackled the same challenge by showing document snippets used in chatbot replies, highlighting which ones are currently stored in the “memory buffer” or conversation context.

We also focused on enhancing user control and flexibility. By allowing users to adjust the AI model’s “memory buffer,” they can modify the context of the conversation as needed. This feature empowers users to shape interactions more dynamically, giving them the freedom to tailor the experience to their specific needs.

The interface shows data sources and snippets and allows adjustments

Step Five: UI Design, Modular System and Usability Testing

We return to a traditional approach to interface design, infusing it with a modern twist. This phase involves more scripting and creating functional prototypes by AI UI designer to establish the overall layout and visual design of the product. We meticulously plan the information architecture and conduct usability tests to ensure optimal usability and effectively address core scenarios.

At the heart of this step is the creation of a robust design system that includes a set of rules and a modular grid. Our machine learning model is trained to utilize widgets and populate the grid from the design system based on the current user scenario.

Pre-made interface layouts will become a thing of the past. With the power of Generative AI and Machine Learning we can make the apps rebuild themselves for each specific task. 

The ux designer’s role is to educate the AI on real users needs for each product and to establish how widgets relate to user prompts in the most intuitive and effective way.
Left: examples of design system elements; right: modular grid column priority breakdown

Step Six: Refining User Onboarding, Conducting More Tests, and Handoff

In this final stage, we focus on ensuring that all features are accessible and easily discoverable for the sake of an intuitive user experience. We prioritize providing users with constant access to help, support, and documentation. Through extensive evaluation and testing of the user interface, we confirm that users understand how to interact with the AI, feel comfortable with its output, and grasp how it operates. This thorough preparation sets the stage for a smooth design handoff. What follows is an entirely new chapter in the journey.

How is AI itself used in UX design for AI?

In this article, we’ve outlined the unconventional approach Lazarev takes to crafting a seamless user experience for AI-driven products. Our methods, backed by real-world examples, demonstrate the effectiveness of this process. However, the debate over whether AI can completely replace human UX designers or at least complement the design process remains relevant.

The integration of AI and UX design enhances accessibility in digital products, particularly for individuals with disabilities. AI can facilitate various accessibility features such as voice recognition and color adjustments, thereby enhancing the overall user experience.

AI tools undoubtedly enhance the UX designer’s job. At Lazarev, we are combining AI technologies with UX tools when working on UX projects incorporating AI. For instance, the AI feature in Figma helps organize layers and generate vectors based on descriptions. Similarly, tools like Photoshop utilize AI to create backgrounds and swap design elements. ChatGPT aids in user research, while other AI tools can cluster and summarize interview data efficiently.

Benefits of utilizing AI in the UX Design process

The benefits of AI in UX design are numerous and impactful. AI can help designers:

  • Analyze large volumes of user data: Gain deep insights into user behavior and preferences, allowing for more informed design decisions.
  • Generate design options and automate repetitive tasks: Free up time for designers to focus on more creative and strategic aspects of the design process.
  • Improve user research: Create more personalized user experiences by understanding individual user needs and preferences.
  • Optimize design workflows: Increase efficiency and streamline the design process, making it more agile and responsive.
  • Enhance collaboration: Facilitate better communication and collaboration between designers and stakeholders by providing data-driven insights and recommendations.

Importance of Human Expertise in AI UX Design

While AI has the potential to revolutionize the field of UX design but to develop an exceptional AI-powered product, human oversight in user research is essential. Ideas must originate from people, and many aspects of the design process remain far from automation. The creative and nuanced understanding that human designers bring to the table cannot be replicated by AI alone.

Final words about AI UX design

Building personalized experiences with AI is not an option today. More and more brands build their own models and while data is essential for that—it is only part of the equation. A great part of it is creating an AI user experience. The personas along with pre-made layouts will soon become a thing of the past giving the place to address the needs of each user.

There is ongoing debate about whether AI will replace UX designers. While AI will undoubtedly transform the field, the importance of human-centric skills such as empathy and collaboration suggests that human UX designers will remain essential.

Do extensive UX research to set the stage for hyper-personalized UX design and use the modular design system. Also, consider partnering with AI specialists or design agencies like Lazarev that can provide a tailored solution that aligns with your specific business needs.

Zach Roy Photo
Zach Roy
Royalty Apparel Team
Marlena Stablein Photo
Marlena Stablein
Director of Operations, Blavity
Valeriia Mashyro Photo
Valeriia Mashyro
Project Manager
Viktoria Levchuk Photo
Viktoria Levchuk
Content Manager
Kyrylo Lopushynskyi Photo
Kyrylo Lopushynskyi
3D Designer
Konstiantyn Potapov Photo
Konstiantyn Potapov
Project Manager
Oleksandr Golovko Photo
Oleksandr Golovko
UX Researcher
Anna Hvozdiar Photo
Anna Hvozdiar
Director at Prytula Foundation
Ostap Oshurko Photo
Ostap Oshurko
Design Lead
Nielsen Norman Photo
Nielsen Norman
Stas Tsekhan Photo
Stas Tsekhan
Head of HR
Anastasiia Balakonenko Photo
Anastasiia Balakonenko
Design Lead
Oleksii Skyba Photo
Oleksii Skyba
Webflow Development Lead
Isaac Horowitz Photo
Isaac Horowitz
Founder at Blockbeat
Danylo Dubrovsky Photo
Danylo Dubrovsky
Senior UX/UI designer
Hanna Hvozdiar Photo
Hanna Hvozdiar
Director at Prytula Foundation
Oleksandr Holovko Photo
Oleksandr Holovko
UX Designer At Lazarev.
Emily Thorn Photo
Emily Thorn
CEO at Thorn Associates
Oliver Hajjar Photo
Oliver Hajjar
CEO & Co-Founder at ShopSwap
Kenneth Shen Photo
Kenneth Shen
Managing Partner at Half Past Nine
Safwan Al Turk Photo
Safwan Al Turk
CEO at Conscious Baboon
James Crane-Baker Photo
James Crane-Baker
CEO at Gigworkers
Laith Masarweh Photo
Laith Masarweh
CEO at Assistantly
Katie Wadsworth Photo
Katie Wadsworth
Head of Product at WellSet
Matt Hannam Photo
Matt Hannam
Executive Director at Kin
Jorden Beatty Photo
Jorden Beatty
Co-founder at DASH
Kumesh Aroomogan Photo
Kumesh Aroomogan
Founder at Accern
Andrey Gaday Photo
Andrey Gaday
Head of Design at Lazarev.
Aman Kansal Photo
Aman Kansal
Co-Founder at Encyro Inc
Nicolas Grasset Photo
Nicolas Grasset
CEO at Peel Insights, Inc
Jens Mathiasson Photo
Jens Mathiasson
CPO & Co-founder at Fieldstream
Josh Allen Photo
Josh Allen
CEO & Founder at Tratta
Kenneth Shen Photo
Kenneth Shen
Co-founder at Riptide
Tommy Duek Photo
Tommy Duek
Founder of Teachchain 
Maxence Bouvier Photo
Maxence Bouvier
CEO at Mappn
Ibrahim Hasani Photo
Ibrahim Hasani
Co-Founder & Head of Engineering at Metastaq
Boyd Hobbs Photo
Boyd Hobbs
President & Owner, NODO Film Systems
Nick Chapman Photo
Nick Chapman
Founder at Pika AI
Anna Demianenko Photo
Anna Demianenko
Design Lead
Oleksandr Koshytskyi Photo
Oleksandr Koshytskyi
Design Lead
Kseniia Shyshkova Photo
Kseniia Shyshkova
Head of PM
Volodymyr Khliupin Photo
Volodymyr Khliupin
Head of UX
Yurii Shepta Photo
Yurii Shepta
Head of Marketing
Kyrylo Lazariev Photo
Kyrylo Lazariev
CEO and Founder
No items found.

Read Next

The Gestalt Principles of Design: How Design Forms Visual Perception

Effective Design Principles for Crypto Web Design

Articles

How to design an AI interface users will trust in 2024?

Articles

How AI Influences Design and the Reciprocal Impact of UX on AI-Driven Products

Articles

Top 7 US Design Agencies: Unleashing Creative Excellence

Articles

Lazarev becomes a Professional Webflow Partner

News

AI-based industrial software Canvass AI secures $7.5M in funding

Success Stories
00 FPS