AI + UX: Product Design for Intelligent Experiences

Rate this content
Bookmark

The unfolding AI revolution presents us with unique opportunities, challenges and responsibilities for designing our future. Learn how to exercise your critical thinking skills when it comes to integrating AI in your design craft, and how to build a solid ethical mindset around making design decisions in the Age of AI. Guided by Ioana Teleanu, the Lead Product Designer for AI at Miro, we'll explore the main themes that we need to reflect on as designers participating in shaping the future of humanity.

This talk has been presented at C3 Dev Festival 2024, check out the latest edition of this Tech Conference.

FAQ

The speaker is a product designer who started their interest in AI while working at UiPath on a product called Clipboard AI, which won Time Magazine's Best Invention of 2023 award. They are currently designing for the collaboration space at Miro.

The speaker believes AI is losing hype because there aren't as many valuable use cases as expected, companies are losing trust due to lack of return on investments, and the industry is entering the 'trough of disillusionment' according to Gartner's hype cycle.

Challenges include working with bias in AI systems, ensuring safety and security, dealing with the unpredictability of AI outputs, building trust and transparency, and navigating issues of ownership and intellectual property.

Designers should start with people, fight bias, ensure safety and control, make technologies accessible to everyone, be accountable, promote good, help people grow, build trust, and design systems that age well.

AI can enhance user experiences by making products more relevant through personalization and context awareness, decluttering apps, making products more accessible, and being helpful by explaining itself better to users.

Potential pitfalls include overpromising what the AI can do, disappointing users with less-than-expected results, and losing user engagement if the AI-generated content is not up to par.

The speaker believes AI will not replace human designers because AI cannot yet figure out the problems to solve, requires multidisciplinary efforts to deliver solutions, needs a lot of guidance, and lacks empathy and a true understanding of human psychology.

The speaker believes AI will become an implicit part of product solutions rather than a special feature, helping to remove friction from workflows and enabling people to express their creativity even if they lack traditional skills.

Companies should experiment with AI technologies, look for meaningful opportunities to use them, and set realistic expectations internally and externally about what AI can and cannot do.

The 'intent-based outcome specification' paradigm involves giving the computer a goal, which it then understands, deconstructs, and makes decisions to create the desired output, reversing the traditional locus of control in design.

Ioana Teleanu
Ioana Teleanu
28 min
15 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
AI design challenges include bias, safety, and security. Trust and transparency are important in AI. Design principles for AI include user control, fighting bias, and promoting good decision-making. AI can enable the design process and investors expect to see it included in products. AI empowers individuals to create and share ideas, but managing expectations is crucial.

1. Introduction to AI Design

Short description:

I'm a product designer and I don't consider myself an expert in AI and design. I'm a collector of interesting ideas about design and I add a layer of personal experience on how I interpret those and then communicate them. I've cut down this talk to 20 minutes to make as many points as possible. My interest in AI started at UiPath where I worked on a product called Clipboard AI. It won Time Magazine Best Invention of 2023 award. Now I'm designing for the collaboration space at Miro.

Hi. I'm super excited to be here. I'm always part nervous, part very excited to talk about design. Since I'm a product designer, I'm going to start with some problem scoping. I just want to start by saying that I don't consider myself an expert in AI and design. I don't know who is at this stage of the industry, but I'm a collector of interesting ideas about design and I add a layer of personal experience on how I interpret those and then communicate them.

And then secondly, typically I do this talk in 40 minutes, one hour, but I've cut it down to 20 minutes, so, if it feels a bit rushed, just bear with me. It's going to be like looking at a 1.2 speed video, but, yes, I just want to make as many points as possible, so thank you for bearing with me.

Now, my interest in AI started at UiPath which is a company that does robotic process automation. I worked on a product called Clipboard AI, which actually won Time Magazine Best Invention of 2023 award, and it got me excited about the industry and the new problem space and the challenges and opportunity it's presenting us with, and then I joined Miro, and now I'm designing for the collaboration space, which is very exciting for a designer. I'm basically designing for myself and, yes, this is the background.

2. Challenges in Designing for AI

Short description:

AI is losing hype, but it's here to stay. We need to design for AI by understanding its challenges, such as bias, safety, security, and designing for probability. AI systems reflect the world we live in, but we can change that by feeding them more representative data. We must be responsible in setting the foundation for AI technologies, as it will shape who we become as humanity.

