UX Writing & Content Design
Screen copy, error states, and notification copy written to real character limits, each published as an interactive Figma prototype.
Each study isolates a specific user drop-off point and supplies constraint-driven screen copy. These 18 portfolio projects demonstrate systematic UX content design. Content Patterns below outlines the underlying rules.
Banking App Onboarding Flow
User Problem & Context: New banking app users feel anxious and abandon multi-step financial setup. Guide them through account creation, bill categorization, and automatic monthly payments while building trust in security.
Constraints
headline: 45 characters
body: 100 characters
buttons: 25 characters
Strategy & Rationale
The strategy builds trust at each step. Plain, calm copy makes bill automation feel safe. Each screen shows one benefit so users aren't overwhelmed.
- Screen 1: The Core Value Proposition. The first screen addresses convenience right away with the headline
Never fear, Paymate's here!and establishes the primary benefit: automated bills and timely reminders. - Screen 2: Building Security Trust. Before asking for user data, the second screen addresses user security concerns directly. The headline
Fort Knox security. In your pocket.uses a familiar metaphor to convey safety, while the body copy lists the safeguards that protect the account. - Screen 3: Highlighting Smart Features. This screen introduces automated bill categorization. The headline
Smartphone, smart banking, smart userreinforces user agency and highlights system intelligence. - Screens 4-7: The Setup Process. After the first screens build trust, the flow moves to account creation and payment setup. Concise microcopy (
Enough about us, let's focus on you.) guides the user through manageable forms, culminating in a clear success confirmation (Welcome Aboard!).
Business Impact & Intended Outcome
Progressive disclosure reduces anxiety one step at a time, which cuts setup friction and lifts completion rates. The flow turns a complex financial signup into a high-trust, low-friction journey.
App Error with Unknown Cause
User Problem & Context: A system outage blocks access to price comparison data and returns no error code. Tell the user plainly what happened, prevent churn, and offer recovery options right away.
Constraints
headline: 30 characters max
body: 120 characters max
buttons: 15 characters max
Strategy & Rationale
This case study shows how a voice gets calibrated and why a first draft can fail. When users lose the app's core function, humor feels dismissive. The design moves from flippant fiction to direct, transparent, empathetic recovery.
-
Draft 1 (Scrapped, First-Draft Failure).
Headline:ERROR CODE: 42(14 chars) • Body: "It looks like the elf we have tracking your prices (Alan) stepped out for a quick call or something. Let's give Al a second. If you're in a rush, try our website." (162 chars) • Buttons:RETRY,WEBSITEWhy it failed: flippant humor frustrates users during an outage. The whimsical narrative delays recovery and runs past the 120-character limit. The invented error code also hides the root cause. -
Draft 2 (Approved, Calibrated Copy).
Headline:Prices are unavailable.(23 chars) • Body: "We can't load prices right now. Please try again soon or visit our website for the latest info and prices." (106 chars) • Buttons:RETRY,WEBSITEWhy it succeeded: complete transparency states the system constraint directly without technical jargon. Clear dual-path recovery (RETRYversusWEBSITE) preserves user agency and protects brand credibility. -
Content Strategy Takeaway.
Strong content design requires knowing when not to use humor. Critical error recovery demands total clarity, empathy, and rapid recovery paths over playful branding.
Business Impact & Intended Outcome
Clear copy protects the brand during an outage. When users can recover on their own, support tickets drop and engagement holds.
Flight Cancellation Notification
User Problem & Context: Severe weather cancels a traveler's flight without warning. Alert the passenger immediately with directions to the rebooking desk, written so they can act without panic.
Constraints
headline: 45 characters
body: 175 characters max
buttons: 25 characters max
Strategy & Rationale
A flight disruption needs a direct voice. Fast comprehension beats small talk.
- Headline:
FLIGHT CANCELLED. GO TO HELP DESKdelivers maximum scannability, answering what happened and where to go in one glance. - Body: The copy gives the specific flight (
DOC063) and the cause (“inclement weather”). It reinforces direct action: “Please head to the help desk.” - Buttons: The
Got itbutton dismisses the alert, whileAirport Mapopens wayfinding so travelers can orient themselves inside large terminals.
Business Impact & Intended Outcome
Plain wording calms the traveler and routes the crowd toward the service counters. Fast mobile wayfinding reduces distress and protects long-term brand goodwill during severe disruptions.
Fire Alert Notification
User Problem & Context: An active wildfire near a driver's commute threatens road closures and personal safety. Deliver an urgent notification that reads in one glance and prompts immediate, safe rerouting.
Constraints
headline: 30 characters max
body: 45 characters max
Strategy & Rationale
Safety alerts that reach drivers must read in one glance.
- Design and Tone: High-contrast warning colors and concise all-caps typography communicate urgent safety priority without cluttering the screen.
- Headline:
FIRE ON ATLANTIC AVEcommunicates danger and geographic proximity in under 25 characters. - Body:
FIRE MAY AFFECT YOUR ROUTE. REROUTE.instructs action without diverting attention from driving. - Button:
REROUTE TO SAFETYmakes the action decisive and safety-focused.
Business Impact & Intended Outcome
Putting driver safety first keeps users out of danger zones and meets the platform's duty to protect them.
Expired Credit Card Error
User Problem & Context: A customer tries to finish a time-sensitive car rental reservation, but the saved card has expired. Point to the exact problem and send the user to update the details without losing the booking.
Constraints
headline: 30 characters
body: 45 characters
Strategy & Rationale
Checkout payment errors need a direct, clear way out. Ambiguity here loses the sale.
- Headline:
YOUR CARD IS EXPIRED!gives the exact breakdown instantly, so users don't mistake it for a credit limit, a network drop, or expired credentials. - Body:
Update card details or add a new onegives clear instructions for clearing the payment obstacle right away. - UI Alignment: Visual form cues highlight the expiration date field, which pulls the eye straight to the fix.
Business Impact & Intended Outcome
Clear copy about a failed payment saves the sale.
“Fake Name” Error Message
User Problem & Context: Automated fraud detection flags a legitimate user's unique or uncommon name during account creation. Prompt identity verification respectfully without alienating or shaming the user.
Constraints
message: 45 characters max
Strategy & Rationale
Automated fraud checks often mark unusual and culturally diverse names as risky. The copy turns that doubt into a polite request for proof.
- Inclusive, Affirming Tone: Rather than issuing a negative error code,
That's an interesting name!turns an automated rejection into a courteous human exchange. - Collaborative Microcopy:
Please help us verify itinvites the user to help instead of issuing an accusation. - Direct Verification Pathway: An embedded verification link confirms identity right away without forcing the user out of the flow.
Business Impact & Intended Outcome
Empathy in an error message keeps diverse customers on board and protects lifetime value.
Contact Lens Subscription - Title & Meta Description
User Problem & Context: Visually impaired and elderly users experience tech anxiety when considering recurring medical deliveries. Craft search-optimized title and meta copy that builds trust and emphasizes effortless, doorstep replenishment.
Constraints
title: 65 characters max
meta description: 160 characters max
Strategy & Rationale
Accessible health care needs plain words and large, clear text for older readers.
- Title:
VisionQuest: Hassle-Free Contact Lens Delivery Every 30 Days!emphasizes reliability and a predictable service cadence. - Meta Description: The description puts a number on setup time (“15 minutes or less”) and leads with doorstep delivery, which lowers the effort users expect.
Business Impact & Intended Outcome
Clear, accessible metadata brings qualified clicks from careful buyers and grows subscriptions.
Truck Driver Delay Notification
User Problem & Context: A short-haul driver runs late because of highway traffic. Deliver a push notification that reads in one glance and offers fast routing choices without pulling attention off the road.
Constraints
headline: 30 characters max
body: 45 characters max
buttons: 25 characters max
Strategy & Rationale
Logistics notifications must stay short so drivers keep their attention on the road.
- Non-Accusatory Tone: The headline
Running Late?assigns no blame, so a sync lag or a traffic jam fits either way. - Extreme Brevity: Short phrasing reads cleanly through audio screen assistants.
- Actionable Choices:
Fuel up now or keep going?pairs with two distinct buttons (REROUTE TO PITSTOPandKEEP GOING). The choice takes one tap.
Business Impact & Intended Outcome
Timely notifications keep deliveries on schedule and protect driver welfare.
Car Buying Website Location Request
User Problem & Context: A vehicle marketplace needs the user's location to show local inventory and regional pricing. Ask for it transparently so privacy doubts don't cost the sale.
Constraints
headline: 25 characters
body: 45 characters
button: 15 characters
Strategy & Rationale
Users grant permission when the interface ties data collection to a clear benefit.
- Benefit-Oriented Headline:
Your dream car is here.leads with the user's goal, not the company's data need. - Engaging Personality: Playful microcopy
(Yes, even THAT one)builds a friendly brand voice. - Privacy-Conscious Input: Asking for a ZIP code instead of a street address respects privacy and still fills regional inventory.
- Compelling CTA:
VIEW OUR DEALSframes data entry as unlocking discounts instead of handing over personal details.
Business Impact & Intended Outcome
Clear value framing raises how many users say yes and moves them into browsing.
App Crash Recovery Message
User Problem & Context: An unexpected shutdown interrupts a graphic designer mid-critique. Reassure the user at restart, confirm whether recovery worked, and offer plain paths to restore or start fresh.
Constraints
headline: 40 characters max
body: 140 characters max
buttons: 20 characters max
Strategy & Rationale
System failures cause acute anxiety about lost work. The restart dialog has to confirm recovery at once and get the user back to work.
- Headline:
ACME DESIGNS Crashed Unexpectedlynames the failure without excuses. - Body:
Your design files were recoveredimmediately confirms recovery before offering workspace options. - Buttons:
RestoreandNewgive two clear actions.
Business Impact & Intended Outcome
A clear crash message keeps user trust and cuts app abandonment.
Grocery Subscription Promotion
User Problem & Context: Introduce a flat-fee monthly grocery delivery subscription on an in-app landing screen. Communicate recurring convenience and cost transparency without pressure tactics.
Constraints
headline: 45 characters max
body: 175 characters max
buttons: 25 characters max
Strategy & Rationale
Subscription upsells work when they frame the service around convenience and honest pricing.
- Headline:
ENJOY THE COMFORT OF HOME WE'LL SHOP FOR YOU.leads with the time the user gets back. - Body: Concrete details (“month’s worth of groceries,” “flat fee of $20/mo”) establish clear value with no hidden terms.
- Buttons:
LEARN MOREoffers a low-friction way in, whileNO THANKSgives a respectful exit with no guilt.
Business Impact & Intended Outcome
Honest subscription copy keeps customers longer than hard sells do.
Incorrect Email Error Message
User Problem & Context: A returning user types an email that's mistyped or not on file. State the specific sign-in problem and echo the input so the typo shows right away without revealing whether an account exists.
Constraints
message: 40 characters max
Strategy & Rationale
Sign-in friction is a top drop-off point. An explicit error message moves users straight to the fix.
- Targeted Clarity:
Retype email address, '[email]'tells the user exactly where the mismatch is and echoes their entry so the typo is visible right away. - Direct Action Verb: Leading with the imperative “Retype” names the next step without ambiguity.
Business Impact & Intended Outcome
Targeted inline feedback cuts password reset requests and unblocks sign-in fast.
Sports Fan App Promotion
User Problem & Context: Busy parents and sports fans can't follow live broadcasts. Highlight on-demand recaps, team alerts, and short score updates so users stop dreading that they missed something (FOMO).
Constraints
headline: 40 characters max
body: 175 characters max
buttons: 25 characters max
Strategy & Rationale
Promotional onboarding copy speaks to busy schedules with energy.
- Headline & Body:
Don’t miss hoops, stay in the loop!positions the app as an active assistant. The copy directly addresses packed game schedules. - Direct CTA:
Score a win against FOMO!turns the urge to keep up into a subscription.
Business Impact & Intended Outcome
Tying app benefits to busy schedules raises activation and daily opt-ins.
Concert Promotion
User Problem & Context: An in-app streaming service spots local tour dates for an artist the user plays. Turn casual listening into presale interest with targeted, exclusive copy.
Constraints
headline: 30 characters max
body: 45 characters max
button: 25 characters
Strategy & Rationale
Event promotions use listening history to deliver timely offers.
- Headline & Tone:
YEAH! YEAH! YEAH!andThe Beatles are back in your city!evoke nostalgia and local excitement. - Aspirational Labeling: Referring to casual listeners as “loyal listeners” deepens the connection and motivates participation. Prominent presale code styling (
FAB4) makes redemption one tap. - Button: The direct
PRESALECTA sends users straight into ticketing.
Business Impact & Intended Outcome
Context-aware ticketing microcopy turns casual music listeners into ticket buyers.
Rivalry Score Update
User Problem & Context: A fan at a formal event needs discreet, instant updates on the rivalry game they follow. Deliver a push alert with the score, the player, and the play outcome in under 50 characters.
Constraints
headline: 30 characters max
body: 50 characters max
Strategy & Rationale
A discreet alert gives the most information in the shortest glance.
- Headline:
ALL RISE FOR GRAND SLAMuses franchise vocabulary fans recognize, signaling the turning point before the user reads the body text. - Body: The code gives the scorer and the new standings (
Aaron Judge blasts a Grand Slam. NYY lead BOS 5-0).
Business Impact & Intended Outcome
Instant, glanceable alerts keep users connected during real-world events and drive engagement.
Content Patterns
Design standards governing these portfolio studies. Each pattern documents trigger conditions, required voice, and copy structure.
Error states 5
- State the cause in the first clause, before giving the fix.
- Put the recovery step second, as an imperative: “Re-enter the email you signed up with.”
- Never blame the reader. The fake-name study shows the anti-pattern, then the rewrite.
- Enforce character limits of 45 for headlines and 100 for body copy, while capping button labels at 25.
- Drop exclamation marks on failure. Calm copy reads as competence.
Alert copy 3
- Lead with the consequence and the timeframe, then the action.
- Provide one action per alert. Competing choices create decision fatigue during emergencies.
- Escalate by severity, not repetition. Capitalized keywords communicate urgency directly.
- State the user's next action instead of reporting internal system status.
Subscription & meta copy 5
- Put the benefit in the headline. Put the price in the body.
- Cut urgency adjectives. “Ends Friday” beats “last chance.”
- Write the meta description as a standalone sentence, because it renders without the page.
- Keep the button label to the outcome, not the mechanics.
Case files outline design constraints, copy rationale, and final UI strings. The featured hall passes apply this same discipline to print media.
Classroom Hall Passes
Custom double-sided passes for high school classroom management, built with curated vintage comic art and two-tone print layouts. Redacted for privacy.
The Spidey Bathroom Pass
Custom pass with panels from Spider-Man's comic history, including the scene where Spider-Man explains everyday life to the Beyonder.
The Hulk Hall Pass
Custom pass featuring panels from the Incredible Hulk's comic run.