Rene Diaz UX Product DesignerRene Diaz UX Product DesignerRene Diaz UX Product DesignerRene Diaz UX Product Designer
  • Case Studies
    • ULTIMATE EAR TRAINER
    • Delta In-Flight App
    • Teach & Share
    • Positive Grid Bias Pedals
  • More
  • About Me
    • Bio
    • More Designs & Music
  • Contact

Accessibility Design Plugin

    Home Accessibility Design Plugin

    Access

     Mac Access

    Accessibility Design Assistant

    Accessibility Design Assistant

    I am an empathetic UX designer coming from a background in holistic therapy.  It's important to me to implement accessibility for users on all my product designs to make everyone's experience intuitive and delightful.

    Taking on this project was transformative and an eye opener for me. 


    This Case study is still in progress and will be developing over time.

    Target Users


    Product Designers, UX/UI Designers



    Learning Needs and Objectives


    Needs


    Objectives

    Designers sometimes overlook or forget to incorporate accessibility features into their product design because it slips their radar and/or they just haven’t had enough hands-on practice implementing it into their workflow.

    Given a design tool like “Sketch,” create user experiences that mitigate or eliminate obstacles for disabled/impaired populations by adhering to WCAG accessibility standards. 

    The Customer Success team is receiving an inordinate amount of tickets regarding issues of accessibility, measuring consistently at ~20% of total tickets.     An accessibility audit yielded an A, the WCAG lowest rating. 

    Current design practices fail to align with the organization’s mission to “connect the world’s professionals to make them more productive and successful” since there is little to no assurance that all users will have equal access to their product.  

    Foster an ongoing professional learning community among the Design team committed to mindful creation of user experiences that are inclusive of disabled and impaired populations. 


    Learning Solution


    Overview: This learning solution addresses both learning objectives over the course of three months utilizing myriad instructional strategies, including asynchronous modules, actionable feedback, experiential learning, and reciprocal teaching. Designers enter the training through an orientation video that concludes by giving them access to the “accessibility assistant” plugin and an ongoing learning Slack channel. The plugin works with a design tool (e.g., Sketch) by scanning work in progress to diagnose and correct common accessibility issues. As these blind spots are illuminated, they will also receive just-in-time training that leaves designers able to identify and correct common design issues that pose access barriers for disabled/impaired users. At the end of each week, designers will complete a short formative assessment that reports back learning strengths and deficits, connecting them to targeted supplemental instructional learning plans to address requisite remediation needs. 

    In addition to the plugin and modules, designers will participate in a service-learning project designed to cultivate empathy, awareness, and understanding of the disabled/impaired populations for whom they are designing. Designers will spend half-day volunteering at a local organization that serves the needs of a particular disabled/impaired subgroup. After spending time in service, designers will engage in a dialogue (via Slack) scaffolded by prompts that help them both to better understand the subgroup culture and how that understanding informs their work as designers. Success is evaluated through two culminating experiences: a pay-it-forward facilitation wherein participants share their major takeaways with a group and a twenty-question multiple-choice/short answer summative assessment.     


    Prerequisite

    Introduction Video

    Purpose

    Instructional Strategies

    Assessments

    To orient the trainee to the elements of the entire learning solution.

    Asynchronous module, received in an email which provides an overview of the learning experience:

    • Part 1: Describes the purpose and process of the learning journey. 
    • Part 2: Informational videos of five different disabilities/impairments that include medical definition, accessibility obstacles, and typical UX challenges 
    • Ends by connecting designer with: 
      1. Tutorial re: how to add the plugin to the design tool 
      2. Access to Slack channel 

    Confirmation check once the video is viewed, collected by LMS.  


    Learning Journey

    “Accessibility Assistant” Learning Tool 

    Purpose

    Instructional Strategies

    Assessments

    To equip designers with an “accessibility assistant” that helps to identify and correct design issues that may pose barriers to disabled/impaired populations. 

    Description: A tool that guides and educates developers on how to make their digital product/design accessible to all users. Functions by scanning the work produced in a design tool like Sketch for flaws or issues that inhibit access for disabled/impaired populations. 

    • A successful scan highlights problem areas. When the user hovers over the area, it generates a pop-up that names the associated disability, describes why a change is needed and recommends fixes commensurate with WCAG guidelines a la Grammarly. 
      • After completing a JIT module, the tool will also notify the user when they correctly design for accessibility with a brief explication.
    • By utilizing machine learning, the plugin becomes more adept at diagnosing and correcting common design issues in real-time.  
    • Tool tracks and tallies how many times a user needs a prompt to correct an item/issue, how often the same issue is being corrected, and the rate of self-correction over time. 

    Tally of errors collected through the tool.

    Rate of self-correction over time collected through the tool to measure individual areas of strength and any remediation needs.  

    Just-in-Time Modules

    Purpose

    Instructional Strategies

    Assessments

    To provide just-in-time training about how to recognize and resolve design issues that inhibit access for targeted disabilities/impairments.  

    A pop-up window prompted by API appears the first time an issue is encountered. The designer will click to begin the required tutorial.   

    • Part 1: Names and defines disability/impairment (v.o., graphics) 
    • Part 2: Demo of broken vs. fixed UX for that population (screen capture, v.o.)
    • Part 3: Comprehension check - click on WCAG compliant example w/ follow-up explanation (screenshots, buttons)
    • Part 4: Self-assessment of own understanding (graphics, Likert scale)    

    Once finished, the designer may resume work. Anytime the same issue is encountered thereafter, the designer receives a thumbs-up (if WCAG-compliant) or a red outline (if design issues persist). Option to revisit module, if desired.

    Other modules will address common disabilities/impairments, including: 

    • Color blindness
    • Dyslexia
    • Dysgraphia
    • Visual Impairment
    • Hearing Impairment

    The completion of each module will be tracked in LMS.

    A multiple-choice comprehension check at the end of the module (Level 2, formative). 

    Self-evaluation (Level 1) using the Likert scale to report level of understanding.

    Weekly formative assessments to give users a sense of their progress and either extend or remediate as needed. Tests generated using access material and user-created material. 

    Service Learning

    Purpose

    Instructional Strategies

    Assessments

    To build empathy, awareness, and understanding of a target population by engaging in service-learning.  

    Participants volunteer at a local organization that serves/supports the needs of a particular disabled/impaired population for half or a full day.

    • LMS will provide a list of potential organizations. Or, participants may find an organization on their own.  
    • Participants may volunteer when it works best for their schedule within the three-month timeframe. 
    • Participants will be furnished with a list of questions to help frame their experience.
      • For instance, “What are some ways that the life experience of a person with [x disability] differs from that of an able-bodied person? What kinds of considerations, accommodations, and/or contexts must a person with [impairment] consider on a daily basis? In what ways did your experience with [X Organization] help to inform your design practices? ”
    • If possible, conduct interviews/focus groups with disabled/impaired individuals to get a sense of their needs and desires re: digital experiences.

    Trainees will input information about their volunteer service details into LMS which will subsequently track the completion of this requirement. 

    Learning Communities

    Purpose

    Instructional Strategies

    Assessments

    To share major takeaways, best practices, insights, questions, and next steps with designers across the company. 

    Internal community learning “Slack” channel/LMS discussion forum/other social media discussion board in which participants will engage with one another about their experiences. 

    • Prompts to guide thinking will be provided. (e.g., What did you learn about the organization? What did you learn about challenges the community faces? How will you apply what you learned to your job?)
    • Trainees must respond to a minimum of three other contributions in addition to their own. 
    • This channel will be open throughout their learning journey.

    LMS will record after successful completion of this requirement. 

    Evaluation

    Accessibility Design Multiple Choice/Short Answer Test

    Purpose

    Instructional Strategies

    Assessments

    To gauge the extent to which designers have mastered the ability to design experiences accessible to disabled/impaired populations without the assistance of plugin prompts. 

    After approximately three months of on-the-job implementation of the API, designers will complete a multiple-choice summative assessment. It will contain 20 questions. The first five questions will consist of knowledge re: disabilities/impairments covered in the modules. For instance:

    • Name three design elements that would help to support the needs of a user with dysgraphia.
    • Why might it be beneficial to use a variety of sensory characteristics in your design? 

    The final fifteen questions will each contain the following: 

    • 4-6 screenshots of a typical design tool project. 
    • The prompt: “Which of the following screens is WCAG-compliant for individuals with [name disability/impairment]? Select all that apply.”

    Results collected by LMS will allow us to measure individual areas of strength and any remediation needs.

    Pay-It-Forward Reciprocal Teaching 

    Purpose

    Instructional Strategies

    Assessments

    To consolidate how the trainee’s own empathy, awareness, and understanding of a target population guides and informs design practices going forward. 

    Present new understanding to an uninitiated group (i.e., new hire orientation, Sales department, etc.) by facilitating a brown bag luncheon, asynchronous module, classroom, etc. Training will supply:

    • A list of facilitation opportunity slots for which the trainee may sign up
    • Option to propose your own presentation if desired
    • Criteria for a successful facilitation 

    Trainees will sign up for a slot that will be available in the LMS. 

    Success Metrics

    Success Rate

    Item

    ≤ 2% 

    % of tickets received by Customer Success team regarding accessibility issues

    Downward Trend

    Rate of prompts that the API surfaces to track whether or not the designer is becoming more adept at WCAG implementation over time

    ≥ 99%

    % of designers scoring 95% or higher on the three-month summative assessment

    ≥ 95%

    % of designers reporting a 4 or higher on personal comprehension of WCAG principles on a 1-5 Likert scale

    Enter your text here...

    App Information Architecture

    Abstract Information Architecture

    Information Architecture Components

    Organization systems

    We categorized the information by subject or chronology. See Chapter 5.

    Organization systems

    Present the site’s information to us in a variety of ways, such as content categories that pertain to the entire campus (e.g., the top bar and its “Calendar” and “Academics” choices), or to specific audiences (the “I am a...” area, with such choices as “Prospective Students” and “Staff Member”).


    Labeling systems

    We represented the information, e.g., scientific terminology (“Acer”) or lay terminology (“maple”). See Chapter 6.

    Labeling systems

    Describe categories, options, and links in language that (hopefully) is meaningful to users; you’ll see examples throughout the page, some (e.g., “Admission”) more understandable than others (“Nobel Conference”).


    Navigation systems

    We browse and move through the information, e.g., clicking through a hierarchy. See Chapter 7.

    Navigation systems

    Help users move through the content, such as the “A–Z Directory” and the “Go Quickly To...” menu of popular destinations.


    Searching systems

    We search information, e.g., executing a search query against an index. See Chapter 8.

    Search systems

    Allow users to search the content. Here, the default is set to search the Gustavus site, but one could also search the Gustavus calendar, its directory, or the whole web from the site’s search interface.



    Where am I?

    I know what I’m looking for; how do I search for it?

    How do I get around this app?

    What’s important and unique about this organization?

    What’s available on this site?

    Architectural Components
    Panel Selector

    Text Selection



    Image Alt Text

    Text Panel 1
    Test Panel 2

    Contrast



    Link Color



    Caption




    As a Product Designer I bring to the table a holistic approach to creating products that offer people a better Life Experience.
    Drawing Sketches
    Like what you see right?
    Drop me a line to grab a drink, to joining forces on a project, or just say hi.

      • Case Studies
        • ULTIMATE EAR TRAINER
        • Delta In-Flight App
        • Teach & Share
        • Positive Grid Bias Pedals
      • More
      • About Me
        • Bio
        • More Designs & Music
      • Contact
      | All Rights Reserved Copyright 2020 René Díaz Product / UX Designer
      • Case Studies
        • ULTIMATE EAR TRAINER
        • Delta In-Flight App
        • Teach & Share
        • Positive Grid Bias Pedals
      • More
      • About Me
        • Bio
        • More Designs & Music
      • Contact
      Rene Diaz UX Product Designer
      Panel Selector
      Text Panel 1
      Test Panel 2
      Test Panel 2