A Butter original product

Toast Box™

An AI-powered UX content reviewer

We built Toast Box to help product teams review UX content (microcopy) before release. Like a senior UX writer, it analyzes full flows, flags content and usability issues, and recommends content and design changes where needed.

Scope
Research, content design, product design, AI build
Stage
Working MVP, tested internally
Studio
Butter, original product
Read the story
The Toast Box home screen, where teams describe a flow and add its screenshots.
1Discovery

Today's workflows skip content reviews

In conversations with AI-native teams, we kept seeing the same pattern: product managers were using AI to generate new features, including much of the interface copy, and no one with UX writing or content strategy expertise reviewed it.

Product manager

Describes a new feature

Prompts an AI tool with what the feature should do.

AI tool

Generates the UI and its copy

Every label, title, message and button comes out with the feature.

*when there's timeProduct marketing

A native English speaker checks it

Checked for grammar issues, not with UX in mind.

Users

It ships

With whatever the AI wrote, reviewed or not.

The problems

Reviews are inconsistent

Whether content gets reviewed depends on time and availability.

Language review isn’t UX review

Clear English doesn’t guarantee clear product guidance.

There’s no shared quality bar

Teams lacked a reliable way to judge or maintain UX content quality across the product.

The opportunity was to bring specialized content design judgment into that workflow, without slowing anyone down.

2The product concept

Introducing the Toast Box

We designed Toast Box around three layers: what's unique to each company, the UX writing judgment we bring to every client, and guided reviews that put both to work on real screens.

KnowledgeUnique to each company

Client Playbook

Everything specific to the product: how it sounds, what things are called, and the decisions the team has already made.

Voice and toneTerminologyPatternsRulesCommon scenariosExamples
IntelligenceShared across every client

Butter Brain

The content design expertise we bring to every project: what good UX content does, how to spot what gets in people's way, and when to ask instead of assuming.

Every line should help people understand, decide or act.
Every issue gets a severity
CriticalHighMediumLow
Execution

AI Workflows

Guided reviews for everyday product work, from a full flow to a single error message.

Start from a promptReview a flowEmpty statesError messagesConfusing explanationsButtons and actionsOnboarding
3The experience

Inside a Toast Box review

Step 1

Adding a flow for review

To get started, the user describes the flow in a prompt or selects one of the prepared workflows from the dropdown, then uploads the screens and drags them into the correct order.

The Toast Box composer with a brief about a patient check-in flow, three screenshots in order, and the review type menu open.
Step 2

Toast Box audits the flow

Toast Box reviews the whole flow and opens with a summary, key findings and how severe each issue is.

Content review summary: the check-in flow relies on clinical and system shorthand, and the appointment summary's safety advice is the most urgent fix. Three key findings, 16 issues across 3 screens, 4 critical or high.

In this sample review, Toast Box found 16 issues across 3 screens, 4 of them critical or high. These figures describe the example flow, not product results.

Step 3

Clarify what the AI can't know

When a recommendation depends on product knowledge it doesn't have, Toast Box asks the team. Each answer updates the versions with more relevant, context-aware content.

Things to clarify with your product team: four questions, each with an answer field and a Not relevant option.
Toast Box asks

On the self check-in screen: is the medical record number printed on the patient's appointment letter?

The team answers

it is, it's a source of ID

Versions updated

"Enter your date of birth and the record number on your appointment letter, or scan its barcode."

The same question also sits on the screen it affects.
The Self check-in screen tab with one thing to check with your team, already answered.
Step 4

Explore content options

Each screen gets rewritten versions in the real interface, with every change explained. Toast Box recommends one; the team can compare the others or edit the text.

Version 1 Plain and short Recommended Selected
Version 1 of the insurance card screen: Take photos of your insurance card.

What changed: This version tells patients in plain words to take photos of their card and shows clearly how to skip if they have no insurance.

Change details 5
  1. 1
    Insurance Card Capture
    Take photos of your insurance card
    A verb-first instruction tells the patient what to do.
  2. 2
    Place card in frame. Front then back. Ensure no glare.
    Place your card in the frame, front then back, and avoid glare.
    One gentle sentence reads more easily than three commands.
  3. 3
    Secondary Ins.
    Other insurance
    Plain words replace the abbreviation and the billing term.
  4. 4
    Capture
    Take photo
    This says exactly what the button does.
  5. 5
    Self-pay? Skip. (Self-pay rates apply. See front desk for estimate.)
    No insurance? Skip this step. Self-pay rates apply, and front desk staff can give you an estimate.
    This names what is skipped, uses plain words and offers help without assuming the patient needs it.
Version 2Name the side
Version 3With design changes*
Edit text mode: every text element on the screen is outlined and editable.
Edit text

The team keeps the last word.

Click any line on the screen to change it. Toast Box makes a recommendation; it doesn't make the decision.

Step 5

Options with design changes

When words alone can't make a screen as clear as it could be, Toast Box says so and can offer a version with design changes.

Design changes could take some screens further.
Version 3 With design changes*
Version 3 of the insurance card screen: Front tab shown as done, Back tab as the current step, and a full-width Skip insurance button.

What changed: This version adds a clear "Skip insurance" button for patients without insurance and shows the front as done and the back as the current step, so patients know where they are and how to move on.

Change details 4
  1. 1
    Front tab looked the same as the other tabs, with only a check mark to show it was captured.
    Front tab has a light green background, green border and bold green text, plus the check mark.
    Patients can see the front of the card is already captured without relying on the small check mark alone.
  2. 2
    Back tab looked the same as the other tabs, so nothing showed it was the current step.
    Back tab is filled dark green with bold white text to show it is the side being scanned now.
    Patients know which side of the card to place in the frame next.
  3. 3
    No insurance? Skip this step. Self-pay rates apply; ask the front desk for an estimate. (small, light grey text)
    No insurance? Self-pay rates apply; ask the front desk for an estimate. (larger, dark grey text, placed above the new button)
    The cost information is readable and comes before the action, and the skip instruction now lives in the button.
  4. 4
    No button; skipping was only mentioned in light grey text.
    A full-width outlined button below the self-pay line, labeled "Skip insurance".
    Patients without insurance get a visible, clear way to move on instead of a hidden line of text.
Step 6

Preview the final flow and choose how to implement the update

Once every screen has a version, the team sees the whole updated flow with changes highlighted. From there, the changes go straight back into their design work, as an AI prompt or as new screens.

The full new flow: self check-in, insurance card and appointment summary, with options to copy an AI prompt or download the new screens.
Download new screens

One ZIP for the team

  • An image of each updated screen
  • A full-flow overview
  • The AI prompt as a text file
Or paste the prompt into an AI design tool

Every selected change, organized screen by screen, ready for the team's design tool.

4Designing the reviewer

Optimizing and refining the product

The hardest design problem was getting Toast Box to make the kind of thoughtful, relevant recommendations we'd make ourselves. So we designed a feedback experience for our own team, and treated refining the reviewer as part of designing the product.

Teach Toast Box: What should Toast Box do differently? Every review after this one learns from it. Works well and Needs work options, a feedback field and Save feedback.
Teach Toast Box

Feedback where the output is

Every version in a review has a place to say what works and what needs work. Each note is shared with everyone who uses that Toast Box, and every review after it learns from it.

5Next steps

Testing with companies to keep refining

Toast Box is a working MVP, evaluated and refined by our team. Next, we're testing it with companies on their own products, and using what we learn to keep improving its recommendations.