A11Y Universe mobile and web mockups

A11Y Universe

Length: 14 months

Brief: Create a comprehensive learning experience that helps designers, developers, and testers at Bank of America understand and apply the WCAG 2.2 accessibility guidelines.

Solution: A gamified learning experience and an informative website that engages and educates learners about web accessibility, assistive technology, and WCAG 2.2.

The Result

  • 86 accessibility focused E-learning challenges
  • A fully responsive educational website
  • 250+ engaged designers, developers, and testers

My Role

  • Brand design
  • Content design
  • E-learning design and development
  • Project management
  • Visual design
  • UX

Tools

Adobe Illustrator logo
Articulate Storyline 360 icon
Figma logo
Microsoft Teams logo
Visual Studio Code Logo

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 and design visuals to approach a complex and overwhelming topic

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.

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 learn about an essential topic.

mind map showing all the components of one galaxy of the A11Y Universe
Developing the micro-learning challenges to engage learners and provide more visuals

This is a sample of one of the 86 lessons created in Articulate Storyline 360. This is what learners experienced once they reached the "Explore" page of each guideline.

sample of a micro elearning challengeTry the demo
Building the website

My team knew this project would be content heavy. We created an admin panel to easily build out the bulk of the content. Our developers used HMTL and CSS to create the structure then built an incredible admin panel which allow me to build the content out for all 4 galaxies, 13 solar systems, and 86 planets.