UX Writing Teardown: Audit Trello

Audit and redesign Trello's microcopy into a portfolio case study.

Introduction

30 Second Summary

Every button, error message, and empty screen in an app is a design decision that shapes how people feel about using it. Most designers notice when the words feel wrong, but few can explain exactly why or how to fix them without making something else worse.

In this project, you will audit Trello's interface copy using a structured UX Writing framework, then rewrite the weakest touchpoints with documented reasoning for every decision. You'll package everything into a Figma case study that demonstrates you think about words as interface design.

What You'll Build

Picture walking a hiring manager through your case study, pointing to annotated before/after frames that show how you diagnosed a real product's copy problems and arrived at principled rewrites backed by documented trade-off reasoning.

By the end of this project, you'll have:

  • A reusable audit framework you can apply to any product to systematically evaluate its microcopy across six dimensions.
  • Documented rewrites of Trello's weakest copy, each tracing back to a specific user need with trade-off reasoning that explains every decision.
  • A Figma case study with 3-5 annotated before/after frames you can walk through in a portfolio review to demonstrate product design thinking.
  • Secret Mission: Synthesize your audit patterns into a mini voice and tone guide for Trello.

Are there any prerequisites?

This project assumes basic UX/UI design experience and familiarity with Figma. You'll set up a free Trello account in Step 1.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters. You're about to audit a real product's UX copy and produce a case study that demonstrates something most designers can't show: the reasoning behind content decisions.

Set Up Your Audit Workspace

Before you can evaluate a product's microcopy, you need two things: the product itself open in front of you, and a structured place to capture what you find.

Without a framework, observations stay scattered and impressions stay vague. In this step, you'll set up Trello as your audit target and build a reusable evaluation matrix in Figma. This is what separates a professional audit from "I noticed some bad copy."

In this step, get ready to:
  • Create a free Trello account and populate a sample board with lists and cards.
  • Explore Trello's interface and screenshot distinct UI states for your audit.
  • Set up a Figma case study file with an audit matrix that has six evaluation dimensions.
Create a Trello account and populate a sample board

You need a real, populated product in front of you to audit. A bare account with no content won't show you the microcopy that matters most.

  • Open trello.com in your browser.
  • Click Sign up - it's free! and complete the sign-up flow with your email address.

Already have a Trello account?

Sign in and skip ahead to creating the sample board below.

Once you're logged in, you'll land on your Trello home screen. Now you'll create a board that gives you enough content to audit.

  • Click Create in the top navigation bar.
  • Select Create Board.
  • Enter Audit Test Board as the board title.
  • Leave the Workspace set to its default and click Create.

Your new board appears. You should see an empty board with a prompt to add your first list.

  • Click Add another list and name the first list To Do.
  • Add a second list named In Progress.
  • Add a third list named Done.
  • Add 2-3 sample cards to each list by clicking the + button at the bottom of each list. Give each card a simple title like Draft report or Review designs.

Your board should now show three lists, each with a few cards. This populated state gives you the baseline for your audit.

Why does the board need sample content?

An empty board only shows you empty-state microcopy. Adding lists and cards lets you see how Trello handles buttons, form labels, confirmations, and card detail fields. The more UI states you can trigger, the richer your audit becomes.

Now you'll deliberately trigger different UI states so you can see microcopy across a range of contexts. Take a screenshot of each state you encounter.

  • Click Inbox in the left sidebar. Take a screenshot of whatever you see there.
  • Go back to your board and try adding a new card without typing a title. Take a screenshot of any validation message or behavior you see.
  • Click the three-dot menu on one of your lists and select the option to delete or archive it. Take a screenshot of the confirmation dialog.
  • Click on any card to open its detail view. Take a screenshot showing the fields, labels, and action buttons.

You should now have at least four screenshots capturing different microcopy touchpoints: the Inbox, a validation state, a confirmation dialog, and a card detail view.

What are these screenshots for?

You're building a firsthand map of the microcopy touchpoints you'll audit. Each screenshot captures copy in its original UI context. Evaluating microcopy without seeing the surrounding interface is like judging a road sign without knowing which road it's on.

Can't find the Inbox?

The Inbox feature is in the left sidebar of Trello's main navigation. If you don't see a sidebar, look for a menu icon or hamburger button in the top-left corner of the screen to expand it.

If the layout has changed since you're reading this, note that as a finding. The Inbox is included in Trello's free plan.

Help me find the Inbox in Trello's current interface.

Set up your Figma case study file

Your audit observations need a structured home. A single Figma file with dedicated pages keeps your framework, findings, redesigns, and final case study all in one place.

  • Open Figma in your browser and sign in.
  • Click New design file to create a blank file.
  • Rename the file to UX Writing Teardown: Trello by clicking the file name at the top of the editor.