And now let's see what AI is doing right now. It's losing steam. It's losing hype. It's less exciting. There aren't as many valuable use cases as expected. Companies are kind of losing trust. They were investing a lot of money in these technologies and they're not yet seeing a return on investments, and so there's generally, if we look at the Gartner's hype cycle, we're entering the era where the peak of inflated expectations has ended and people are generally in this trough of disillusionment around what AI can do for us.

But what's interesting when you look at this graph is that sure, we're going to say AI is doing nothing as promised and it's just infant technology, super immature, but it's going to get there, and we're going to see finally standards and best practices and frameworks that we can reference as designers, as builders, and then it's going to stabilize, so it's here to stay. Let's see how we can design for it since it's going to be with us from this moment on.

To frame my thinking around how we should design for AI, I'm starting from the definition of what AI is. And of course, there are multiple ways in which you can define AI. One way to think about it is as a collection of tools that we now have available, and if you think about these tools that we're using to shape products, to shape experiences, to shape the world, it kind of makes me be a bit poetic or philosophical and think that if we're now shaping these tools, we're essentially shaping ourselves, or at least our future, the future of human experience, and so essentially how we will work and live. So this is a quote by John Culking, we shape our tools, thereafter our tools shape us. What we design ends up designing us. If you think about the world in general, the furniture we design, the architecture, cities, workplaces, products, experiences, conversations, everything we design contributes to the way we experience the world. And so it essentially shapes us. Which is exciting, but it's also a call to responsibility in the age of AI where everything is ambiguous, not regulated, there are no clear standards or rules, guidelines, guardrails. So we have to be even more responsible than before because the way we set up this foundation for these technologies will essentially shape who we become as humanity.

Now, if we want to get that right, we have to start from the challenges, at least this is now putting my designer hat on and from the design perspective. We start we should start from the challenges that AI brings for designers. One of them is working with bias. We all know it by now, AI systems are inherently biased, which is not because they're evil, they're just a reflection of something that unfortunately exists in society, but that's also an opportunity, right? So if we want to change the way these systems mirror us and reflect the world we live in, we can feed them more representative data, we can interject that process and kind of change the way they reflect us and it's actually an opportunity. Safety and security, that's not just about AGI becoming sentient and killing us all, but it's also about data privacy concerns, even the psychological safety that we have when we're having conversations with AI systems or interacting with them in other mediums. Yeah, there's also the aspect of these systems being easily deceptive and so they can be manipulated in the wrong hands. Then there's the aspect of designing for probability, which is my favorite one. As a designer, it's really interesting to think that in conventional system, you control the experience. You know what's going to happen because you decided, because you get to design it. So you always know what's going to happen next or a couple of options of what can happen next when a user takes an action. With AI systems, you have no idea what's going to happen. Maybe it's going to be good.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

The Whimsical Potential of JavaScript Frameworks
React Summit US 2023React Summit US 2023
28 min
The Whimsical Potential of JavaScript Frameworks
Top Content
Watch video: The Whimsical Potential of JavaScript Frameworks
The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
AI and Web Development: Hype or Reality
JSNation 2023JSNation 2023
24 min
AI and Web Development: Hype or Reality
Top Content
This talk explores the use of AI in web development, including tools like GitHub Copilot and Fig for CLI commands. AI can generate boilerplate code, provide context-aware solutions, and generate dummy data. It can also assist with CSS selectors and regexes, and be integrated into applications. AI is used to enhance the podcast experience by transcribing episodes and providing JSON data. The talk also discusses formatting AI output, crafting requests, and analyzing embeddings for similarity.
The Rise of the AI Engineer
React Summit US 2023React Summit US 2023
30 min
The Rise of the AI Engineer
Watch video: The Rise of the AI Engineer
The rise of AI engineers is driven by the demand for AI and the emergence of ML research and engineering organizations. Start-ups are leveraging AI through APIs, resulting in a time-to-market advantage. The future of AI engineering holds promising results, with a focus on AI UX and the role of AI agents. Equity in AI and the central problems of AI engineering require collective efforts to address. The day-to-day life of an AI engineer involves working on products or infrastructure and dealing with specialties and tools specific to the field.
Web Apps of the Future With Web AI
JSNation 2024JSNation 2024
32 min
Web Apps of the Future With Web AI
Web AI in JavaScript allows for running machine learning models client-side in a web browser, offering advantages such as privacy, offline capabilities, low latency, and cost savings. Various AI models can be used for tasks like background blur, text toxicity detection, 3D data extraction, face mesh recognition, hand tracking, pose detection, and body segmentation. JavaScript libraries like MediaPipe LLM inference API and Visual Blocks facilitate the use of AI models. Web AI is in its early stages but has the potential to revolutionize web experiences and improve accessibility.
Code coverage with AI
TestJS Summit 2023TestJS Summit 2023
8 min
Code coverage with AI
Codium is a generative AI assistant for software development that offers code explanation, test generation, and collaboration features. It can generate tests for a GraphQL API in VS Code, improve code coverage, and even document tests. Codium allows analyzing specific code lines, generating tests based on existing ones, and answering code-related questions. It can also provide suggestions for code improvement, help with code refactoring, and assist with writing commit messages.

