Contents
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:
Our MVP/Prototype:
After brainstorming, we created a solution made up of 2 main elements.
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
Updated Cards:
- White background
- Embossed letters/symbols and readable text for multiple audiences
Round 2
Redefined Problem Area:
Can there be accessible UX prototyping tools that can
- be universally used?
- Understood and shared between both sighted and non sighted audiences for seamless communication of user flows
User Testing
Setup:
- Context: Brief explanation on what UX /UI designers do.
- Scenario: “You’re trying to hail a car using Uber…”
- Task: How would you design a flow?
- In-depth interview
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)
Round 3
Digital Prototype HTML files: Click here.
Information Architecture:
Final Prototype Cards:
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