Now create the four pages that will organize your entire case study. You can see your pages in the Layers panel on the left sidebar.

  • Double-click the default page name in the Layers panel and rename it to Audit Framework.
  • Click the + icon next to the page name to add a new page. Name it Audit Findings.
  • Add a third page and name it Before/After Redesigns.
  • Add a fourth page and name it Case Study Summary.

Your page list in the Layers panel should now show all four pages in order: Audit Framework, Audit Findings, Before/After Redesigns, and Case Study Summary.

What is each page for?

Audit Framework holds the scoring matrix you'll build next. Audit Findings is where your Trello screenshots will go alongside observations.

Before/After Redesigns will hold your side-by-side copy rewrites placed into the UI. Case Study Summary will become the polished one-page portfolio piece at the end of the project.

Pages panel not visible?

Click the current page name at the top of the Layers panel on the left sidebar to expand the page list. If the left sidebar itself is hidden, look for a toggle icon in the top-left area of the editor.

Help me find where to add pages in Figma.

Build the audit matrix on the Audit Framework page

The matrix is the backbone of your audit. It gives every piece of microcopy a score across six dimensions, so your evaluation is systematic instead of gut-feel.

  • Navigate to the Audit Framework page by clicking its name in the page list.
  • Create a table using Figma's shape and text tools. You need 11 columns and at least 12 empty rows beneath the header row.

Label the header row with these 11 columns, in this order:

  • Screen/Location (where in the product is this copy?).
  • Original Copy (the verbatim text from the UI).
  • Copy Type (one of: button, error, empty state, form label, confirmation, tooltip, or navigation).
  • User Intent (what is the user trying to do at this moment?).
  • Clarity (1-5).
  • Concision (1-5).
  • Character (1-5).
  • Actionability (1-5).
  • Accessibility (1-5).
  • Consistency (1-5).
  • Notes (observations, hypotheses, and questions).

Your matrix should now have a clear header row with all 11 column labels and enough empty rows beneath it to hold at least 12 audit entries.

What do the six scoring dimensions measure?

The first three dimensions come from the 3 C's framework by the Nielsen Norman Group. Clarity asks: do I immediately understand what this means and what to do? Concision asks: is every word necessary? Character asks: does the tone match this moment?

The 3 C's have a strict priority order: clarity first, concision second, character third. A few extra words are acceptable if they increase understandability.

The three additional dimensions extend the framework for product design concerns the 3 C's don't cover. Actionability: does it tell me what to do next? Accessibility: would a screen reader user understand this without visual context? Consistency: does it use the same language as similar touchpoints?

Widen the first four columns

The text-heavy columns (Screen/Location, Original Copy, Copy Type, User Intent, and Notes) need more width than the numeric score columns. Making the score columns narrow keeps the table compact and scannable.

Before you move on, do a quick check. Does your Figma file have all four pages listed in the sidebar? Does the Audit Framework page have a table with 11 labeled columns?

Table feeling overwhelming to build?

You don't need a pixel-perfect table. Use Figma's rectangle tool to draw a simple grid, then place text labels in each header cell. The matrix is a working tool for your audit, not a polished deliverable. You can always refine the layout later.

Help me build a simple table layout in Figma.

Your audit workspace is ready. You have Trello open with a populated board and screenshots of its key UI states, plus a structured Figma file with a scoring matrix designed to catch what gut-feel alone would miss. Next up, you'll walk through Trello systematically and fill that matrix with real microcopy observations.

Audit Trello's Microcopy Across Five UI Categories

Your audit workspace is set up. You have a Trello board to explore and a Figma file structured to capture everything you find.

Now comes the real work: seeing microcopy in context. Capturing a button label without knowing the screen around it is like evaluating a road sign without knowing which road it's on. This step walks you through Trello systematically, so the audit reveals patterns you'd never notice looking at one screen in isolation.

In this step, get ready to:
  • Walk through Trello's interface and capture 10-12 microcopy examples across five categories.
  • Score each piece of copy against six evaluation dimensions in your audit matrix.
  • Identify scoring patterns and flag your weakest entries as rewrite candidates.
Capture microcopy across five UI categories

You've already explored several Trello screens and captured some screenshots. Now you'll do a structured pass, hunting for 2-3 representative examples in each of five microcopy categories. The goal is to see the full landscape of how Trello talks to you across different moments and stakes.

