WCAG 2.2 eLearning

Learning Deign | Web Design

I designed a gamified web accessibility learning platform for designers, developers, and testers, making WCAG 2.2 guidelines easier to understand and apply.

This resulted in training of 250+ Fortune 500 learners with 86 hands on learning challenges.

Problems

Learners needed to understand and apply WCAG 2.2 Accessibility Guidelines in a clear, structured way to differentiate between passing and failing components and applications.

Users has varying levels of understanding of inclusive design and required an asynchronous way to learn and improve their knoweledge and skillset.

Solutions

Design and develop a practical, hands-on learning platform to give learners a fun way to improve their understanding of the WCAG 2.2 guidelines.

Methods

Backwards Design, Surveys, Usability Testing

Tools

Articulate Storyline 360, Figma, Adobe Illustrator, Teams, Visual Studio Code

My Role

Lead Designer (Brand Design, E-learning Design and Development, Project Management, UI Design)

My Process

Not interested in reading? Listen to the my process as you explore the visuals for each step!

Defining the learning objectives

By the end of this course learners should be able to...

  • Understand the importance of web accessibility and the principles that guide the WCAG.
  • Apply WCAG 2.1 and 2.2 guidelines in web design, recognizing good and bad examples of implementation.
  • Develop and execute testing strategies to ensure WCAG 2.1 and 2.2 compliance.
  • Troubleshoot common accessibility issues and maintain ongoing accessibility reviews and updates.

Establishing the brand

Let's face it, there is a lot of information online that talks about web accessibility. Our learners found it difficult to understand the technical jargon without any visuals and expressed feeling overwhelmed by the amount of content available.

We started by focusing on organizing the data into more manageable chunks. We created various logo concepts, tested with users, and worked tirelessly for over 12 weeks to establish the logo and space themed concept for this learning experience to create a welcoming environment for our learners.

Designing the logo

5 second tests guided our decisions

  • 67% were confused by the "ones in the name"
  • 100% remembered the four colorful dots
  • 100% mentioned space
  • 60% thought the company was about helping others

The final logo

Simplifying the WCAG 2.2 guidelines

Simplifying and breaking this complex topic into galaxies, solar systems, universes, and planets allowed our users to visualize the complexity without feeling overwhelmed by the large amount of information. This clean design created a sense of calmness for our learners to comprehend an important topic.

Leading a team of 3 junior designers to create 86 interfaces

This is a sample of one of the 86 lessons created in Articulate Storyline 360.

Learners experienced a micro-learning challenge once they reached the "Explore" page of each guideline.

Try the demo

Collaborating with developers

My team knew this project would be content heavy. I collaborated with our development team to design template pages and create an a admin panel. This allowed me to build the content out for all 4 galaxies, 13 solar systems, and 86 planets with ease.