a mockup of the space themed WCAG 2.2 elearning platform

WCAG 2.2 eLearning

Learning Design | 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 used by 250+ Fortune 500 learners with 86 hands on learning challenges.

Overview

Learners struggled to design, test, and evaluate web applications against WCAG 2.2 guidelines, with traditional training failing to build lasting skill.

I led design and development of a gamified, hands-on learning platform that turned WCAG 2.2 into something learners could actually practice and enjoy, handling brand design, e-learning development, project management, and UI design end to end.

Defining the Learning Objectives

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

  • Explain the importance of web accessibility and summarize the core principles that guide WCAG (Understand)
  • Apply WCAG 2.1 and 2.2 guidelines to web design tasks, and distinguish between compliant and non-compliant implementation examples (Apply / Analyze)
  • Design and execute testing strategies to evaluate WCAG 2.1 and 2.2 compliance (Apply / Evaluate)
  • Diagnose common accessibility issues and develop a plan for ongoing accessibility review and maintenance (Analyze / Create)

Establishing the Brand

Faced with overwhelming, jargon-heavy accessibility content, we spent 12 weeks chunking the material, testing logo concepts with real users, and building a welcoming, space-themed learning experience learners could actually navigate.

a pen and paper storyboard of a learner worrying about accessibility guidelines

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

I led a team of 3 junior designers to create 86 hands-on learning challenges for learners to practice their skills. I created a Figma file with all the learning challenges and design components, allowing my team to work independently while I provided feedback and guidance.

screenshot of a Figma file with all operable learning challenges inside

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.

homepage hi-fi mockupprofile hi-fi mockup
operable page hi-fi mockupsolar system 2.2 page hi-fi mockup
understandable page hi-fi mockupexplore planet 2.2.2 hi-fi mockup

My Work

Figma web mockup showing week 2 vector drawing
REALChem II
Learning Design & Dev
REALChem II
Figma web mockup showing week 2 vector drawing
Company Website
UX | Illustration | Animation
Website case study