Here are the five categories and where to find examples in Trello:

  • Buttons/CTAs: Look at board creation, card action menus, list action menus, and header navigation items. Capture the exact text on each button or link.
  • Empty states: Check your Inbox when it has no items. Look at a board with no cards in a list. Open any screen that shows a "nothing here yet" message.
  • Error/validation: Try submitting a card with no title. Look for inline validation messages on any form. Check what happens when you enter invalid data in settings fields.
  • Form labels/placeholders: Open the card creation modal. Browse board settings and profile settings. Pay attention to placeholder text inside empty fields and the labels above them.
  • Confirmations/success messages: Delete a list, archive a card, or complete any action that triggers a success or completion message. Capture the full message and any undo options.

Why capture the surrounding UI?

A button that says "Done" means something completely different on a task completion screen versus a settings modal. Context determines whether copy is effective.

When you screenshot each piece of microcopy, make sure the surrounding interface is visible. You'll need this context when you score and rewrite later.

  • Switch back to your Trello board in the browser.
  • Work through each of the five categories above. For each category, find 2-3 representative examples of microcopy.
  • Take a screenshot of each example with its surrounding UI visible. Aim for 10-12 screenshots total across all five categories.

Use keyboard shortcuts for faster screenshots

Press Cmd+Shift+4 (macOS) or Windows+Shift+S (Windows) to select a specific region of the screen. This lets you capture just the UI component and its immediate context without cropping later.

  • Return to your Figma file and navigate to the Audit Findings page.
  • Create five section labels on the page, one for each category: Buttons/CTAs, Empty States, Error/Validation, Form Labels/Placeholders, and Confirmations/Success Messages.
  • Paste each screenshot under the matching category label.

Your Audit Findings page should now show 10-12 screenshots organized under five clear category headings. Each screenshot shows a piece of Trello microcopy in its surrounding UI context.

Struggling to find examples for a category?

Some categories require you to trigger specific states. For error/validation, try clicking the card creation button and immediately submitting without typing a title. For confirmations, try archiving or deleting a card. If you're still short on examples, check Trello's workspace settings or profile settings for additional form fields and labels.

Help me find more microcopy examples in Trello across all five categories.

Score each entry in your audit matrix

You have the raw material. Now you'll evaluate each piece of microcopy against the six dimensions in your audit matrix. This is where the audit goes from "I noticed some bad copy" to a structured, defensible analysis.

  • Switch to the Audit Framework page in your Figma file.
  • Start with your first screenshot on the Audit Findings page. For this entry, fill in a new row in the audit matrix.

Each row in the matrix needs these fields filled in:

  • Screen/Location: Name the exact screen and area (e.g., "Card creation modal, title field").
  • Original Copy: Write the text exactly as it appears in Trello. Do not paraphrase.
  • Copy Type: Choose one: button, error, empty state, form label, confirmation, tooltip, or navigation.
  • User Intent: Describe what the user is trying to accomplish at this exact moment.
  • Score this entry on each of the six evaluation dimensions from 1 (poor) to 5 (excellent):
  • In the Notes column, write a brief diagnostic for each score of 1 or 2 explaining what fails and why. For scores of 4 or 5, note what works well.

What's the difference between Observed and Hypothesis?

Every note in your matrix should be labeled as one of two types. Observed means you can point to exact UI evidence. For example: "The button says 'Add a card' which names the outcome."

Hypothesis means you're making an assumption about user behavior that you'd want to test. For example: "New users may not understand what 'Power-Ups' means without context." This distinction is critical for your portfolio because it shows intellectual honesty about what you actually know versus what you'd need to validate with user research.

  • Label each note in your matrix as either Observed or Hypothesis.
  • Repeat this process for all 10-12 of your captured microcopy entries. Work through them one at a time, referencing each screenshot on the Audit Findings page as you go.

After completing 3-4 entries, pause and scroll back through your rows. Check that your scores feel consistent. A score of 3 for Clarity on one button should represent roughly the same level of clarity as a 3 on another button.

Not sure how to score a dimension?

If you're stuck on a score, ask yourself: "Would I change this?" If the answer is no, it's likely a 4 or 5. If you'd rewrite it immediately, it's a 1 or 2. If you'd change it only in certain contexts, it's a 3. The scores don't need to be perfect. They need to be consistent enough to reveal patterns.

Help me calibrate my microcopy scoring across the six dimensions.

Identify patterns and flag your rewrite candidates

Your matrix is full. Now step back from the individual entries and look at the bigger picture. This is where the audit pays off. Patterns across entries tell you something about the product's content design as a whole, not just one weak button.

  • Scan your matrix column by column. Ask yourself: do certain categories consistently score lower? For example, are empty states always weaker than buttons?
  • Check whether any single dimension is weak across the board. If Accessibility scores are low on every entry, that's a systemic pattern worth noting.
  • Look for Consistency gaps between entries of the same type. If two different buttons use different language patterns for similar actions, note that.

What kind of patterns should I look for?

