Designing an Accessible Messaging Generator with LLMs
Platform: VMware AI Design Toolkit – internal tool supporting prompt engineering across enterprise teams.
🧭 Project Overview
Led the design of an accessible, user-friendly interface for internal designers to work effectively with AI language models. Focused on creating scalable components, clear workflows, and thorough documentation to ensure usability, accessibility, and smooth integration.
📌 Responsibilities
-
Led UX design, interaction flows, and visual specifications
-
Collaborated with accessibility and AI experts to ensure WCAG compliance and ethical alignment
-
Created wireframes, prototypes, and conducted internal research to validate interaction models
⏳ Timeline & Team
This 3-month initiative followed a lean, iterative process. I collaborated with one PM, one accessibility lead, and two engineers across multiple time zones.
Phase 1 (Weeks 1–4): Discovery & Planning
Researched existing design gaps, audited workflows, and aligned on project goals.
Phase 2 (Weeks 5–8): Design & Iteration
Designed and tested core features like message-type recommendations and CSV templates.
Phase 3 (Weeks 9–12): Documentation & Handoff
Finalized high-fidelity designs, accessibility specs, and supported engineering handoff.
📐 Design Strategy
The design strategy focused on creating a modular, accessible prompt authoring experience that fit seamlessly into existing workflows. I prioritized usability by grounding decisions in feedback from internal designers and accessibility experts, structuring the tool around reusable templates, and applying WCAG standards from the start. The goal was to deliver a scalable solution that encouraged adoption and maintained consistency across AI-generated experiences.
🛠️ Problem & Solution Overview
Challenge
-
Lack of standardized prompt engineering workflows
-
Limited accessibility and usability for diverse users
-
Inconsistent integration with existing design tools
-
Difficulty scaling AI adoption across teams
Solution
-
Developed standardized prompt templates and guidelines
-
Designed accessible, user-friendly interfaces
-
Integrated seamlessly with current design workflows
-
Created scalable tools to support team-wide AI adoption
Research focused on messaging inconsistencies and real-world accessibility issues
To bring our users to life, we developed personas based on real employees at VMware, each with unique goals and accessibility needs.
Personas based on user research.
We needed to ensure user interactions were accessible from multiple perspectives
Blind and Low-Vision Users
-
Dynamic ARIA announcements
-
Voice input support
Users with Mobility / Motor Disabilities
-
Consistent error placement
-
Minimized, clear messages
-
Full keyboard & voice navigation
Users with Cognitive Disabilities
-
Simplified, grouped feedback
-
Consistent tone & layout
-
Clear implementation guidance
Hearing impairments
-
Visual alerts with icons
-
Text for audio cues
-
Color + symbol status indicators
Design System Standards Audit
Reviewed how leading design systems handle feedback messaging:
-
Material Design: Friendly, concise tone; uses consistent color/iconography across inline, modal, and toast messages.
-
Atlassian: Professional, calm tone; focuses on accessibility and clarity via inline, banner, and modal placements.
-
Apple HIG: Clear, minimal tone; prioritizes simplicity and system consistency in inline and alert dialog messages.
-
Pioneer: Accessible, clear tone; accessibility-first approach using inline, toast, and modal formats.
Question: What tone is best suited for our UX feedback messages?
-
Grammarly: Strong in grammar and tone correction, but lacks UX-focused microcopy.
-
Writer.com: Brand-aligned AI copy tool with style guides, but limited UI feedback context.
-
Frontitude AI: Early-stage tool offering microcopy and tone suggestions.
Identified Gap: No dominant AI tool currently specializes in generating UX feedback messages with proper container/UI context and accessibility guidance.
📋 LLM Input/Output Specification
LLM Input/Output Specification
-
Text field input describing scenario (e.g., “User left required field empty”)
-
Optional tags: feedback type, tone, urgency
Output:
-
Primary message text
-
Feedback type (error, success, info, warning)
-
UI container recommendation (toast, banner, modal)
-
Icon suggestion
-
Accessibility notes (color contrast, ARIA labels)
Users with Cognitive Disabilities
-
Simplified, grouped feedback
-
Consistent tone & layout
-
Clear implementation guidance
Prompt Engineering Sample
vbnet
CopyEdit
Scenario: User tried to submit a form without a required field
Response needed: Error message, toast notification, error icon
Tone: Friendly but clear
Accessibility: Ensure color contrast meets WCAG AA, include screen reader labels
💬 Conversational Feedback Input, Chat with the Assist Bot
For users who prefer an interactive experience, the Assist Bot provides a conversational UI to submit questions about feedback types, tone, and accessibility.
This natural language approach guides users step-by-step, making feedback creation easy and intuitive.
For those who like straightforward forms, this interface offers targeted questions to collect detailed feedback information.
It ensures users provide consistent, complete data, mirroring the Assist Bot’s guidance but in a familiar, form-based layout.
Users who prefer working offline or with their own formats can upload documents containing their feedback questions.
This interface includes clear, step-by-step instructions to help users prepare and submit files that the system can process accurately.
🎯 Outcome: Significant Progress, Abrupt Ending
Key Outcomes & Results
-
Simplified the creation of accessible feedback via an AI-powered generator
-
Enabled faster, more consistent implementation of messaging across teams
-
Designed scalable patterns that supported WCAG compliance
-
Project was discontinued due to Broadcom’s acquisition of VMware and the dissolution of the Accessibility team
What I Learned
-
Designing with accessibility in mind benefits everyone, not just people with disabilities
-
A well-crafted system reduces guesswork and manual overhead for designers and engineers
-
Multiple input methods (chat, form, file upload) are crucial for inclusive experiences
-
Organizational shifts can end valuable work, impact and documentation matter even more when work is cut short
🌟 Envisioning the Future: Expanding Accessible Feedback Patterns into Smarter, Scalable, and Integrated Design and Development Workflows
Broader Integration Across Tools:
Extend the feedback generator into code repositories, design systems, and documentation hubs for real-time guidance.
Smart Feedback Detection:
Leverage AI to identify and flag inaccessible or inconsistent messages during design and development.
Automated Auditing:
Build tools to scan products for feedback message issues, tone, structure, placement, flagging WCAG violations automatically.
Team Enablement:
Provide in-tool tips, onboarding flows, and learning modules to help teams apply accessible feedback patterns with confidence.
Cross-Platform Consistency:
Ensure feedback guidance works across form factors—from mobile to desktop—without sacrificing usability.
Inclusive by Default:
Make accessibility the starting point, not an afterthought, by embedding these practices into every part of the design and dev lifecycle.
📢 Want to learn more?
Let’s set up a time to chat, reach out via one of the links in the footer below.