Workshops on related topic

AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
AI for React Developers
React Advanced 2024React Advanced 2024
142 min
AI for React Developers
Featured Workshop
Eve Porcello
Eve Porcello
Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app.
Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)
Leveraging LLMs to Build Intuitive AI Experiences With JavaScript
JSNation 2024JSNation 2024
108 min
Leveraging LLMs to Build Intuitive AI Experiences With JavaScript
Featured Workshop
Roy Derks
Shivay Lamba
2 authors
Today every developer is using LLMs in different forms and shapes, from ChatGPT to code assistants like GitHub CoPilot. Following this, lots of products have introduced embedded AI capabilities, and in this workshop we will make LLMs understandable for web developers. And we'll get into coding your own AI-driven application. No prior experience in working with LLMs or machine learning is needed. Instead, we'll use web technologies such as JavaScript, React which you already know and love while also learning about some new libraries like OpenAI, Transformers.js
Llms Workshop: What They Are and How to Leverage Them
React Summit 2024React Summit 2024
66 min
Llms Workshop: What They Are and How to Leverage Them
Featured Workshop
Nathan Marrs
Haris Rozajac
2 authors
Join Nathan in this hands-on session where you will first learn at a high level what large language models (LLMs) are and how they work. Then dive into an interactive coding exercise where you will implement LLM functionality into a basic example application. During this exercise you will get a feel for key skills for working with LLMs in your own applications such as prompt engineering and exposure to OpenAI's API.
After this session you will have insights around what LLMs are and how they can practically be used to improve your own applications.
Table of contents: - Interactive demo implementing basic LLM powered features in a demo app- Discuss how to decide where to leverage LLMs in a product- Lessons learned around integrating with OpenAI / overview of OpenAI API- Best practices for prompt engineering- Common challenges specific to React (state management :D / good UX practices)
Working With OpenAI and Prompt Engineering for React Developers
React Advanced 2023React Advanced 2023
98 min
Working With OpenAI and Prompt Engineering for React Developers
Top Content
Workshop
Richard Moss
Richard Moss
In this workshop we'll take a tour of applied AI from the perspective of front end developers, zooming in on the emerging best practices when it comes to working with LLMs to build great products. This workshop is based on learnings from working with the OpenAI API from its debut last November to build out a working MVP which became PowerModeAI (A customer facing ideation and slide creation tool).
In the workshop they'll be a mix of presentation and hands on exercises to cover topics including:
- GPT fundamentals- Pitfalls of LLMs- Prompt engineering best practices and techniques- Using the playground effectively- Installing and configuring the OpenAI SDK- Approaches to working with the API and prompt management- Implementing the API to build an AI powered customer facing application- Fine tuning and embeddings- Emerging best practice on LLMOps
Building AI Applications for the Web
React Day Berlin 2023React Day Berlin 2023
98 min
Building AI Applications for the Web
Workshop
Roy Derks
Roy Derks
Today every developer is using LLMs in different forms and shapes. Lots of products have introduced embedded AI capabilities, and in this workshop you’ll learn how to build your own AI application. No experience in building LLMs or machine learning is needed. Instead, we’ll use web technologies such as JavaScript, React and GraphQL which you already know and love.