Useful patterns go beyond "this entry scored low." Look for relationships. Does Actionability drop in empty states compared to buttons? Is Character strong in onboarding copy but flat in error messages?

These cross-category insights are what turn your audit from a list of complaints into a content design diagnosis.

  • Sort your entries by total score (add up all six dimension scores per row). Identify the 5-6 entries with the lowest totals.
  • Flag these 5-6 entries in your matrix by highlighting the row or adding a "Rewrite Candidate" label in the Notes column.
  • For each flagged entry, confirm it has at least one dimension scored 1 or 2 with a diagnostic note explaining the specific failure.

Before you review your completed matrix, take a guess. Which of the five categories do you think had the lowest average scores? Which dimension was weakest across the board?

Now scroll through your matrix. Your audit should have at least 10-12 entries spanning all five categories. Every entry should have scores filled in and diagnostic notes labeled as Observed or Hypothesis. Five to six of your weakest entries should be clearly flagged as rewrite candidates.

Fewer than 10 entries?

Check which category is underrepresented. If you're short on error/validation examples, try entering invalid dates, leaving required fields blank, or exceeding character limits in Trello. If confirmations are light, try archiving multiple cards or closing a board.

Help me find more Trello microcopy to complete my audit.

You've built something most designers never create: a structured, scored inventory of a real product's microcopy with diagnostic reasoning for every judgment. Next, you'll take your weakest-scoring entries and rewrite them, discovering that improving one dimension often means sacrificing another.

Rewrite Copy and Reason Through Trade-Offs

Your audit matrix tells a clear story. You've scored every piece of microcopy against six dimensions, separated observations from hypotheses, and flagged your weakest entries.

Fixing those problems is where the real skill gap appears. Improving one evaluation dimension often degrades another. This step forces you to navigate those tensions head-on and document the reasoning behind every decision you make.

In this step, get ready to:
  • Try naive rewrites that attempt to maximize every dimension at once, then observe what breaks.
  • Build a structured reasoning chain for each of your 5-6 rewrite candidates.
  • Identify at least two genuinely hard trade-off decisions and document your contextual reasoning.
Try a naive rewrite of your weakest entry

Your lowest-scoring entry is the best place to start. Before you build any structured framework, you need to experience the core tension firsthand.

  • Switch to the Audit Framework page in your Figma file.
  • Find the entry with the lowest overall score among your flagged rewrite candidates.
  • Below or beside that entry, write a new version of the copy that attempts to score 5/5 on all six dimensions at once: Clarity, Concision, Character, Actionability, Accessibility, and Consistency.
  • Give it your best shot. Try to make the copy perfectly clear, as short as possible, full of personality, action-oriented, screen-reader friendly, and consistent with the rest of Trello's voice.

Before you evaluate your rewrite, predict: do you think you managed to improve all six dimensions without sacrificing any of them?

Now read your naive rewrite back critically, side by side with the original.

  • Compare the word count. Did you make it clearer but noticeably longer?
  • Read it aloud. Does the tone match this specific moment? If the original was a destructive action confirmation, does your added personality feel appropriate?
  • Consider a first-time Trello user. Would they understand your version without the visual context you captured in your screenshot?
  • Document each tension you discover in the Notes column for that entry.

You'll likely find at least one dimension that degraded when you improved another. That's the point. The naive rewrite is a diagnostic tool, not the final answer.

Why start with the naive approach?

Trying to maximize everything at once forces you to experience the trade-offs firsthand. Making a button label clearer might double its word count. Adding warmth to an error message can feel tone-deaf when a user just lost data. Shortening a message can strip the context a new user needs.

The naive rewrite reveals which dimensions are in genuine tension for each specific touchpoint. That discovery is what makes your final reasoning chains authentic.

  • Repeat this process for each of your remaining 4-5 flagged candidates.
  • For each one, write the naive rewrite, read it back critically, and note the tensions that surface in the Notes column.

Every rewrite seems fine?

If no tensions surface, try pushing harder on a single dimension. Write a version that maximizes Character with personality and humor. Then ask: is it still concise? Now write a version that maximizes Concision by cutting every possible word. Is it still clear to a new user?

If you're still not finding tensions, the original copy might already be strong. Check whether you flagged entries with low enough scores. Help me find trade-offs between clarity and concision in my Trello microcopy rewrites.

Build a reasoning chain for each rewrite

Now that you've experienced the tensions firsthand, it's time to think through each rewrite deliberately. A reasoning chain documents not just what you changed, but why you changed it and what you chose to sacrifice.

What goes in a reasoning chain?

