Whether you’re a product designer, content designer, UX writer, design system manager, or someone who manages these professionals, you’re likely frustrated with the process you use for putting words into designs among your team. It’s clunky, takes too many interactions and back-and-forths, and nothing is stored in one place. The main reason for this is that UX content still isn’t part of design systems. However, things are about to change.
In this post, we explore how to embed UX content guidelines into design systems, starting from the root problem to current solutions. We'll go through the steps of creating a streamlined process for creating consistent UX at scale using AI. The content here is based on continuous research we’ve been conducting at Frontitude around generative AI, UX content, and design systems in the last 6 months, including dozens of interviews with product design teams.
Intro
Design systems have been standard for building consistent digital experiences for over a decade now, playing a critical part in product teams’ velocity and growth. A design system systemizes UI elements and enables design at scale by communicating design constraints and characteristics to the entire product team, all the way from design to development. Designers and developers can reuse existing elements and build on top of them instead of coding from scratch. In addition, they give managers an accessible overview of the UI components and a way to ensure consistency without spending long hours going through the live product.
Although design systems have become more common, UX content still isn’t an integral part of this practice. There are a few solutions that design teams currently implement to address this gap. However, according to what we have gathered from many design teams, it doesn’t really work the way it should.
"Although design systems have become more common, UX content is still not an integral part of this practice."
Content isn’t (really) part of design systems
Today, design systems tend to focus on how things look but not on what they say or communicate. To cover content, many companies rely on content style guides, guidelines incorporated as notes alongside design components, or content example banks.
While current solutions may theoretically work, they often prove inadequate in modern work settings, offering static and cumbersome solutions. Teams that have adopted these methods report that, at best, team members invest a lot of time navigating these systems. At worst, they can lead to exhaustion, causing them to bypass them entirely due to the high degree of friction involved.
"While current solutions may theoretically work, they often prove inadequate in modern work settings…"
No one reads your content style guide
Content style guides are problematic because no one reads them. It’s hard to admit it, but that's the reality. We spoke with dozens of teams specifically about this issue and found that often designers and writers don’t know how to navigate these static guidelines and don’t want to spend extra time trying to understand how to write a specific piece of content.
Design system notes are better but still don’t cut it
Some teams prefer to store content guidelines closer to the design system. They either add them as notes in Figma next to the design components or to their design system documentation tools (like Zeroheight or Supernova). While this feels like a better solution, it still remains static and too cumbersome for designers.
Current solutions create a cumbersome process
The implementation of current solutions complicates both the design process and the user experience. Not only is a lot of time spent on the writing, but for many teams it also ends up causing the design process to work in a waterfall fashion. This is due to the dependencies between design and content, repetitive content reviews and back-and-forths between designers and writers (and in many cases developers, too). As for the user experience, inconsistencies in UX content end up in production and compromise the end result.
What most teams would benefit from is a content design system that works in tandem with the design system, as part of an agile, continuous design workflow, and provides the following features:
- One place for documenting how design components should communicate with end users using words.
- Seamless integration with the design system and the entire product design and development process.
- A way for everyone on the team to quickly generate professional, adherent UX content, just like they can with design components.
"What most teams would benefit from is a content design system that works in tandem with the design system, as part of an agile, continuous workflow…"
Using generative AI to craft consistent UX content
Before we discuss how to integrate UX content into design systems, let’s touch on the core capability that unlocks novel solutions to this problem: the ability to generate content per instruction, using LLMs (Large Language Models).
Tools like ChatGPT have become invaluable for design professionals who create UX content by offering immediate inspiration and guidance through content suggestions. Almost all the design professionals we spoke with have already embraced ChatGPT or other AI tools as part of their daily work. Many even call themselves “dependent” on them. According to a recent survey by UX Tools, 65% of design professionals are already using AI in their work.
The true potential of generative AI lies in context, and when provided with the right context, it can make the difference between inadequate and mind-blowing results. While ChatGPT is a fantastic tool, it sometimes lacks efficient context integration, especially within design workflows.
Looking ahead, we anticipate a growing trend of tools seamlessly integrating generative AI capabilities directly into their platforms. These built-in AI capabilities will create significantly better solutions since they include seamless context sharing and specialized models for specific use cases.
"The true potential of generative AI lies in context… it can make the difference between poor and mind-blowing results."
One of the rising AI tools for UX content is Frontitude's UX Writing Assistant, which is built on the same infrastructure as ChatGPT and tailored specifically to UX writing. Operating as a standard Figma plugin, the UX Writing Assistant scans the design and feeds the AI model with design context for generating UX content suggestions in alignment with the content guidelines.
Now, let’s dive in and see how you can use the UX Writing Assistant to:
- Generate professional UX content quickly.
- Seamlessly integrate it with design systems in Figma.
- Empower design and product professionals (writers and non-writers) to craft professional, consistent UX content quickly.
"Operating as a standard Figma plugin, the UX Writing Assistant seamlessly scans the design and feeds the AI model with design context for generating UX content suggestions, aligned with the content guidelines."
Generating UX content suggestions using AI
The core feature of the UX Writing Assistant is the Rewrite function, which generates content suggestions based on the draft copy, design context, and predefined instructions.
This feature lets any design or product team member generate professional UX content in seconds based on draft copy or placeholder text.
Using predefined instructions, the assistant users can adjust suggestions by tone, length, element, case, and custom instructions. Custom instructions can include any natural language instruction related to content style, tone, lingo (i.e., specific jargon or terminology), and more. Together with the design context read from Figma, this results in highly relevant content suggestions.
Creating natural language content guidelines, interpreted by AI
The instructions used in the Rewrite function can be wrapped into Guidelines -- natural language content guidelines that can be stored centrally and interpreted by the assistant to generate adherent content suggestions.
Instead of setting up instructions from scratch for each text, guidelines can be reused to efficiently send the model the right instructions through the Rewrite function.
Embedding content guidelines in design system components
Using the assistant’s built-in design system integration, you can quickly link content guidelines to design components. This makes it possible for anyone working with these design components to automatically load the right content guidelines and generate adherent UX content super fast.
"This allows anyone who works with these design components to automatically load the right content guidelines and generate adherent UX content super fast."
Identify content violations in seconds
A significant advantage of incorporating content guidelines into your design system is the ability to perform content audit scans directly within Figma in a matter of seconds. With the writing assistant's Audit features, you can select any Figma designs linked to content guidelines and run a quick scan that compiles a list of content violations.
This streamlined process not only expedites content review but also reduces the need for extensive back-and-forths among the entire team, enabling a concentrated focus on the important stuff during design reviews.
The outcome
By seamlessly integrating content guidelines into design systems using AI, several transformative outcomes emerge:
- A lot of mental effort is saved for design professionals, as they are now empowered to write professional, consistent UX content without the hassle.
- A single source for UX content guidelines is established, ensuring that everyone has easy access to the most up-to-date standards without leaving Figma.
- Shorter design reviews save time and back-and-forths.
- Content designers and UX writers spend less time on “putting out fires” and can instead spend more time on important tasks, such as research and strategy. This shift ultimately leads to a significant improvement in the overall quality of the user experience.
Summary
The integration of generative AI technology into design processes in general and specifically design systems represents a significant leap forward in addressing the longstanding gap between UX content and design.
Design teams need a more agile and efficient approach to integrating content guidelines into their design process, as current solutions don’t cut it. With AI tools like the UX Writing Assistant, design professionals can look forward to a future where content creation is quick and effortlessly aligned with guidelines.
This shift not only streamlines workflows but also enhances the overall quality of delivered experiences. As the design landscape continues to evolve, embracing AI-driven solutions becomes essential, and Frontitude is at the forefront of this transformative journey, redefining how we approach UX content within design systems.
Shout out to Daniel Schneider and Merav Levkowitz for their assistance in writing this article.
