A11Y Universe

Problems

Learners struggled to design, test, and evaluate web applications to meet WCAG 2.2 guidelines.

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.

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

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

screenshot of a Figma file with all operable learning challenges inside

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.