Each reasoning chain has eight components:

  • Original Copy - the verbatim text from Trello.
  • UX Problem - what specific failure does this cause? Frame it as a user experience impact, not a grammar issue.
  • User Intent - what is the user trying to accomplish at this exact moment? What is their likely emotional state?
  • Principle Applied - which evaluation dimension did you prioritize and why? Reference the 3 C's hierarchy (Clarity first, Concision second, Character third) but also consider whether Actionability or Accessibility should override here.
  • Alternatives Considered - at least 2 other versions you wrote and rejected, each with a one-line reason for the rejection.
  • Trade-off Made - which dimension did you deliberately sacrifice and why?
  • Final Copy - your chosen version.
  • What I'd Validate - what assumption are you making about the user that you'd want to test? What research question would you ask?
  • Start with your first rewrite candidate. Create a new structured text block or small table on the Audit Framework page, near the corresponding audit matrix entry.
  • Fill in all eight components. For the UX Problem field, describe a concrete user experience impact. "Users may hesitate before clicking" is stronger than "the wording is awkward."
  • For the Alternatives Considered field, include the naive rewrite you wrote earlier as one of the rejected versions. You already know why it falls short.

Review your first completed reasoning chain. Every field should trace your decision back to a user need, not a style preference.

Why reference the 3 C's hierarchy?

The 3 C's framework from Nielsen Norman Group establishes a clear priority order. Clarity comes first because without it, microcopy fails its core purpose. Concision comes second. A few extra words are acceptable if they increase understandability. Character comes third and should never get in the way of the first two.

Your audit extends this with three more dimensions: Actionability, Accessibility, and Consistency. When you fill in Principle Applied, explain which dimension took priority for this specific touchpoint and why the default hierarchy did or didn't apply.

  • Repeat the reasoning chain process for your remaining 4-5 rewrite candidates.
  • Each chain should be its own text block or table on the Audit Framework page, placed near the matching audit matrix entry.

Struggling to fill in Alternatives Considered?

If you can't generate at least two alternative versions, try pushing each dimension to its extreme one at a time. Write the shortest possible version (max Concision). Write the friendliest version (max Character). Write the most explicit version (max Clarity). Each extreme gives you a candidate to evaluate and reject with a concrete reason.

Help me generate microcopy alternatives for my Trello rewrite.

Document your hardest trade-off decisions

Some trade-offs have a clear winner. Others are genuinely hard. These hard cases are the most valuable part of your case study because they show a hiring manager how you think when there is no single right answer.

  • Review your completed reasoning chains and identify at least two entries where the trade-off decision was genuinely difficult.
  • For each hard case, expand the Trade-off Made field to include the contextual factors that tipped your decision.

What makes a trade-off genuinely hard?

Look for cases where the stakes of getting it wrong are meaningful. A destructive action confirmation where adding clarity might also add anxiety. An empty state where personality could distract from the call to action. A form label where being more descriptive creates cognitive overload.

