Accessible UX Design !!!

Round 1

Problem:

Currently visually impaired User Experience designers are communicating their design in a text/vocal format. This creates a barrier because User Experience wireframing has strong visual components. Due to this, designers cannot effectively communicate their ideas to their audience, who are used to being visually engaged.

How might we…

  • create a solution for visually impaired User Experience Designers to visually communicate their ideas via wireframing?
  • make it easy to edit/share their material on the go?

Initial Research

Main Findings:

  • Overall lack of accessibility in current digital prototyping tools
    • Prototyping tools rarely produced output that is accessible for users living with visual impairments AND
    • Prototyping tools are not accessible for designers who are visually impaired
  • Currently, there are no existing accessible UX hands on tools

Users:

Visually impaired UX Designers

These users may work in an office where they must commute to or from home where they have to communicate digitally.

  • Visually impaired during birth or early in live VS Blind later in life
  • Tech savvy VS Non-tech savvy
  • First time using our solution VS experience user
  • Assumption: user can read basic UX related words in braille

Brainstorming:

Whiteboard picture of prototype ideas

Yoon and Ankita cutting cardboard for prototype pieces

Yoon cutting cardboard pieces for our prototype

Our MVP/Prototype:

After brainstorming, we created a solution made up of 2 main elements.

White board with text explaining our MVP

App:

Our App will give the user the ability to scan their wireframe and share it with their coworkers. This can then go on a powerpoint presentation or be saved to their computer. The app is composed of:

  • Home page
  • About App Page
  • Quick Scan (wireframe flow, img to PDF) with ability to share
  • My Files

Cards:

Magnetic sticky cards that show the most popular wireframing screens. These cards have text and tactile elements. Braille is embossed into the Text. The cards are composed of:

  • Magnets that can stick to a white board (magnet board that optional for users that work from home)
  • Cards have title
  • Separate magnetic elements can go on cards (fields, image templates, buttons, etc.)
  • Arrows with hinges point from screen to screen
  • Organized storage area

Card that says result and is pinned to a magnetic board Cards showing wireframing example

Updated Cards:

  • White background
  • Embossed letters/symbols and readable text for multiple audiences

white cards with embossed text


Round 2

Redefined Problem Area:

Can there be accessible UX prototyping tools that can

  1. be universally used?
  2. Understood and shared between both sighted and non sighted audiences for seamless communication of user flows

User Testing

Setup:

  1. Context: Brief explanation on what UX /UI designers do.  
  2. Scenario: “You’re trying to hail a car using Uber…”
  3. Task: How would you design a flow?
  4. In-depth interview

Picture of someone using cards during a user test

Takeaways:

  • Majority of people who tried our prototype didn’t know how to read braille
  • Most people preferred the digital software, while some preferred physical cards
  • The bold raised letters helped users with low vision.
  • Spotted some navigation issues with the digital prototype.

 

Changes:

  • Physical Cards
    • White to  Black for better sustainability and readability
    • Whole magnets  on the back of the cards
    • Braille as well as raised letters
  • Digital
    • Onboarding process  (Login, explanations…)
    • Distinguish between Header / edit menu
    • Increased font size
    • Created multiple pages of interactions
    • New UX prototyper vs Experienced UX protypers(more advanced features)

A graphic showing the functions of a digital prototype in edit viewGraphic showing organization of user flow cards in default view


Round 3

Digital Prototype HTML files:  Click here.

Information Architecture:

Digital diagram explaining the digital prototype

Final Prototype Cards:

Close up of user flow cardsMagnetic cards arranged on white board

What’s Next?

  • More shortcuts and options on toolbar
  • Grid development for both digital as well as physical prototype
  • Complete set of cards and UI elements
  • Templates
  • Scanning cards using phone
  • Test new prototypes