ROLE
-
Defined strategy and vision for an accessibility‑first editor with the PM.
-
Introduced an accessibility-focused design system.
-
Designed key features: real-time contrast checker, AI alt text generator, and guided accessibility checklist.
TEAM
-
1 Product Manager
-
1 Product Designer (me)
-
1 Engineering Manager
-
3 Senior Engineers (during the early stages)
-
1 QA
PROBLEM
For many of our users, especially in government, education, and enterprise, accessibility isn't optional. These teams must produce accessible documents at scale but often lack the technical expertise required. They're stuck with complex remediation tools like Adobe Acrobat Pro and CommonLook PDF Validator, creating frustration, inefficiency, and budget constraints.
“At Venngage, our mission is to empower everyone to communicate their ideas effectively through visual content.”
Working closely with PMs and engineers, we rebuilt the product with accessibility at its core—baking it into both the user journey and technical implementation.
I redesigned our editor from the ground up: rebuilt the design system, designed new accessibility features, and rethought key user flows with inclusion in mind. This effort earned VPAT certification and significantly strengthened our credibility among business users.
Personas
In collaboration with the PM, we conducted 15 discovery interviews across compliance-driven industries and identified three key personas:
-
Darron Mitchell: Business-First Executive
-
Catherine Johnson: Institutional Admin
-
Zeo Anderson: Screen Reader User
Primary Focus: Catherine Johnson
Catherine is an administrator at a public university responsible for ensuring over 100 student-facing documents meet legal accessibility standards each semester. She lacks the time to train every designer or manually audit documents, making compliance a complex and overwhelming challenge.
Catherine became the anchor persona for this project.
Darron Mitchell
The Business-First Executive
ROLE
Operations Director at a multinational corporation
GOALS
Improve team productivity, ensure profitability, and mitigate legal risks.
CHALLENGES
Struggles to balance accessibility with budget constraints and business priorities.
Catherine Johnson
The Accessibility Advocate
ROLE
University Administrator focused on inclusivity
GOALS
Ensure 508 compliance in university materials and advocate for better accessibility policies
CHALLENGES
Faces difficulty implementing accessibility due to limited institutional support, complex guidelines, and resource constraints.
Zeo Anderson
The Screen Reader User
ROLE
Accessibility Specialist at a government agency, relies on screen readers.
GOALS
Access and create digital content easily, perform tasks efficiently, and advocate for better accessibility.
CHALLENGES
Struggles with poorly structured documents and inaccessible PDFs, causing delays and frustration in completing tasks.
How might we...
empower users to create accessible designs seamlessly, without added complexity or technical barriers.
User Objective
Help users create accessible documents smoothly during the design process, not as a separate, burdensome step.
Business Objective
Increase engagement, attract compliance-driven industries, and position Venngage as a leader in inclusive communication.
Success Metrics
-
Acknowledgment of compliance with Section 508
-
Increase engagement and adoption
design Strategy
Our strategy focused on supporting Catherine throughout the entire content creation journey, embedding accessibility from the ground up, guiding her in the moment, and giving her confidence at the end:
-
Accessible at its core: Build accessible foundations into every component.
-
Guidance during creation: Provide real-time support during creation.
-
Final accessibility review: Offer peace of mind before publishing.
Accessible at Its Core
Building an Accessible Design System
To embed accessibility into the product’s core, I took the ownership to rebuild our design system to meet WCAG 2.1 AA standards (Web Content Accessibility Guidelines). This effort redefined our product’s visual language, increased design velocity, and streamlined handoffs.
New system includes:
-
Contrast-compliant color palettes
-
Legible typography, accessible iconography
-
Keyboard-navigable and accessible components
-
Guidelines for inclusive writing and component usage
I partnered closely with engineers to ensure proper implementation, adding ARIA labels (accessibility tags), intuitive tab navigation, and full screen reader support. These improvements enhanced usability for all users and made the editor fully accessible for people like Zeo, who rely on assistive technologies.
Themes: Palettes, Iconography, Typography
Components
.webp)
Buttons and focus state
Standardized buttons with focus indicators for keyboard navigation.
Left menu
Contains and manages all widgets for easy access.
Popup menu
Floating panel offering quick access to controls, without cluttering the UI.
In-context menu
Quick-access menu showing relevant actions while working on canvas.
Tooltip/ Toggle tip
Offers tips and guidance to improve user understanding and experience.
Snackbar
Short feedback messages that communicate system processes clearly.
Modernizing the Interface
Building on this foundation, I redesigned the editor interface with a cleaner UI and stronger visual hierarchy. I ensured consistent styling and full WCAG Level AA compliance, making it more intuitive for all users, including those with low vision or motor impairments.
Before
-
General and editing controls were cramped into a narrow section.
-
Inconsistent button styles made the UI feel cluttered and unpolished.
After
-
Clear separation between navbar (for document settings) and toolbar (for design tools)
-
Context toolbar improves speed and discoverability of options
Before
The narrow sidebar menu made browsing and searching for assets challenging.
After
Larger sidebar menu with thumbnails for better browsing and searching experience.
Guidance
During Creation
Instead of treating accessibility as a final step, I designed tools within the editor to guide users throughout the creation process. The goal was to help users like Catherine make accessible design decisions without specialized knowledge or relying on external tools.
-
During creation: In-context support, such as color contrast checker and AI alt text generator, was surfaced to encourage accessible choices as users designed.
-
After creation: An end-of-flow Accessibility Checker scanned the document for compliance issues and provided actionable steps to resolve them.
.webp)
Spotlight 1:
Real-Time Color Contrast Checker
Catherine often struggled to determine whether her color combinations met accessibility standards. She had to use third-party contrast checkers—adding extra steps to her workflow.
I integrated a real-time WCAG 2.1 AA contrast checker directly into the color picker. It automatically evaluates selected colors, warns users when combinations fail, and suggests accessible alternatives.
Wireframing & Exploration
I explored multiple ways to surface contrast information effectively:
-
Real-time contrast preview with WCAG AA levels and contrast ratios
-
Visual contrast borders to improve affordance
-
Highlighting the accessible color range within the picker UI
-
Quick access to a visual simulator for perspective switching
Usability Testing
To validate the designs, I conducted moderated and unmoderated testing with 8 users. Feedback showed that the original menu felt overly technical—most users didn’t need real-time previews or color range highlights. I redesigned the UI to reduce cognitive load by showing essential guidance in plain language, while keeping advanced contrast details available for power users.
Before
-
The expanded color menu was long led to information overload.
-
Advanced users appreciated detailed contrast data, but most users skipped it.
After
-
Replaced technical labels with intuitive messages: “Low contrast,” “Good contrast,” “High contrast”
-
Kept advanced contrast details hidden but accessible on demand
Spotlight 2:
AI Alt Text Generator
Catherine often struggled to write meaningful alt text because she didn’t know where to start.
To simplify this process and reduce friction, I designed an AI-powered alt text generator that assists users directly within the editor.
Key Features:
-
AI alt text generation tool that can create descriptions with a single click.
-
Alt text tag visible on the canvas, clearly indicating which images need descriptions.
-
In-context modal that helps users reference the visual while writing.
FInal Accessibility check
Catherine needed a final review to confidently ensure her document was compliant before publishing. Previously, users relied on separate, often complex external tools like Adobe Acrobat, which had a steep learning curve and disrupted their workflow.
Working with the senior designer, we designed an all-in-one accessibility checker that informs, guides, and educates users throughout the review process. It includes automated audits with actionable fixes–each linked directly to the feature–and a full accessibility report to give users confidence before publishing.
Focus on Clarity and Guidance
The initial version didn’t perform well. While functional, users felt overwhelmed due to dense technical jargon and a cluttered list of alerts without prioritization. In the second version, I improved clarity and reduced cognitive load by reorganizing the workflow into three clear sections:
-
Fix automatically detected issues
-
Complete manual accessibility checks
-
Confirm document-level settings
I also replaced technical terms with plain language. In follow-up testing, these changes led to a 17% increase in successful completion rates and reduced user confusion significantly.
IMPACT
Achieved WCAG AA Compliance
Achieved full WCAG AA compliance and earned a VPAT, strengthened our reputation and built trust with key industries like education, healthcare, and nonprofits.
See Compliance Report: Venngage VPAT (2024)
Increased engagement with accessibility tools
-
15% of users interacted with accessibility features in their first session
-
20% created accessible designs after signing up.
Generated Accessibility Leads
Generated 50+ accessibility-focused leads within three months, positioning accessibility as a key differentiator. Accessibility wasn’t just a feature—it became a competitive advantage!
Learnings
Learnings
Design with Accessibility in Mind
Accessibility isn’t just a checklist—it’s a mindset. This project taught me to embed it from the start, making accessibility a core principle to create inclusive experiences for everyone.
Co-creating with Users
Talking with users like Catherine gave me insight into their real-world workflows and pain points. Experiencing the product with a screen reader helped me close the gap between best practices and practical, intuitive design.
Take Ownership and Continuously Learning
Redesigning the editor surfaced deeper design system challenges. I took the lead on rebuilding our design system to support accessibility by default—streamlining workflows, improving collaboration, and sharpening my Figma and systems thinking skills.