For these entries, note that there may not be a single correct answer. Explain which contextual factors tipped your decision: the severity of the action, the user's likely emotional state, whether the user is new or experienced, and whether reversibility changes the calculus.

  • In each hard-case reasoning chain, label your notes as Observed (you can point to exact UI evidence) or Hypothesis (an assumption about user behavior you'd want to test). This distinction carries directly into the What I'd Validate field.
  • For each What I'd Validate field, write a specific research question. "Would users understand this label without the icon?" is stronger than "I'd do user testing."

Take a final look at your Audit Framework page. Before you review, predict: does every reasoning chain clearly show what you changed, why you changed it, and what you gave up?

Each of your 5-6 flagged candidates should now have a complete reasoning chain with all eight components filled in. If any chain is missing Alternatives Considered or Trade-off Made, go back and fill those in. Those two fields are what distinguish principled decisions from gut rewrites.

Reasoning chains feel repetitive?

If every chain cites the same trade-off (e.g., always sacrificing Character for Clarity), check whether you have variety across your rewrite candidates. Different copy types surface different tensions. Buttons tend to pit Concision against Actionability. Error messages pit Clarity against Character. Empty states pit Character against Concision.

Help me find diverse trade-off patterns across my microcopy categories.

Your reasoning chains give every rewrite a foundation in user need, not style preference. Next, you'll bring in an AI brainstorming partner to pressure-test your decisions and surface edge cases you might have missed.

Use AI as a Brainstorming Partner, Not a Writer

You now have principled rewrites backed by documented reasoning chains. Every rewrite traces back to a user need, a chosen principle, and a deliberate trade-off.

AI tools can generate dozens of copy variations in seconds. But "grammatically correct and clear" is not the same as "right for this moment, this user, this product." In this step, you'll put your rewrites side-by-side with AI-generated alternatives to discover exactly where AI adds value and where your design judgment is irreplaceable.

In this step, get ready to:
  • Prompt an AI tool with full context for 3-4 of your rewrite candidates.
  • Document side-by-side comparisons of AI-generated copy versus your human-chosen copy with reasoning.
  • Use AI to surface edge-case and accessibility issues you hadn't considered.
Prompt your AI tool with your rewrite candidates

A generic prompt like "make this better" produces generic output. For AI to generate useful alternatives, it needs the same context you used when writing your own rewrites: who the user is, what they're trying to do, and what's at stake.

  • Open Claude at claude.ai or ChatGPT at chatgpt.com in your browser.
  • Sign in or create a free account if you don't have one yet.
  • Pick 3-4 of your weakest-scoring rewrite candidates from the Audit Framework page in your Figma file.

For each candidate, you'll give the AI the same context you used in your own reasoning chain. This lets you compare its output against yours on equal footing.

  • Paste the following prompt into your AI tool, filling in the details from your audit matrix for your first rewrite candidate:
I'm auditing Trello's UX copy. This [[COPY_TYPE="button, message, or empty state"]] currently says "[[ORIGINAL_COPY="paste the original copy here"]]." The user is [[USER_CONTEXT="describe the context, intent, and emotional state"]]. The action is [[ACTION_STAKES="describe the stakes: reversible or irreversible, routine or rare"]]. Suggest 5 alternatives and for each one, explain what trade-off it makes between clarity, concision, and character.

Why does this prompt include so much context?

Without context, AI defaults to "clear and friendly" copy that sounds competent but fits nowhere in particular. Specifying the user's emotional state, the action's stakes, and the copy type forces the AI to reason about the same constraints you faced in your own rewrites.

This is also what makes the comparison fair. If you feed the AI less context than you had, any weakness in its output might just be a context gap, not a judgment gap.

  • Review the 5 alternatives the AI generates.
  • Note which suggestions are strong starting points and which miss the mark.
  • Repeat this prompt for each of your remaining 2-3 candidates, adjusting the variables each time.

You should now have AI-generated alternatives for 3-4 of your rewrite candidates. Do not adopt any AI suggestion as-is.

Getting generic or unhelpful output?

If the AI returns vague alternatives that all sound the same, your context variables may be too broad. Instead of "the user is completing a task," try something specific like "the user is about to permanently delete a list they spent 20 minutes building."

The more specific you are about the emotional state and stakes, the more differentiated the AI's alternatives become.

Help me write a better UX copy prompt for AI that produces more specific and differentiated alternatives.

Evaluate AI suggestions against your framework

Generating alternatives is the easy part. The real skill is evaluating them against the same framework you used for your own rewrites.

  • For each AI suggestion, work through these evaluation questions:

What context does AI typically miss?

AI consistently produces competent but flat copy. It hits clarity and concision well, but tends to miss three things: emotional context (the difference between a routine action and a high-stakes one), severity matching (using the same tone for "rename a list" and "permanently delete a board"), and product voice consistency (how Trello speaks in adjacent touchpoints versus how a generic app would speak).

  • Return to the Audit Framework page in your Figma file.
  • Next to each of your 3-4 AI-prompted rewrite candidates, add a new section titled "AI Comparison."
  • For each candidate, document a brief comparison using this format: "AI suggested X. I chose Y instead because [specific reasoning about context the AI missed]."
  • Where AI output genuinely improved on your version, note that too and explain what you learned.

Your Audit Framework page should now show side-by-side reasoning for each candidate: your original rewrite chain on one side, and the AI comparison notes alongside it.

Be honest when AI wins

If the AI produced a genuinely better alternative for a particular touchpoint, document that honestly. The point of this exercise is not to prove AI is bad. It is to discover where AI adds value and where it falls short. Intellectual honesty strengthens your case study.

Use AI for edge-case discovery and accessibility critique

Generating copy alternatives is where AI is weakest. But catching blind spots is where AI is strongest. A single prompt can systematically surface scenarios you would not have thought of on your own.

  • Pick one of your rewrite candidates that involves a user-facing action (a button, a confirmation, or an error message).
  • Paste the following prompt into your AI tool, replacing the variable with the specific copy you want to evaluate:
Here is a piece of microcopy from Trello: "[[COPY_TO_EVALUATE="paste the copy you want to evaluate"]]"

What could go wrong with this copy? What user scenarios might make it confusing, misleading, or exclusionary? How would this read for a non-native English speaker? What would a screen reader announce for this element?

Why is this where AI shines?

AI is a systematic critic that can enumerate failure scenarios faster than you can brainstorm them. It considers non-native speakers, screen reader announcements, ambiguous phrasing, and cultural misreadings simultaneously. You still decide which issues matter, but AI catches the ones you would have missed entirely.

  • Review the AI's response and identify at least 2 edge-case or accessibility issues you had not considered before.
  • Repeat this prompt for 1-2 more of your rewrite candidates to build up a broader list of issues.
  • Return to the Audit Framework page in Figma.
  • Add the edge-case and accessibility findings to the Notes column of your audit matrix next to the relevant entries.

Before you move on, review your Audit Framework page in Figma. What do you expect to see there now that you've completed the AI comparison work?

You should see your original 10-12 scored entries, your 5-6 rewrite reasoning chains, and for 3-4 of those candidates, new AI comparison notes alongside documented edge-case and accessibility findings in the Notes column.

Missing edge-case findings?

If the AI's edge-case responses feel too surface-level, try adding more context to the prompt. Include the specific UI location, the user's likely task flow, and whether the action is reversible. You can also try a follow-up prompt asking specifically about cognitive load or users in a hurry.

Help me get more specific edge-case and accessibility findings from AI about my UX microcopy.

You've now seen both sides of AI in UX writing: competent but flat as a writer, and genuinely valuable as a critic. Next, you'll take your strongest rewrites and put them into Figma as polished before/after comparison frames for your case study.

Redesign in Figma and Package Your Case Study

You've scored microcopy, written principled rewrites, and used AI to stress-test your thinking. All of that work lives in audit notes and reasoning chains. Now it's time to turn it into something a hiring manager can see in 60 seconds.

The strongest portfolio artifacts show the thinking, not just the output. In this step, you'll arrange your before/after comparisons as annotated Figma frames, then package everything into a structured case study that connects copy decisions to interaction design.

In this step, get ready to:
  • Create 3-5 annotated before/after comparison frames on Page 3.
  • Build a one-page case study summary on Page 4.
  • Add a "What I'd Do Next" section with specific research questions.
Create your before/after comparison frames

Each comparison frame tells a micro-story. The left side shows what Trello does now. The right side shows your improved version in context, with annotations explaining why you made each change.

  • Switch to Page 3 (Before/After Redesigns) in your Figma file.
  • Review your 5-6 rewrite candidates from Step 3 and your AI comparisons from Step 4. Select 3-5 rewrites where the reasoning is strongest and the visual difference is most compelling.
  • For each selected rewrite, create a new frame on the page.

What goes in each frame?

Each frame has two halves. The left side holds the original Trello screenshot from your Audit Findings page. It shows the copy in its real UI context.

The right side holds your redesigned version. Use Figma's text and shape tools to recreate just the relevant component (a button, a modal, an empty state card, a form field) at enough fidelity to show the copy change in context. You do not need to rebuild the entire Trello interface.

  • On the left side of each frame, place the original Trello screenshot from your Audit Findings page on Page 2.
  • On the right side, recreate just the relevant UI component using Figma's text and shape tools. Place your improved copy into this recreated component.
  • Add three text annotations to each frame, positioned around the comparison. Label them: UX Problem, Principle Applied, and Trade-off Made.
  • Pull the content for each annotation directly from the reasoning chains you documented in Step 3.

Review Page 3. You should see 3-5 side-by-side frames, each with the original screenshot on the left, your redesigned component on the right, and three clearly labeled annotations.

Frames looking cluttered?

Keep each annotation to 1-2 sentences. The detail lives in your reasoning chain on Page 1. These annotations are signposts, not the full argument.

If your redesigned component looks too rough, focus on text fidelity over pixel-perfect visuals. The copy is the point, not the mockup quality.

How can I make my before/after frames cleaner and easier to scan?

Build your case study summary page

The summary page is the one-pager someone would read to understand your entire audit at a glance. It tells the story of what you did, what you found, and what you learned.

  • Switch to Page 4 (Case Study Summary) in your Figma file.
  • At the top of the page, add your project title ("UX Writing Teardown: Trello") and a one-sentence objective describing what you set out to do.
  • Below the title, create a Methodology section. Describe your audit framework: the 3 C's (Clarity, Concision, Character) as the primary lens, extended with your three additional dimensions (Actionability, Accessibility, Consistency).

Keep each section scannable

Use headers, short bullet points, and visual hierarchy. A recruiter or hiring manager will skim this page in about 30 seconds before deciding whether to read deeper.

  • Add a Key Findings section with 3-5 bullet points summarizing the patterns you observed across all your audit entries. Note which categories consistently scored lower, or which evaluation dimension was weakest across the board.
  • Add a Before/After Highlights section with thumbnail references to your 3-5 comparison frames from Page 3. You can use small screenshots of each frame or linked thumbnails.
  • Add an AI Insights section. Note what AI helped with (edge cases, accessibility critique, brainstorming volume) and where human judgment was necessary (emotional context, severity matching, product voice consistency).
  • Add a Key Learnings section with 3-5 bullet points about what you learned about UX writing trade-offs from this exercise.

Review Page 4. You should see a structured one-page layout with a clear visual hierarchy: title, methodology, findings, before/after references, AI insights, and key learnings.

Summary page feeling too long?

Each section should be a heading plus a short list or 1-2 sentences. If any section runs longer than 5 bullet points, tighten it. This is a summary, not the full audit.

How should I structure a one-page UX case study summary so it stays scannable?

Add your "What I'd Do Next" section

This section demonstrates product thinking. It shows you understand the limits of a portfolio exercise conducted without access to user data.

  • At the bottom of the Case Study Summary page, create a What I'd Do Next section.
  • Add specific research questions you would investigate. Name the actual questions, not just "I'd do user testing." For example: "Do users understand the distinction between 'Archive' and 'Delete' on first encounter?" or "Does the empty state copy in Inbox drive enough card creation for new users?"
  • Add patterns you would investigate further if this were a full engagement. Name other Trello flows that would benefit from this audit approach.
  • Explicitly note which of your findings throughout the case study are directly observed from the product versus assumptions that would require validation with user research.

Why distinguish observations from hypotheses?

"Observed" means you can point to the exact UI evidence. "Hypothesis" means you're making an assumption about user behaviour you'd want to test. Calling out this distinction shows intellectual honesty about what your audit can and cannot prove without real user data.

Before you do your final review, consider: if a hiring manager spent 60 seconds with your case study, what would they take away? Would they see documented reasoning, or just rewritten copy?

Review your complete Figma file across all four pages. Page 1 should have your scored audit matrix and reasoning chains. Page 2 should have your screenshots in UI context. Page 3 should have 3-5 annotated before/after comparison frames. Page 4 should have a structured summary ending with the "What I'd Do Next" section. The case study should clearly distinguish between what you observed directly and what you'd want to validate.

Not sure if your case study is portfolio-ready?

Check that every before/after frame has all three annotations filled in. A comparison without reasoning is just a style preference, not a design decision.

Make sure your summary page has specific findings, not generic statements. "Actionability was consistently strong across buttons but weak in empty states" is specific. "Some copy could be better" is not.

How can I tell if my UX Writing case study is strong enough for my portfolio?

Secret mission

Create a Voice and Tone Mini-Guide

You've audited individual touchpoints and rewritten specific pieces of copy. But what if you had to hand your findings to another designer on the team? Could they make consistent copy decisions without you in the room? In this bonus challenge, you'll synthesize your audit patterns into a one-page voice and tone guide that turns scattered observations into a reusable content design artifact.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely on free tools, so there are no ongoing costs. Decide whether to keep your resources as they are, tidy them up, or delete them entirely.

Resources you used:

  • Figma file: UX Writing Teardown: Trello with five pages of case study content (Audit Framework, Audit Findings, Before/After Redesigns, Case Study Summary, Voice and Tone Guide).
  • Trello sample board with lists and cards used during the audit.

Keep everything running

No action needed. Choose this if you plan to continue refining your case study or want to reference it later.

  • Your Figma file is stored in your Figma account at no cost.
  • Your Trello board and account remain on the free plan with no usage limits that affect this project.

Pause - I'll come back to this later

Tidy up your workspaces while keeping everything recoverable.

  • In Trello, archive your sample cards and lists to declutter your Workspace without permanently losing the board.
  • In Figma, move your UX Writing Teardown: Trello file into a dedicated project folder to keep your file browser organized.

Delete - I don't want to use this again

Remove all project resources if you do not plan to revisit this work.

  • In Trello, open your sample board. Access the board menu, close the board, then select the option to permanently delete it.
  • In Figma, return to your file browser. Right-click the UX Writing Teardown: Trello file and delete it.

What about my Trello account?

Your Trello account stays on the free plan at no cost. If you want to delete it entirely, visit your Atlassian account settings at id.atlassian.com and look for the account deletion option.

Nice Work!

Nice Work!

You just completed a full UX Writing teardown of a real product and turned it into a portfolio-ready case study. You can now look at any digital interface and systematically evaluate, diagnose, and improve the words that shape a user's experience.

You've learned how to:

  • Build a systematic audit framework with six evaluation dimensions and apply it to a live product, scoring Trello's microcopy across buttons, empty states, errors, form labels, and confirmations.
  • Write principled rewrites with documented trade-off reasoning using the 3 C's framework (Clarity, Concision, Character), distinguishing observed evidence from hypotheses and using AI as a brainstorming partner while preserving your own design judgment.
  • Create portfolio-ready before/after comparison frames in Figma with annotated reasoning that connects copy decisions to interaction design and packages the full case study for your portfolio.
  • Secret Mission: Synthesized your audit patterns into a mini voice and tone guide demonstrating strategic content design thinking.

Ready to quiz yourself?