14 Min Read
Employment Transformation Collective (ETC), a trailblazing nonprofit in Seattle, helps companies transform workplaces to be inclusive and accessible for individuals with disabilities.
As part of the nonprofit Northwest Center, ETC was struggling to establish a brand identity and digital presence.
Passionate about fulfilling its mission and eager to grow its impact and online visibility, ETC turned to DBS Interactive’s equally passionate team to plan, design, and develop the nonprofit's website.
Defining the Destination
Any great organization with a compelling story and brand flounders when it cannot effectively broadcast its story, message, and services. ETC was no exception.
The organization needed a high-performance website to amplify its mission. The new website, developed by DBS Interactive, needed to achieve three primary goals for ETC to succeed:
1. Increase Website Traffic Organically
More website traffic meant greater opportunities for ETC to reach and engage businesses and individuals. Optimizing the site for search engines and AI platforms like ChatGPT would boost organic visibility and the inbound flow of visitors from search results.
2. Improve Conversion Rates for Service Inquiries
The ETC website had to do more than drive more traffic; the site needed to convert visitors into service inquiries. A user-centric design with intuitive navigation, engaging content, and clear calls to action had to guide users toward the next step.
3. Enhance Brand Awareness and Perception
The website needed to elevate the organization's credibility with expert information and its importance.
DBS Interactive's strategic approach comes into play, involving collaborative planning and identifying primary audiences, user stories, user flows, and information architecture to ensure ETC's vision becomes a reality.
Defining the Digital Brand
Our branding workshop laid the groundwork for the ETC website's design and content direction.
ETC already had a solid brand foundation, but our design ideation focused on refining and solidifying the brand's personality. This workshop explored key questions: Should the brand feel bold or subtle? Powerful or humble? Playful or serious?
Through a series of exercises and discussions, we shaped an online brand identity that positioned ETC as a wise and approachable partner—relatable, mission-driven, and down-to-earth.
Navigating Challenges for a Flexible Future 
Building a website that meets the highest standards of accessibility and long-term performance requires a deep understanding of both technical requirements and user needs.
Every decision, from strategy and planning to design and development, must account for inclusivity, scalability, and compliance with evolving best practices.
We set aside time for early discussion to identify and address challenges and set a clear roadmap.
Assessing accessibility and scalability needs upfront helps define the scope, set expectations, and anticipate complexities to ensure a highly accessible, adaptable website.
AAA Compliant Website Accessibility
Going into the project, the biggest challenge—and ETC's overarching mandate—was to develop and design the site with the highest standards of accessibility, specifically adhering to WCAG 2.1 AAA compliance.
In fact, ETC discovered DBS because of our commitment to accessibility and experience developing websites compliant with WCAG 2.1 requirements.
The goal was clear: ensure that nobody was left outside.
Just as automatic doors allow everyone to enter a building without barriers, the website needed to provide seamless access for all users, regardless of their abilities. This monumental task required careful attention to detail and a commitment to inclusivity, ensuring that the site would be welcoming, navigable, and fully accessible to everyone who came across it.
Delivering this highest level of accessibility compliance weighed on every decision during the strategy and planning process through design and development.
Future-Proofing
Beyond achieving WCAG 2.1 AAA compliance, another challenge was ensuring the website remained adaptable and scalable for the future.
The website needed a flexible structure built on development best practices. It would also need ongoing content updates, performance optimizations, and seamless integrations with other marketing efforts, such as email, social media, and PR campaigns.
Regular updates and proactive management would be necessary to sustain performance, ensuring the site remains adaptable and meets the highest accessibility standards for years to come.
Build Once. Adapt Always. Ready?
Comparing WCAG 2.1 AA and WCAG 2.1 AAA
Web accessibility compliance, as defined by the Web Content Accessibility Guidelines (WCAG) from the international World Wide Web Consortium (W3C), establishes criteria to ensure websites are usable by people of all abilities.
The guidelines are structured into three levels—A, AA, and AAA—each representing an increasing level of accessibility. While AA compliance is the standard for most websites, reaching AAA requires significantly more effort in content creation, design, and development.
Building a WCAG 2.1 AA-compliant website is already a rigorous process, ensuring accessibility for users with visual, auditory, motor, and cognitive impairments.
However, achieving WCAG 2.1 AAA compliance demands even greater attention to detail and additional enhancements.
The table highlights key differences between WCAG 2.1 AA and WCAG 2.1 AAA.
Accessibility Comparison
Criteria | WCAG 2.1 AA | WCAG 2.1 AAA | Description |
|---|---|---|---|
| Color Contrast | Minimum 4.5:1 for normal text | Minimum 7:1 for normal text | Ensures text is readable against its background, aiding users with visual impairments. |
| Text Alternatives | Required for non-text content | Enhanced alternatives (e.g., sign language) | Provides alternatives for non-text content, making it accessible to users with visual impairments. |
| Navigation | Keyboard navigable | Enhanced keyboard navigation | Ensures users can navigate the website using a keyboard, aiding those with motor impairments. |
| Timing | Timing is allowed | Timing is not essential | Reduces the need for timed responses, benefiting users with cognitive or motor impairments. |
| Help | Basic help available | Context-sensitive help available | Offers assistance to users, making it easier to understand and use the website. |
| Level of Compliance | Reasonable accessibility for most users | Optimal accessibility for maximum users | Indicates the extent to which the website meets accessibility standards. |
| Multimedia Alternatives | Captioning for live audio content not required | Captioning for live audio content required | Ensures multimedia content is accessible to users with hearing impairments. |
| Content Reflow | Must be usable at 200% zoom | Must reflow at 400% zoom | Ensures content remains usable at higher zoom levels, aiding users with low vision. |
| Reading Level | No requirement | Readable for users with lower secondary education level | Ensures content is easily understandable by a wider audience. |
Strategy Set the Stage
The strategy was the stage where the hard work began to make ETC's ambitious goals a reality.
A thoroughly researched and defined strategy ensured that every element of the website would meet the needs of the organization and audience to achieve desired outcomes.
Notice how each part of the strategy phase of the website project builds on the previous one and why it is crucial.
Personas
The first step in the strategy was identifying key user personas, the essence of communication, much like great speakers tailor their message to the audience in front of them. By understanding these personas, audience goals, motivations, and pain points or frustrations, the website design and content could meet users' unique needs.
The personas shaped the user stories and user flows that followed.
ETC Website Personas
Susan: An HR Manager
Angela: An advocate for accessibility
Steve: An employee with a disability
Elise: An internal communications or website manager
Website User Stories
Personas paint a broad picture of the stakeholders, but user stories take each persona’s needs, motivations, and challenges and translate them into concrete steps, ensuring a user-centric website design.
Sample User Stories for ETC Personas
- Susan (HR Manager): As an HR Manager, I need to quickly find tools that align with our recruitment goals and foster a supportive work environment, so I can streamline our hiring process and improve employee retention. This informs the user journey by ensuring HR-related resources are easily accessible and tailored to attract top talent while promoting inclusivity.
-
Angela (Accessibility Advocate): As someone who advocates for accessibility, I need authoritative information that helps me address issues in the community.
This supports the goal of showcasing the ETC team's expertise by providing clear, credible content that empowers Angela to drive change and advocacy in her community, while also positioning the organization as a trusted leader in accessibility. - Steve (Developer with Disability): As a developer with a workplace disability, I need the website to be adaptive and user-friendly, providing intuitive tools that I can use without barriers. This influences the design to ensure compatibility with assistive technologies, ensuring Steve can interact with the site effectively and independently.
- Elise (Communications Manager): As a communications manager, I need the website’s CMS to be user-friendly, so I can easily manage content and internal communications, giving me more time to focus on higher-level strategy. This addresses the need for the CMS to feature the right tools and functionality so Elise can manage content efficiently.
These stories guided the user journeys, outlined in the user flow maps, and helped define appropriate messaging and calls to action that would resonate with at every step of their website experience.
Building the Backbone to Support SEO, AEO, and Engagement
We focused on simplicity to support accessibility. The sitemap would support usability and findability in search engines and AI Large Language Model (LLM) platforms like Copilot, Perplexity, and ChatGPT.
Accessibility isn’t just about compliance. It’s about optimizing navigation for all users, which in turn strengthens SEO. Search engines prioritize websites that provide intuitive, user-friendly experiences, using accessibility and usability as ranking signals.
Primary Navigation: Simplicity and Clarity
The primary navigation consolidates options to avoid overwhelming visitors, guiding users through a logical journey. Designed based on persona insights and data gathered in the strategy phase, this navigation structure prioritizes essential content while aligning with natural reading patterns—left to right for most users.
Secondary Navigation: Supporting Quick Access
Secondary provides links for quick access to important sections
Website User Flows
We synthesized insights from the personas and user stories to create user flows defining intuitive navigation paths, ensuring a smooth and engaging website experience.
The user flows also prioritized the relevant topics for each persona to create the information hierarchy for each page.
Mapping these created intentional, efficient journeys for each persona, enhancing the overall user experience while maintaining an intuitive structure for all visitors.
Turning Concepts into Experiences
The strategy phase supported the design and aesthetic of wireframes and mockups. Every decision, from personas to user flows and the brand, established the foundation for the site's design.
Landing Page Wireframes
Insights gathered during the strategy phase informed the construction of the wireframes, which address the most user needs and support intuitive user journeys.
The user stories, which outlined each persona's goals and pain points, also influenced the design of the wireframes. Each section and page of the website was prioritized to align with the personas’ unique needs.
Finally, the information from the user flows informed the wireframe designs, ensuring each page addressed user persona needs while maintaining a logical, intuitive layout.
Sections and pages feature custom elements that offer design flexibility, making it faster for site managers to publish new content or update existing content.
Website Mockups
We next brought wireframes to life with mockups, just as a storyboard becomes a feature film. This visual model integrates all design elements, typography, messaging, copy, and calls to action.
It was now easy to see how everything would work together. Design details such as color schemes, typography, and layout are refined, bringing the website's overall aesthetic closer to the final product. The website starts to feel real and functional, not just a conceptual plan.
The transition from wireframes to mockups is like the difference between a movie storyboard and a feature film. All of the design elements, typography, messaging, copy, and calls to action come together.
We opted to use illustrations rather than photographs to align with the brand's personality. Illustrations offer a more flexible and customizable way to communicate ideas visually, providing opportunities to emphasize specific concepts in a way that photographs couldn't.
Where the Magic Happens
With a solid strategic foundation in place, we transitioned into the development phase, where ideas took shape, and accessibility became a tangible reality.
Before development began, DBS presented the client with two CMS platform options: WordPress and Craft. While Craft offered a more accessible back-end, WordPress ultimately became the platform of choice. The ETC team was already familiar with WordPress, and its parent organization also used the platform, ensuring an efficient content management process for the staff.
Accessibility-First Design
Ensuring WCAG 2.1 AAA compliance took center stage during the development of the ETC website.
Beyond meeting accessibility standards to support users with visual challenges, the site’s design delivers an optimal experience for everyone.
To enhance readability, we implemented a high-contrast mode that allows users to toggle to an even more accessible color scheme.
When activated, this mode immediately adjusts background colors for improved legibility.
Sections with darker backgrounds become a much darker purple, while lighter sections turn white, maintaining clear contrast and ensuring text remains easy to read. This method guarantees that users needing high contrast for visibility can browse content effortlessly.
From a technical perspective, this functionality uses JavaScript to toggle a class on the <body> element when the high-contrast button is clicked. CSS then applies targeted styling adjustments, modifying background colors while preserving the integrity of the design.
Under the Hood: Accessible Development and Implementation
Building a high-performing, accessible website required more than just the right platform. It demanded a development approach rooted in best practices.
The ETC website was engineered for usability and performance, ensuring intuitive navigation, fast load times, and compliance with WCAG 2.1 AAA standards.
Custom WordPress templates were designed to maintain structured, accessible content while optimizing for page speed, an essential factor for both user experience and SEO success.
From clean, efficient code to strategic caching and image optimization, every element delivers a smooth, high-speed experience for all users.
Development Highlights
- CMS - WordPress matched the platform of the parent Northwest Center.
- WCAG 2.1 AAA Compliance – Every design and development decision aligns with strict accessibility guidelines to remove barriers for users with disabilities.
- Custom WordPress Implementation – Tailored templates and layouts offer site managers options for quickly adding new content while ensuring structure and accessibility.
- Forms – Carefully crafted content and accessible form design support usability and engagement.
- Third-Party Integrations – The site integrates with ETC’s CRM systems, AP Services API, and analytics to support operational needs while maintaining accessibility.
Anticipating What's Next
Designing a high-performance website is a significant investment.
We knew the launch was only the beginning. The ETC site needed to be built with longevity in mind.
Future-proofing supports long-term success and maximizes ROI.
This challenge required thoughtful design and development to ensure scalability and adaptability, and avoid retrofitting or rebuilding.
The following considerations outline key elements of future-proofing the ETC website to ensure it remains relevant, high-performing, and compliant over time.
- Scalability and adaptability of the website for future growth.
- Ongoing content production and updates to maintain relevance.
- Driving traffic from other channels (email marketing, social media campaigns, PR campaigns).
- Maintaining performance and compliance through regular updates and maintenance.
Using Data for Action
Tracking and analyzing data is essential to meet accessibility, functionality, and business to achieve success.
Important for this new website, metrics establish the baselines for comparing progress and identifying improvement areas.
Key areas to track include new user acquisition, return visits, traffic and impressions, lead generation, and content engagement. By analyzing user experience, brand visibility, and content performance, this data will inform ongoing optimization and alignment with business objectives.
- Metrics to monitor website performance and digital marketing success.
- Goals for new users, returning users, traffic & impressions, lead generation, and content engagement.
- Specific KPIs to measure user experience, brand elevation, content performance, and lead generation.
- Visibility in organic search results and citations in AI platforms.
Realizing a Vision
The partnership between ETC and DBS produced a visually appealing website that meets high accessibility standards and supports business goals.
Thoughtful design, technical execution, and a focus on inclusivity deliver an accessible, user-friendly experience ready to drive brand visibility and engagement.
It also boosts findability through organic search and AI tools like Copilot, Perplexity, and ChatGPT.
With a flexible, future-ready website, ETC is set up for long-term success and continued growth.
Related Posts
