For many years I struggled with documenting UX patterns for a design system we’ve created in-house. Everything else went relatively smooth — the code, the components, even advocacy and adoption by the rest of organisation, but not the patterns. This might sound as a trivial task for some, but for me it was really challenging, and there were several reasons for that:

Unification politics — different versions of the same pattern already existed in various products, including legacy, thus the proposed “new” patterns should have been a compromise to get a buy-in from different product teams.

Complexity — B2B cybersecurity software users were highly skilled professionals, who often had to operate tons of data as well as deal with various corner cases. Collecting and testing all these special cases was time consuming.

Language barrier — I am not a native speaker, thus writing consistent documentation was often time consuming and could cause high cognitive load.

Low priority — there was always some more important task to do, thus very little time could have been dedicated to patterns documentation.

If the internal politics was something AI would most probably fail to tackle, as the solution should involve a human factor, the other three — content complexity, language and time constraints — could be potentially solved with the help of AI.

How it felt to document UX patterns for B2B design system

Chat GPT

Time passed, and the need to document UX patterns for a B2B design system has resurfaced. Meanwhile, the social media was taken over by a new advance text based AI — ChatGPT. I am usually quite indifferent to social media trends, but this time I connected a few dots in my brain (not as advanced though) and decided why not to try it. It did sounded as a perfect tool for documenting UX patterns.

Terminology

Following some recommendation I read earlier, I started with basics — documenting the correct use of terms. My first request was to learn when to use “Add”, “Create” and “Invite” for B2B cybersecurity software. Bypassing some extra generated text, the core reply was the following:

Excerpt from ChatGPT respond regarding terminology

Sounds quite right, but what is more important — brief, clear and consistent. Looks like it does save time and help with the language.

Components and patterns

After few more exercises with terminology, I decided to compare UI components that can be used in similar cases. I started with a popup and a flyout. The reply was quite generic, though so was the question. I believe with few more precise iterations, it would have been possible to write a proper documentation explaining when to use a popup and when a flyout. But as a free version of ChatGPT could have stopped responding at any moment, I decided to move forward with more complex patterns. After all, the main goal was to document complex B2B patterns.

Next, I asked to suggest the best pattern for complex filtering of data, and describe it in details with examples and various corner cases. Notice how I omitted to specify the B2B cybersecurity part. My assumption was, that ChatGPT should know it from the first question. As a result, I got a reply about filtering for e-commerce. So I asked to iterate the answer for cybersecurity software:

Excerpt from ChatGPT respond about a complex filtering pattern

As you can see, even though the text did make sense, the content was still relatively generic and would need to be fleshed out. Moreover, this type of pattern would clearly benefit from having supportive images that ChatGPT was not able to produce.

Helpful lists

At this point I noticed from earlier replies that ChatGPT was often providing comprehensive lists of what should be taken into account when defining a pattern. I iterated my next question accordingly and the result was quite good:

List by ChatGPT what should I consider when designing a complex data table component

While AI might not yet be able to document specific UX patterns, it is still a great tool to structure documentation and generate lists of everything a designer should remember to include.

Later in the same session, I tried few more product specific patterns from my earlier experience, but I think I have failed to construct questions well enough to get answers I was expecting. The replies were too generic. Well, it seems that one of us should either learn to ask better questions or to have more concrete answers.

Conclusion

Collecting and documenting patterns was always a tedious job. All sources were scattered around the internet and were constantly missing bits and pieces. Nielsen Norman Group and some of more advanced publicly available design systems were of a great help, but finding the right information took time and I often felt even more confused after the search than I was before, as suggestions varied from source to source. Moreover, benchmarking was only a starting point and spending so much time left even less time for the main part, i.e. adapting those findings to the requirements of a software I was working on. In this regard, ChatGPT solved the issue of spending hours on collecting information and benchmarking and allowed to move directly to the documentation part.

Going back to our initial four challenges, how did ChatGPT performed and was it able to solve them?

• ChatGPT is definitely a time-saver. It performed well with terminology usage and common patterns. While for more complex cases it can save time by providing a solid starting point as well as generating “to-take-into-account” lists.
• Great help for non-native speakers. This one is my favourite part. The text is well structured and consistent, which fits well to the documentation style. It simply removes all the unnecessary cognitive load that contributes nothing to the main task.
• Helping with product’s complexity is not the strongest side of ChatGPT. Still, as it was mentioned earlier, it can be used to accelerate desk research as well as keep the focus by providing lists of use cases and other things to take into account.
• Even though my initial assumption was that there were no place for ChatGPT in unification politics, it can actually be used to support your design proposals by providing quick meaningful replies. At least this may turn pro-AI folk on your side.

So yes, give it a try, if you haven’t yet. ChatGPT will not write patterns for you, but it will definitely make it easier. Especially if you are not a native speaker and have plenty of other tasks at hand.