Together with

My friends and colleagues know about my obsession with AI-First design tools. And this little hack is all you need to get started on the road to more efficient design and higher quality by eliminating repetitive and boring “robot monkey work.”

What is Robot Monkey Work?

Any routine work, designing the same pages over and over, especially if those pages are already described as templates in your Design System. My pet peeve example? It does not get any better than Tables and Forms.

In one memorable example working at one of the World’s one-time most prominent companies, this one 6-person department spent three months creating a 40-page specification document for a table widget.

Not coding. Not designing. Just to create a specification. 

With no pictures in it.

I kid you not. 

We discussed table hacks previously in How to Create Figma Tables for AI Designs in Less Than 3 Minutes (https://www.uxforai.com/p/how-to-create-figma-tables-for-ai-designs-in-less-than-3-minutes), but it seems some designers just never tire of creating more and more work for themselves. 

Another example is simple forms. 

Another one of the world’s most prominent companies spent several months designing a login page. In this case, again, no coding, just a dozen competent professionals changing their minds about 150 times about how long the fields should be, whether they should be center-aligned, what the wording should be used for the password recovery link, whether to call the button “Sign in” or “Log in” or “Login” … etc., etc., etc., Ad nauseam!

I bet there are people in the world right now who are busy designing yet another version of the standard address form and having a debate about whether to split the name into First and Last names, whether to provide a second-line address, and whether the button should say “Submit” or if that is too “50-Shades of Gray” to match their brand guidelines.

In the age of AI, this is the kind of thing that is actually better done by a robot monkey. One can argue that, in fact, the robot will likely make fewer mistakes as it will be sourcing the designs from the leading web and mobile examples. 

Especially if the robot is leveraging a complete, robust Design System with relevant page examples.

It’s past time we automated this process, and the AI-First tools for UX design are almost here to take a simple prompt and convert it directly into functional React code.

The Short-Hand UX Design Notation is that prompt. 

But before we get into it, let’s talk about what is NOT something that should be trusted to AI. 

What is NOT Robot Monkey Work?

What is decidedly NOT Robot Monkey Work? Where should you, as a designer, be adding value? 

Easy answer: Anything new you invent. Anything strategic. Anything that is leveraging AI to create a better experience for your customers. Designs that improve product-market fit. Driving the vision for the product roadmap. Driving stakeholder alignment. Product integration. 

Easier answer: Anything helping the company make more money while spending less.  

Easiest answer: Anything that cannot be described with the Short-Hand UX Design Notation.

So let’s get to it, shall we?

Short-Hand UX Design Notation

In the previous installment of the newsletter, we promised the UI for the Horse-Head Beam Pumpjack AI-detected Curve Anomaly. Recall the digital twin diagram from our last article: How to Design UI for a Curve Shape Anomaly (https://www.uxforai.com/p/how-to-design-ui-for-a-curve-shape-anomaly)

Many folks were confused when the “UI” turned out to be this short-hand notation:

Here’s how this form might look like as a hand-drawn wireframe:

Let me explain. 

As a consultant, I developed this short-hand notation more than 20 years ago before document cameras became widely accessible for remote work. This shorthand allowed me to instantly get everyone on the team on the same page just by taking good text-based notes in a remote brainstorming meeting:

• It saved time

• Improved client communication

• Used simple text-based note-taking

• Efficiently and clearly describe the design

• Completely document design decisions

• Done live on the call with the entire team as part of note-taking

• Can be used for complex forms, tables, and diagrams.

It was a kind of short-hand code that grew out of that need. Hence the Short-Hand UX Design Notation. The notation is as simple as possible while also allowing for efficient recording of the most common layout options and form controls. 

Here are the common components labeled:

The best part was quickly creating table pages. If the table were a standard page featuring the same table design but with different columns, the short-hand notation would just describe column headers and give the minimum lines of content to demonstrate what was in the table. 

For example, the master screen for the detail page above would be:

Here’s how this table might look like as a hand-drawn wireframe:

I hope you are starting to get an idea. 

But wait, documentation is just for starters.

AI: Short-Hand UX Design Notation —> 10-20 Wireframes —> Working React Code

When you type out design requirements (and ideas) directly using short-hand notation, you can save time immediately in documenting pages and forms. However, the main advantage of adopting this notation long-term is that it is easily understood by AI. In the very near future, the AI will be able to take your short-hand notes as a prompt and apply standard design patterns and design system components to create 10-20 different wireframes using fully functional working React code. AI tools will be able to build pages using standard UI design patterns and design system components, find and fill in the missing details for simple pages, and fix common mistakes. 

So, for example, if you enter:

The AI will be able to recognize that:

•  “by” is a standard “Updated By” column in the system. 

• “J.Smith” is rendered as a login handle in the system, e.g. “jsmith”

• “1/1/24,3:02pm” is actually a date, and the standard date format in the system is “1/11/24 3:02 PM” 

• Etc.

In other words, all those simple, stupid, little screw-ups that drive miscommunication and waste tons of time across the entire product development and go-to-market organizational stack at your company will be streamlined through standard pattern identification and immediate fixes. 

This is what AI is actually really, really good at: Robot Monkey work. 

Freeing designers to do what actual humans do best. Human work. Empathy. Story. Communication. Invention. Innovation. 

It’s amazing… Makes my heart sing… Now it’s up to you

(Quote: https://g.co/kgs/VUf1RuW It’s Amazing, by Jem)

Most of the time, as a consultant, I had to operate within the guidelines of an existing Design System (or at least a “Design Guide,” as it used to be called a few years ago.) There was no need for me to “repaint the fence” (or “re-invent the wheel”) unless my client actually wanted me to do that. I just needed to quickly jot down what was agreed to as the most important parts of the design. Most component decisions were already made before I got on the scene. 

For example:

• Did the detail pages render as a modal? Or full screen? Or as a panel on the right side? 

• Should form buttons read Cancel [[OK]] or [[OK]] Cancel? 

• Was the table sorted by a drop-down control or via columns? 

• Etc. 

All these decisions were already made. I just needed to know what new thing we were adding following these existing guidelines. 

Now don’t get me wrong: I certainly made my share of recommendations! However, as a consultant, I had to be efficient and clear on where I was adding value and what the client required from me. Did they want me to re-invent how their tables were rendered? Or change all their modals to side panels? No? Well, then, I tried my best not to waste their time and mine and not to aggravate them unnecessarily by suggesting some hare-brained, ill-considered, Johnny-come-lately massive redesign scheme because I happened to disagree with some decision they made 5 years ago.

Instead, I strived like hell to add value. 

Starting with understanding how they made and spent money and inventing new things to help them do more of the former and less of the latter, to the tune of helping my clients and employers file more than 24 patents.

Now, as the age of AI is coming into its own and we are on the verge of having tools that will easily render 10 or 20 different designs in working code in seconds based on a simple short-hand notation prompt, using standard design patterns and ready-made React code components, ask yourself the following: 

• Am I doing robot monkey work by recreating the wireframes in Figma for yet another page featuring the same table design but with different columns? Or the same address form? 

• Can the wireframes I’m building in Figma be described in a few lines of text using Short-Hand UX Design Notation to take them straight into React code?

• If this is mostly what I’m doing now, how can I genuinely add value instead? 

Here are some ideas — tell us what you're most interested in, and we’ll do our best to write about them in the next installments and our upcoming book, UX for AI.

Anything we missed? Write to us — just hit reply if you got this in your email or leave us a comment at the end of the web article.

Questions are good. Actions are better. 

Stay tuned,

Greg Nudelman & Daria Kempka (Contributing Editor)

Visual-based newsletter on business and tech

Bay Area Times is a visual-based newsletter on business and tech, with 250,000+ subscribers.

Sign up with one click.