Making the Mark: Assess Your Access
A Reusable Learning Object
Target Audience: Nonprofit development and communication professionals (e.g., visual communication coordinators)
Terminal Objective: Identify and define the Web Accessibility Initiative’s (WAI) perceivable Web Content Accessibility Guidelines (WCAG) and corresponding success criteria.
Responsibilities: Instructional design, e-learning design and development
Tools Used: Mindmeister, Microsoft Office, Adobe Illustrator, Adobe Photoshop, Adobe XD, Vyond, Adobe Audition, LOVO AI voiceover, Amara subtitle editor, Articulate Storyline
Development Time: 10 weeks
Project Overview • ID Approach • Process
Course Design Document • Storyboard • User Experience Test
Project Overview
“Assess Your Access” provides learners with opportunities to practice identifying and applying perceivable web content accessibility guidelines as defined by the World Wide Web Consortium (W3C)’s Web Accessibility Initiative through an immersive and challenging scenario-based learning experience. This RLO immediately plants learners into the role of a nonprofit visual communications coordinator tasked with improving a nonprofit’s website. While links to WAI’s Web Content Accessibility Guidelines (WCAG) overview and a comprehensive job aid with examples are available to guide new and/or struggling learners, learners are expected to apply their prior knowledge from past training modules. Learners complete four tasks on perceivable web accessibility guidelines for text, video, audio, color, and more. Tasks include interacting with a mock-up nonprofit’s website to detect and identify inaccessibility issues. Learners receive automatic formative feedback on each task through simulated email messages from their supervisor, unlimited attempts, examples of these web pages once issues are fixed, and summative feedback on their overall score. The core target audience possesses above-average technical knowledge and intermediate graphic design and web design knowledge.
ID Approach
Scenario-Based and Experiential Learning
This training is informed by experiential learning theory, scenario-based learning instructional learning strategies from Scenario-based E-Learning: Evidence-Based Guidelines for Online Workforce Learning by Richard Mayer and Ruth Clark, and insights from leading instructional designer Cathy Moore. Experiential learning theory encourages learners to expand their knowledge through direct experience while a core facet of scenario-based learning includes providing little training or guidance at the beginning of the course. Instead, learners absorb and retain knowledge by direct practice and trial-and-error. In short, learners learn by doing. By using a plausible real-life scenario and imparting automatic feedback from a mentor-like figure, this course demonstrates the real-world effects of accessibility and offers learners a more personalized learning experience. On her page “Where’s the research support for scenarios?,” Cathy Moore quotes several research studies from cognitive scientist Peter Brown’s Make it Stick to show the benefits of scenario-based learning.
“It’s not the failure that’s desirable, it’s the dauntless effort despite the risks, the discovery of what works and what doesn’t that sometimes only failure can reveal. It’s trusting that trying to solve a puzzle serves us better than being spoon-fed the solution, even if we fall short in our first attempts at an answer.” (Brown, 2014, p. 94)
This training provides learners with examples of what web accessibility actually entails and strategies for conforming to WAI’s guidelines. The target audience learns how to both recognize and resolve inaccessible web content. Given differentiated learning structures and learners’ varying motivations, this training also offers learners optional resources, instructions, and hints to help them succeed. Understanding my target audience on an acute level ensured that my content remains relevant and well-aligned.
Chunking and Cognitive Load
At first glance, WAI’s Web Content Accessibility Guidelines Overview and Quick Reference can seem exhausting and overwhelming to new web designers. My RLO eases the learning process by chunking the information and assessment into four tasks presented through a simulated email inbox. By categorizing accessibility guidelines and limiting the amount of information on each screen, I hope to reduce cognitive load and help learners better integrate their new skills into their long-term memories.
Mayer’s Multimedia Principles and Universal Design
Mayer’s Multimedia principles were instrumental in sketching out the visual design and outline of this training to present a professional, engaging, and cohesive learning experience. Following the contiguity principle, I used the rule of thirds and complementary colors to carve out easily identifiable relationships between graphics and text. Adhering to the multimedia principle, I also provided many visual representations of key concepts. Given my course centers on accessibility, it was key that my course itself also followed perceivable web accessibility guidelines. I went through several rounds of visual design mock-ups to meet WAI’s recommended color contrast ratios and avoided using drag-and-drop interactions, instead opting for tabbable dropdown menus.
Process
Analysis (Action Mapping)
I first analyzed the core target audience as well as the instructional need. In addition to researching the nonprofit sector and common graphic design errors, I interviewed former and current graphic designers in the nonprofit sector and surveyed the websites and print materials of several healthcare-related nonprofits that currently employed communications staff. Understanding the overall instructional goal ensured the course would lead to measurable results that were also relevant to the learners’ goals and motivations. I then organized results from the goal analysis into terminal and enabling objectives. Following the action-mapping method, I also developed and organized the topic analysis into a mind map on Mindmeister to better visualize how to reach and measure these goals. You can read about the full analysis, which includes a target learner profile, here.
Design
Preparation began with a course design document (CDD), which helped me flesh out my workflow, estimate the time of completion, and outline the RLO. With alignment in mind, I designed the assessment first and delineated what key instructional strategies and learning theories would inform the overall course structure. I mapped out the RLO working backward from each task with my CDD and mind map serving as my key guides.
You can read my full CDD here.
Development
Storyboard
The project started with a text-based storyboard along with rough visual mock-ups of the design and color palette. During the development process, the storyboard was revised to fit screen layouts and to be as clear and accurate as possible. I also developed the branding of the mock-up company, Flyaway Clinic as well as the persona of supervisor Carrie Rodriguez and the user’s role as a communications coordinator. One challenge included writing Carrie’s emails to read as both personable and realistic but also clear and instructive.
View the full storyboard here.
Adobe XD Prototype
I then created a working prototype of the RLO in Adobe XD. I designed everything from the mock-up Flyaway Clinic logo to the simulated email inbox screen. The skewed complementary colors of orange and blue served as visual cues for the learners to differentiate their learning experience from the Flyaway Clinic visual assets. Using the same typography and design hierarchy ensured both of these elements still remained cohesive. By sorting out design issues In XD, I mitigated potential issues, improved workflow, and gained stakeholder buy-in before I programmed the actual training.
SCORM & Articulate Storyline
The final step of development included programming the course through Articulate Storyline. Given the mock-up design, I had to create and customize the Storyline file from the ground up rather than using any of the premade templates and default buttons. The RLO also needed to be SCORM-compliant to work with and send data to a SCORM-compliant LMS. In order to meet this constraint, I created advanced trigger functions to trace the learner’s actions and task attempts. To create the mock-up email inbox and interactive mock-up webpages, I also used multiple slide layers, object states, and additional variables. Initial results from my usability test also helped me hone the wordings of my task hints and design the job aid, which was the very last piece of the RLO to be designed. The final result both reflected the original design and recorded the learner’s journey of completing each task.
Implementation
End Result
Users marveled at this RLO’s unique framework and problem-solving strategies as well as the overall visual design of the course. This course also shows how scenario-based learning can be applied in highly creative and technical learning experiences. And as with any learning experience, there are still always improvements to be made. Continued user-testing and following Kirkpatrick’s model to evaluate the business-oriented results of the training will ensure this training fulfills the instructional need.
Evaluation
User Experience Testing
I designed a usability test to gather feedback and evaluate the results from the training as it was being developed and after it was implemented. I used open-ended questions to analyze users’ overall impressions along with scales and multiple-choice questions to gather more quantifiable results. The feedback was instrumental in fixing several bugs that looped the learner back to previous slides and reset results. I also revised several questions and hints to be clearer. These improvements were especially helpful for guiding users on how to interact with the mock-up website.
Read and take my full user experience test here.
Looking back on this project over a year later, I recognize that I could have heavily simplified the exercises. Some of them contained too many tasks and may have confused new learners since they had to approach back-end tasks from a front-end perspective. Ultimately, developing this course as a new ID bolstered my commitment to simplifying and then amplifying projects, especially those with tight timelines and budgets. It also showed me the endless possibilities of Storyline and the importance of integrating accessibility into the design process from the beginning of a new project.