Vollständiges Transkript anzeigen (3.943 Wörter)
So, are you curious how the biggest companies are actually building AI into their products? Not just shipping a chatbot and calling it a day, I mean they're actually documenting it. They're writing down the rules and putting them into their public design systems for everyone to read. This video is for designers, PMs, founders, engineers, anyone that is building a product that has an AI component to it. I'll be sharing design systems from IBM, AWS, Atlassian, and GitLab for companies that don't necessarily talk to each other about how AI best practices should be built, but they all ended on some core principles. How do you mark AI content? How do you let someone talk to AI content? How do you let that person take back control of the AI content?
Hey, I'm Diane, I'm the co-founder of the Design Project. We help over 50 B2B SaaS teams ship products faster with AI. Our customers have been acquired by Nvidia, Slack, and MrBeast. I'm leading workshops right now with companies trying to figure out what actually works with AI and what doesn't. And this pattern convergence is a big part of what we're seeing. There's a link in the description if you want to learn more, I would love to chat with you. So I'm going to show you all four side by side: the AI buttons, what generated content actually looks like, and how the chat pattern works across all four of these. And stick around, because I'm also going to show you where these four design systems disagree and some fun ideas and patterns of how you guys can continue to push the boundaries of how to show AI in your product. Let's get started.
So we're going to be looking at Carbon from IBM, we're going to be looking at Cloudscape from AWS, we're going to be reviewing Atlassian, and then Pajama from GitHub. Okay, so I think something about how to document all of this, you'll see that Carbon AI has this whole page, so it's in their design system, and they have it here as a whole page, and we'll walk through some of this. You'll also see so Cloudscape, they have GenAI, so they actually have a whole section, all of this is devoted to AI. Then we have Atlassian, they also have this whole section that's about UI. They also they put UI inside of their regular component library, they just added a section called Rovo UI. And then Pajama, they also, it's in their full design system, and they now have the section called GitLab, GitLab Duo Agent Platform, okay? So this is just how everyone is doing it differently, as far as inputting it in.
And then when we dive deeper, so a lot of them have this like page where they're basically explaining the details of how AI is being implemented. So they're having rules and explanations that are documenting this. This is really great for AI, because they have the dos and don'ts and everything, and we'll go into more details, but everyone has like a pretty big documentation of how AI is being utilized, the tone, when to use, when not to use. We'll go into more details. So the first one, I want to talk about how each of these is dealing with the button. How are they communicating that this is an AI feature? So Carbon actually, so they have this label. It's basically like a circle AI, and then they also have this hover state, and they have dark mode. This is how they're communicating it. If we go into looking at Cloudscape, they basically just have this little star and a Generated by AI. This is how they are doing it. There's not any real documentation as far as a button, it's more just like a text like this. They clearly have Do: use this label only for outputs produced by generative AI. Don't: sparkle icon should not be used in any other labels than other generative AI output. Avoid redundancy, place this label context to the generative AI output. This is really powerful because this is how your product needs to represent what's distinguishable between AI and not AI, and so this should only be used for AI. I really like this.
Let's go into what Atlassian is doing. So Atlassian is fun, they have like they went all in and did a lot of patterns, which is really cute, which we'll look at a little bit later. But they have a few different styles here, right? So how they're communicating it is Rovo. This is the Rovo button. It's basically the Rovo button appears is used to be to draw attention to the most important Rovo action in an experience. They also have this smaller icon that just has an arrow up, which is communicating again the AI, and they make it very clear: only use this for Rovo experiences. Do not apply the styling to anything that's not Rovo. So I think that's really powerful here, and you also see how there's also this icon associated it for Ask Rovo, and then there they had these other examples of when you're actually in the platform using AI, you can have these little buttons here that have icons with a little star to suggest that it's doing actual AI work. They also clearly communicate when and how to use it. So for instance, this should be used next to the Summarize page. This is how you should be putting the button in the bottom bar, should be nowhere else. Then these Rovo cues, I like this. It's very, very clear, and they really thought deeply about how all of the implementation of the Rovo icon can live.
To be honest, I think this is a lot, like I I like the idea of Carbon being very simple, like it's just use that button and that's when you notice it. They are bringing in way more elements of how to use AI, so I wonder if users are ever like confused about it. Then we have Pajama, so their icon is actually kind of similar to Rovo's more advanced like explanation style. Here, basically, anytime they're using AI, they just, they add the GitLab with some stars here to specify that it's AI, and they basically their rule here is: buttons emit AI if they are not using AI. They also do try to give explanations of how to make this make sense, like don't make it too complex, which I really like this. And then Feature Maturity, we'll actually chat about this in a second. So that's how they're all using AI, so it's basically a distinguished button pattern that you use for AI.
Now let's look at how each of them is actually showing generated output. So when Carbon is adding AI to any elements, I think the first important thing here is that they're adding this banner that is saying information, based on your resume, AI has auto-filled. So I think this is just a really good reminder, and then they also have very specific rules for how they're explaining what is AI generated and what is not. So the AI button appears in all of these, and they give even more instructions here, which is just showing this is what it looks like without AI, and this is what the button looks like with AI. So you can see that the visual, they have blue underlining with like a gradient up here and this button, and then they also go as far as to say if you change the AI content to be something that a user inputs directly, that this is kind of the patterns to use. So I think they're really getting deep into how to actually show that AI is generated, and I think it's a really clear understanding of it.
If we go into looking at Cloudscape, this is how they are showing. So basically Cloudscape's AI is all chat based, so how they're communicating this message is it's basically a hover state, it's the three dots and then generating a response, and then they have a lot of... I like Cloudscape because they give a lot of details of how they're actually... like why. Key UX concepts: generative AI experiences are commonly built harnessing the power of LLMs (Large Language Models) and FMs (Foundational Models). The models available today vary in their ability to process and generate an output for any given prompt. They're giving a lot of context of how the AI actually functions. The stage of loading, so that it's very clear to the user when to actually add these, and then yeah, this is kind of, you'll start to see these patterns is generating a text response. When generative AI moves to a generated stage, in a conversation, starts streaming the response if your model supports it. So this is clearly saying that once there's an answer, you can start to generate it here, and then it goes even further: is once you've generated a response that contains other UI elements, you can display them this way. See? So this is a very clear documentation with the dos and don'ts of how to actually display that this is AI information within their context, which is just a chatbot.
Then we look at Atlassian. So Atlassian is fun, they have like they went all in and did a lot of patterns, which is really cute, which we'll look at a little bit later, but they have a few different styles here, right. So how they're communicating it is this nice little colorful border. Generative border. An animated border shows active AI content generation. It shows it here, and it gives you all the details of it. The dos, the don'ts. Don't use the generative border as decoration. So this visual is great, but you can see the difference between Carbon and Cloudscape is they give more rules and specific direction around when and how to use the generating, because there is a lot of complexity here. While I think this is more visual, which is nice, but I think they could use a little more deep diving. And then if we look at GitLab, so GitLab's design system is very text based. Um, so the good and the bad, but basically how there's not even like a visual here, they're basically just writing out the whole explanation. Use the chat interface pattern when: users need to have multi-turn conversations with AI agents. The interaction requires context from previous exchanges. When not to use it: a single input. There's a lot of detailed explanation of how it's used, but as a visual person who's building a design system, I also want to see how it actually works. They even have the accessibility shortcuts here, which is, which is really great. Um, so that's kind of the differences between all of them.
Okay, so now let's actually look at the AI output. Um, most of them are chat experiences, so we're going to look through that. If you want to know a little bit more about some of these skills, or you're curious to dive deeper on the processes that I use and my team uses, we created a community, um, so you can sign up for the community, and you can get access to all of the other members that are asking really good questions trying to understand the best design to code, the best design systems, um, link in the description to learn a little bit more.
So if we go to Carbon, this is the AI chat. It's a conversational framework between a user and an AI that can aid in creating tasks, finding insights, tracking documents, and more. They what I think is interesting here is they don't have as they show this visual, so this makes sense, it's basically a chat experience but they also have this ability to add more UI elements, right? You can see here these two people. You also can see that you can select. They also have this ability to regenerate, to like, to dislike, um, and so this is really nice, but I also want to go further and deeper on this. And while they do have these components, um, I'm kind of left wondering more how the chat experience works.
Okay, so then if we go to Cloudscape, we see here that it is also a chat and I think this is nice how they break it down here. First, they have Key UX concepts: distinguish between message authors, maintain the flow of a conversation, earn trust with users, provide transparency, set user expectations around generative AI usage. Love these. And then they have these building blocks, which is a visual, and then they have the tags that associate to each which I really like. So basically they use a chat bubble, right, and then if we go to B, they have an avatar here with the little star, then we have the citation popover, C. I really like this one, basically they have citations but also within the context you can easily get to that citation and dive deeper into it if you want. Um, I think this is really powerful for any chat experiences that we've seen is to make sure the sources are very clearly labeled, so I like this a lot. Source expandable section, we already talked about here. Inline actions button group, E. So this is also we've seen this with Carbon as well, right, this is also a common pattern that's starting to emerge is you can like it or dislike it and then give feedback. I think this just helps the AI get better and better, so I think this is also a common pattern that's showing. Stacked chat bubbles, okay. And then prompt input, here. So this is how it looks, basically you can upload something and send, very simple. Disclaimer and then support prompting group. Support prompts are selectable message prompts that present recommended inputs to the user. They are displayed based on context from previous user actions and can help guide a conversation forward by suggesting the next input. There are two possible scenarios for when a user selects a prompt. When it is not editable, the text is sent immediately as a chat bubble. When it is editable, the text fills the prompt input, and is not sent immediately. This option when it is likely that users will want to edit the text before sending it. So I think it's more that it's helpful, it's if they give this, give an example of a typescript block. It's going to give an example, um, so I guess this is, it's an interesting concept. I don't know visually if it's displayed well but support prompt group. They also kind of have this more detailed other chat features, so a default, hover. Again, we talked about this is helpful, this is not helpful, send feedback, this is great. The default states loading states, so it is pretty detailed of how it works, and it also, okay here, it breaks down, um, actually if they say they dislike, how can they give more feedback, which we already kind of talked about. And then they have the dos and the don'ts here. So now let's look at Atlassian.
Okay, so they don't really have a section where they show how it's using chat based, um, which I think is interesting because they have a very full experience that's engaging they're not showing in the design system. They are calling out icon, so they have all these really fun icons with, like a clear star to show that this was AI generated, and you can start to see here, here's some ways that they're showing it. Um, so here's how they're using the icons. This is also something that Rovo does, is they have this, basically this menu where you can communicate what you want to do. Um, so this is kind of a chat experience but they don't have the specific section that calls it out. They also have the section called Illustrations, where they have really beautiful illustrations and then they just show how they're using it in the actual chatbot, but they don't actually show it here. And then GitLab, so again they have like basically a wall of text for all of this, right, so they, that's how they define it is a wall of text, which is very useful, it really goes into the details. So where they do show a visual is again we talked about the importance of giving feedback, so they do have this very clear explanation of in the Duo UI that you can live-ly feedback if it's helpful or unhelpful. So I think this is very clear to help explain the importance of the what the generative AI is outputting and making sure the users feel in control of how to communicate if the message is good or not.
So there's clearly patterns we're starting to see, right? The AI button trigger, the generated output, and the AI chat experience. So now let's look at some differences, how each one of these design systems handles AI a little bit differently for inspo for you. I think one of the really interesting things that Carbon does is this hover state, um, basically anytime they're using AI, they have this hover state where they explain explicitly what the AI is for in that section. So for instance here, it says it's explaining the IBM AI product, how it works, and then it also has the model and a link. You can see it also showing up here, AI explained how it works. I think this is really powerful to help the user answer any questions, and I think it's just another way for it to distinguish between AI and not AI, which I think Carbon is doing a really good job of saying this is AI generated and this is not AI generated. So I think this is the most powerful thing that Carbon is doing that's kind of a differentiation.
And I think something really cool that Cloudscape is doing is this follow-up questions, so I'm going to play this video here. So once a response is generated, they basically have this ability to ask, the AI is going to ask more questions to the user to make sure that they're getting the information. This is also a common pattern in Cloud for instance. What's the main goal? You can say something else, you can give you options. This is really powerful, I really, really like that they put this into the design system and they're continuing to kind of evolve this. And then they also have very specific rules for guiding the conversation. They have the options to add options like this, the general guidelines dos and don'ts, so I think this is something really interesting that they're pulling out. I think Cloudscape has also done a really good job of communicating AI more deeply. So, they talk about key UX concepts for thinking. So reasoning, thinking and execution, transparency, the different states of how a user is actively thinking. So, they're just taking it a step further and documenting more, um, and I think it's really, really nice to see how detailed they're getting into all of this, and providing all of these examples and kind of just putting this directly into their component library design system. So I think that's one of the most powerful things.
Okay, and then let's move to Atlassian. I think Atlassian is focusing a lot on the UI, and I think they're really, it doesn't feel like Rovo is something that was just added on, you can tell that there was a lot of love and thought put into it, um, and so they really focus on the visual side of Rovo, they named it Rovo, it has a fun personality, they have really nice illustrations that go along with it and the concepts about it. Um, you can see they go deep into the colors, elevation, motion, and then they have this great tone of voice, so this is more of a personality, this is one of the places where I've seen they really dove deeper into explaining what Rovo is, from a personality standpoint. Um, let's read a little bit, Trustworthy, Insightful, Collaborative. Best practices they also have dos and don'ts for like the tone. So do, here are the talking points for your review, I kept them brief and to the point. Don't, the upcoming review seems stressful. Don't worry though, we've got this. So, adjust tone to the stakes, emotional context, and severity of the situation. Avoid emotional extremes, um, so this is really nice, and then we already kind of talked through this, but they just have some really fun, great illustrations and visuals. Um, I guess the last thing I I didn't mention this with they have the skills tag and they're showing exactly how to design it, and it is kind of a pretty big element within Rovo, where if you hit the slash or you're able to do a lot of other tasks. So they're just like, clearly communicating with a visual representation and guidelines here, which is nice.
And then we have Pajama, GitLab. So, I think we've already kind of talked about this, I think the value of what they're doing here is just a lot of detailed text written to explain how the AI actually works. Um, so it's not as much visual, but it's very, very detailed, lots of text that's explaining specifically how everything works, which I think is really great for the AI to read, um, and understand all of the patterns. So to kind of summarize, is I think there's so much power in documenting AI, and I think what's interesting is how they're all starting to document this AI, and the reason why is because AI is just not something you throw onto your product, right? There should be guidelines, there should be rules, especially because we know the power of AI. So, it's not just like a color change or a sparkle somewhere. There's way more behind it that we need to communicate to the user, and the best way to do that is to actually come up with like a formal patterns, reusable patterns, and that's why these companies have chosen to put AI directly into their design system. And then one place I see that none of these design systems have focused on is this idea of hallucinations, which I think is a miss. How to handle hallucinations, I think that's a problem that many users have, so that would be like a, hey, this is something we should think more deeply about. If you are trying to figure out how to build out your design system, that's including AI, and how you're thinking about AI in general with your product, we are doing this for many teams right now, shipping for B2B SaaS teams, so I would love to chat a little bit more if you think that this is relevant. There is a link in the description below, and please like and subscribe if you found this content interesting. I'm putting out content weekly about how product teams can ship faster with AI. I'll see you in the next one.
Video
