<?xml version="1.0" encoding="utf-8"?>

Common patterns are the recurring content moments that appear in every product. Error messages, empty states, modals, and loading screens might feel like small details, but they’re some of the most important moments in a product. When your payment fails, when your search returns no results, or when you're waiting for content to load: these moments test whether a product truly understands its users. Smart teams recognize that these patterns do heavy lifting across the entire product experience. A well-crafted error message prevents support tickets. A thoughtful empty state converts new users. A clear permission request builds trust. These patterns work harder than any marketing effort because they appear exactly when users need guidance most. Teams that treat them as reusable components not only create better experiences but also ensure quality scales as the product grows.

Exercise #1

Error messages

Error messages are critical moments where content design systems prove their value. Without standards, products develop inconsistent error handling: one feature says "Something went wrong," while another shows "Error 403: Forbidden." This inconsistency confuses users and erodes trust. A systematic approach ensures every error message follows the same helpful pattern.[1]

Build your error message framework around 3 components: what happened, why it matters, and what to do next. Create templates like "[Problem]. [Impact]. [Solution]." For example: "The code you entered doesn’t match. Didn’t get the code? [Resend code].”Document variations for different severity levels and contexts.

Define structure requirements: headline, body text, CTA, along with character limits, and the tone options. This prep means teams don’t spend too much time during development, and users get consistent, clear guidance.

Exercise #2

Empty states

Empty states are your first opportunities to impress as a product. When users encounter blank screens, a new dashboard, empty inbox, or no search results, these moments either confuse or guide. A systematic approach to empty states transforms dead ends into clear pathways forward, reducing abandonment and increasing feature adoption.

Create empty state templates that answer 3 questions: why is this empty, what value awaits, and how to get started. Build variations for different contexts: first-time empty (onboarding), no results empty (search/filters), and cleared empty (user deleted everything). Each needs its own messaging that matches the user goals and mental model.

Document your empty state hierarchy. For example, primary empty states get illustrations and detailed guidance. Secondary states stay lighter with just text and actions. Define length limitations, image specifications, and tone variations. Include accessibility guidelines for screen readers.

Exercise #3

Confirmation dialogs

Confirmation dialogs protect users from costly mistakes. When someone clicks delete, cancels a subscription, or discards unsaved work, these patterns create a critical pause. Without standards, products develop inconsistent friction. Some actions are too easy to reverse while others provide unnecessary warnings. With a systematic approach, you can safeguard important actions without frustrating users.

Make confirmation messages based on the severity of the consequence of the action. Low-impact actions need minimal friction: "Discard draft? You can start over anytime." High-impact actions require clear consequences: "Delete account? This permanently removes all data, projects, and access. This cannot be undone." Match the interruption level to the potential regret level.

Document button labeling standards. Instead of vague "Yes" and "No" buttons, use specific action labels that match the user’s intent and the context of the dialog.[2] Create accessibility guidelines ensuring screen readers convey the severity. This prevents both accidental deletions and confirmation fatigue.

Exercise #4

Notifications

Every product sends notifications, success confirmations, system updates, new messages, but without standards, users face a chaotic mix of popups, banners, and badges. A systematic approach creates predictable patterns that users can quickly scan and dismiss.

Define notification levels based on urgency and user action required. Success notifications confirm completed actions: "Changes saved." Info notifications share updates: "New feature available." Warnings prevent problems: "Storage almost full." Errors demand attention: "Payment failed." Each level needs distinct visual treatment, placement rules, and dismissal behaviors.

Create templates that scale across channels. In-app notifications stay contextual and brief. Push notifications hook attention with value. Email notifications provide detailed records. Document character limits for each channel, timing rules (immediate vs. grouped, and frequency limits. Include guidelines for notification grouping and summary patterns. Having a system prevents notification fatigue while ensuring critical information reaches users.

Pro Tip: Test notification templates with real data: names, numbers, and edge cases that break your character limits.

Exercise #5

Form validation

Form validation messages make or break the user experience. Without content standards, users encounter a frustrating mix where one field says "Invalid format" while another provides helpful guidance like "Phone number must include area code (e.g., 555-123-4567)." This inconsistency forces users to guess what went wrong and how to fix it. Effective validation reduces drop-offs and lowers support costs while keeping users confident in the process.

Create validation templates that prevent and resolve errors. Build formulas for common issues: "{Field} must {requirement}" for format errors, "{Field} already {exists/taken}" for duplicates, "{Number} characters remaining" for limits. Each message should explain the problem and solution. Users shouldn't need to decode cryptic errors or hunt for requirements.

Document validation timing and placement. Real-time validation helps for formats (email, phone) but frustrates for fields users haven't finished typing. Place error messages next to the field they relate to — not in a banner they might miss. Create positive validation too, as confirming correct entries reduces anxiety.

Exercise #6

Onboarding

Onboarding content helps new users feel confident, turning first impressions into lasting engagement. Build onboarding templates around user goals, not feature lists. Create progressive disclosure formulas: "Welcome! {Value statement}. Let's {first valuable action}." Follow with contextual guidance: "Great! Now you can {benefit achieved}. Next, try {natural next step}." If building onboarding templates around user goals through personalization questions, start with: "What brings you to {Product}?" offering clear goal options like "{Primary use case}", "{Secondary use case}", or "{Tertiary use case}". For example, in banking onboarding, personalization might include a risk assessment: "How comfortable are you with investment risk?" with options like "Low — I prefer safer investments", "Medium — Some risk is okay", or "High — I'm comfortable with bigger swings for higher returns". Based on their selection, respond with targeted guidance: "Perfect! Let's start with {relevant feature}."

Focus on moments of value, not comprehensive tours. Users learn by doing, not reading. Map your onboarding flow to user milestones. First session: core value. First week: key habits. First month: advanced features. Define when to educate (during relevant actions) versus when to stay quiet (when users are flowing). Document character limits for tooltips and progress indicators.

Exercise #7

Loading states

Loading messages set expectations during wait times. Without content standards, users see everything from spinning circles with no context to overly technical messages like "Fetching data from server endpoint." This inconsistency makes waits feel longer and leaves users wondering if something broke.

Create loading templates that inform and reassure. Build formulas based on what's happening: "Loading your {content type}..." for retrieval, "Processing {number} {items}..." for batch operations, "Almost there—{specific step}..." for multi-stage processes. Add context that helps users understand the wait is worthwhile.

Define loading patterns by duration. Under 1 second: no message needed. 1-3 seconds: simple status. 3-10 seconds: explain what's happening. Over 10 seconds: show progress and value. Include fallback messages for when things take longer than expected. This systematic can make waiting feel more purposeful.

Pro Tip: Front-load value in loading messages. "Preparing your personalized dashboard" beats "Loading...”

Exercise #8

Permission requests

Permission requests determine feature adoption and trust. Without content standards, users face jarring system dialogs with no context, like being suddenly asked for camera access with no explanation why. This aggressive approach leads to reflexive denials, permanently limiting product functionality.

Build permission templates that explain value before asking. Create context formulas: "{Feature} needs {permission} to {specific benefit}." For example: "Video calls need camera access to let teammates see you." Never request permissions on app launch—wait until users try the relevant feature. Context transforms suspicious requests into logical next steps.

Map permissions to user benefits, not technical requirements. Document pre-permission screens that prepare users before triggering system dialogs. Define fallback experiences for denied permissions with gentle re-engagement prompts. Include character limits that work within system constraints. This framework maximizes opt-ins while respecting user choice.

Complete this lesson and move one step closer to your course certificate