How to Design UX for AI: The Bookending Method in Action

IMAGE CREDIT: Midjourney /Imagine: a bookcase with shelves full of books with fancy whimsical bookends in the shapes of wild animals in the style of Arcane.

In this installment of our newsletter, we will demonstrate a practical application of the powerful and highly practical “Bookending” design brainstorming method that should be an essential tool in the toolbelt of any designer working on UX for AI projects. Let’s dig in!

This method originates from the work of Leah Buley and her excellent Rosenfeld Media book, “The User Experience Team of One.” In her book, Leah described a method called “Disciplined Brainstorming” — “Bookending” is an extension of her original methodology adapted for UX design work on AI. 

The purpose of the method is simple yet profound: to quickly brainstorm various practical design approaches — alone if necessary, but much better as a small, focused tiger team (See past newsletter The Importance of Staying Lean). “Bookending” refers to a particular brainstorming approach, taking an idea along a given design direction or theme (like a cat might bat a fluffy ball toy: light touches only, no claws, always keep it moving.) 

You take the discussion as far as it can comfortably go and then sketch out your solution at the “bookend.”

Then you stop. 

Pivot.

Pick a different direction and pursue a new approach in the same way. 

It helps to think of a given design direction as a row of books of a particular category, and your idea would be like a new book fitted at the very end of the row, extending the theme just a tad further — hence the term “bookend.” 

Let us show you in practice how this works.

Let’s say you are designing a new AI assistant writing app called M.U.S.E. (short for Machine-Underpinned Sidekick Engrosser) because, let’s face it, we all need a little help writing from time to time.

1. 

The first design direction might be to use a side-panel co-pilot, which is the AI design pattern du jour thanks to Microsoft’s recent dominance we mentioned here. This design might take the form of an AI assistant that “lives” in the side panel of a  Word document. Working within the side panel, the user might be presented with some initial ideas, type in prompts, get AI responses, and have a button to insert the response into their document. Voila! We have our first design direction down — let’s sketch it:  

Question: How do you know when you’ve taken the idea “as far as it goes?” It’s highly subjective and depends on the audience, but in any brainstorming discussion, even one you are having with yourself, there comes a point when the team is no longer covering new ground. You find every suggestion re-tracing the ground already covered or collapsing to the idea you have already drawn. Remember, as Antoine de Saint-Exupéry so eloquently said, the idea is perfect, “not when there is nothing more to add, but when there is nothing more to take away.” In the example above, if you are scraping the bottom of the metaphorical barrel, such as suggesting things like moving the panel left-to-right or to the bottom of the screen or starting to pick button colors and interface labels, it’s time to move on. This is what the “bookending” technique is all about — it deliberately avoids anchoring on a single idea by having a graceful exit to a different design direction, like jumping to another shelf of books. 

Let’s do that now.

2.

Now for the second direction, you might pick a different popular AI design pattern like the one used by the GitHub co-pilot. In this design paradigm, the user places AI prompts directly in the program's text, using comments. AI looks for comments, interprets the request, then inserts the output directly below the comment. That seems like an interesting and different design direction from our previous idea: instead of the side panel (that we left moving all around the screen… ahem), we can embed the AI directly into our writing editor for a much more natural interaction. This design also fits beautifully into how people normally write, often leaving themselves little “TODO” reminders that can serve as a prompt for AI:

A variation of this idea might help customers deal with writer's block. When the writer pauses in the act of typing, the AI can read the text that is already on the screen and predict what comes next. Wait, did we just find yet another design direction? 

3.

Let’s sketch how that new writer's block auto-suggest UI might look:

This design direction has the huge advantage of learning directly from the previous pieces and fine-tuning the suggestions with AutoML techniques based on which particular AI suggestions this specific writer would pick at what part of the narrative. 

For example, Greg’s handy writing assistant might suggest a Russian fable to reference, but Daria’s assistant might judge that a fable would be distracting and unnecessary and suggest a moral reference or a real-life example instead. Imagine – an assistant AI that genuinely understands you! It’s like the movie “Her”, only without Scarlett Johansson. (Oh, Scarlett, you are so much better than Alexa.) NOTE: when you are starting to plan your potential anthropomorphized AI personalities, you know we’ve now taken this idea to the mattresses (ahem, to the bookend), so it’s time once more to move on.

4.

Now one thing we have not covered yet is a dedicated UI for AI, like ChatGPT. If you start your thinking in this design direction, you will quickly realize that you might need to have a few simple writing prompts to start:

Since Chat GPT would only write part of the term paper for you — maybe we can count on 1-2 pages max — then maybe you also need some way to manage all of the short snippets it would write. Hmm…would something like a Scrivener UI work, for instance? But before we pivot to this new design direction, is there anything else to be gained from looking along the row of books labeled “ChatGPT?” No? All right, then:

Time to pivot! 

5.

Now look at how Scrivener manages snippets:

You can see that the UI cleverly positions each “story” as a card in the deck that together becomes a book. It just so happens that this is a perfect paradigm to combine with a writing assistant for larger projects. We can have the user write an AI prompt as a title on each card; then, AI can write the output inside the card and give auto suggestions for improvements right below as buttons or tags, kind of like Grammarly GO. (We covered Grammarly Go vs. Chat GPT in the previous installment.)

When you're ready to assemble your ghost-in-machine-written masterpiece, the AI can make additional suggestions to the story's overall flow, creating new cards that fill the holes in the narrative. We can make those AI suggestion cards purple. Why? Because we can! And now, as you can see, we are down to the colors again, so it’s time to pivot…

Now, what will your next design idea be, we wonder?

In Closing

“Bookending” brainstorming is both much easier and much more challenging than it sounds. As in so much of UX and Aikido, this stuff is sophisticated, not complicated. After all, to achieve something new, you don’t need to reinvent the wheel – you just need to apply it in a slightly different way or to a different problem. The key, of course, is practice, so we hope you try bookending brainstorming today. But before you jump into it, please take a second to crush that [Subscribe] button below so you don’t miss any future goodness coming out of our Newsletter: “UX for AI: Cats, Toys, and Bookends”... ahem, actually our newsletter is titled “UX for AI: UX Leadership in the Age of Singularity,” and we hope to see you again soon.

À plus tard, 

Greg Nudelman & Daria Kempka