AI for Content Design

@TheMikeJang

CC-NA-3.0

https://slides.com/mike-1/button

Humans choose the words
Content Designers build the tools

Talk title: Humans in control: Design a content-savvy AI Agent

Links

Live:             https://slides.com/mike-1/button/live

Later:             https://slides.com/mike-1/button/

HAL

2001

Inspiration

Principal Technical Writer

 

Product Documentation

 

Mission

 

 

  • Complete accurate documentation

Pixabay CC0

Background

My Bias

Content Design

We help users make decisions

https://slides.com/mike-1/button

We want to "unblock" users

Our style guides drive "helpful" text

Figma and Microsoft

Figma: UX Writers create markdown skills for agents

https://slides.com/mike-1/button

Microsoft: Content Designers design Copilot responses

From ChatGPT

 

"Figma: strikingly close to your approach"

 

If AI were a teenager

  • Teenagers
  • "Wash the dishes"
  •  
  • Result: nothing is clean
  • Better 

Mindset for AI

With AI, everyone gets an army of 100 interns

Make AI work for you

  • AI answers the prompt

 

  • AI doesn't solve problems

 

  • Until you provide detailed instructions

Fantasy Football

Who should I start?

UNTRAINED AI
"Pick up player X"
OPTION 1: Recommended
 
Player X
  • Highest projected points
  • Best matchup
OPTION 2: Safer
 
Player Y
  • Lower ceiling
  • Good if protecting a lead
OPTION 3: If behind
 
Player Z
  • Boom-or-bust
  • High-risk high reward

Better answer: it depends

 

Result: almost won!

 

Wordiest

 

Decision requirements

 

Opportunity: progressive disclosure

Cleanest

 

Minimal text

 

Best if the UX is crowded

Balanced

 

Assumes user knowledge

 

Minor detail for edge cases

 

Link to docs

 

 

Three tier model

Big picture

Style guide

Instructions and Skills

AI

Agent

How AI can help with content design

  1.  Start with a style guide
  2.  Set up instructions
  3.  Pull content from the style guide
  4.  Organize the knowledge in AI
  5.  Test the steps locally
  6.  Identify problems
  7.  Update the style guide
  8.  Automate updates

Start with a Style Guide

  • Designed for humans
  • Content design skills for AI

Skills

  • Well, sort of

 

  • Reusable content design expertise

 

  • Well, sort of
  • a reusable capability that can be invoked to perform a particular kind of task

Make it "easy" for ourselves

  1.  Know your product
  2. Set up instructions
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  Use style guides (details)

-

-

-

-

-

-

 

-

-

-

-

-

-

 

AI models -- Best practices

  • Governing instructions
  • Details in separate files

Searching the database

 

Content in Markdown

 

Make it "easy" for ourselves

  • instructions.md

What we've done

  • 30 different distinct pages

OMG AI

  1.  Know your product
  2. "Don't Make Me Think"
  3.  Pull content from your style guide
  4.  Minimize need for docs
  5.  Know your audience
  6.  Know your stakeholders
  7.  Start with the easy stuff
  8.  Harder stuff: do your homework
  9.  Use style guides (details)

-

-

-

-

-

 

-

-

-

-

-

 

-

 

Convert your style guide

  • Format only

 

  • Emerging standard for AI: Markdown

 

Conversion

 

HTML to Markdown

OMG AI

  1.  Know your product
  2. "Don't Make Me Think"
  3.  Pull content from your style guide
  4. Organize the knowledge for AI
  5.  
  6.  Minimize need for docs
  7.  Know your audience
  8.  Know your stakeholders
  9.  Start with the easy stuff
  10.  Harder stuff: do your homework
  11.  Use style guides (details)

-

-

-

-

-

 

-

 

-

-

-

-

-

 

Structure your instructions

  • Straightforward set of steps
  • Reference to a directory of "skills"

Before you deploy

  1.  Know your product
  2. "Don't Make Me Think"
  3.  Pull content from your style guide
  4. Organize the knowledge for AI
  5. Test steps locally
  6.  
  7.  Minimize need for docs
  8.  Know your audience
  9.  Know your stakeholders
  10.  Start with the easy stuff
  11.  Harder stuff: do your homework
  12.  Use style guides (details)

-

-

-

-

-

 

-

-

-

-

-

 

Tip: pinned instructions

Formalize the Agent

Test time!

Avoid "hallucinations"

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Test edge cases

-

-

-

-

-

 

 

-

-

-

-

Test Time, Part 2

Test and iterate

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Test edge cases
  7.  Share your work

-

-

-

-

-

 

 

-

-

-

-

Automate

-

-

-

-

-

 

 

 

 

-

 

 Your style guide = Single source of truth

 

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Test edge cases
  7.  Share your work
  8.  Set up CI/CD

-

-

-

-

-

 

 

Lessons Learned

Big picture

Style guide

Instructions and Skills

AI

Agent

Style Guide

The single source of truth

Remember the BSoD

Potential solutions

For the record

Credits

  • Torrey Podmajersky (Button, "Strategic Writing for UX")
  • Jodie Putrino (F5)
  • Elmira Cheraghi (F5)
  • UX Communities (Content + UX, We are Content Club)

Questions

@TheMikeJang

The End

Thanks for Listening!

@TheMikeJang