Lens

Visual Impairment Simulator for Designers

Length
  • 5 day sprint
Role
  • Market Research
  • User Research
  • Ideation
  • UX/UI Design
Tools
  • Sketch
  • Invision
  • Photoshop
  • Whiteboard
  • Post-Its
  • Ingenuity
Deliverables
  • Research
  • Competitive Analysis
  • User Interviews
  • Storyboarding
  • Task Flows
  • Experience Map
Deliverables (cont.)
  • Persona
  • Ideation
  • Sketch Extension
    • UX/UI
    • Wireframe
  • Prototyping

Overview

Lens is a Sketch Extension & mobile app that allows designers to see their designs the same way someone with visual impairment would, without taking them out of their workflow.

Lens integrates directly with a designers toolset to make accessibility an integral part of the design process, not an afterthought.

During our research, we found that designers want to create more inclusive designs, but they were being limited to either completely skip this step or rush through it due to the time, budget, lacklustre tools, and their own minimal knowledge regarding the breadth of visual impairment.

As a team of 3, we completed this project during a 5-day sprint in Week 5 of BrainStation’s Immersive 10-Week UX Program.

Accessibility isn’t a development cost…  it’s a business imperative.

Defining the Problem

We were tasked with creating a new product that bridged the digital divide and made the power of the internet more available to all. Through our discussions and research, we decided to focus on accessibility, particularly the underrepresented, visually impaired demographic who account for 10% of the entire world’s population.

As designers, we tend to empathize with the visually impaired, yet we found that most designers feel that they are limited by either time, client budget, tools, and/or knowledge (more on that below).

We turned to secondary research to find what resources are currently available for designers, and we also found some incredible case studies as well.

The 3 Myths of Accessible Design

1.    Accessibility adds significant time and cost to a project.
2.    Accessibility only helps a small fraction of the population.
3.    There is no business case for accessibility.

(Source)

User Interviews

To understand our demographic on a deeper level and remove any of our own biases as designers, we interviewed several visual designers from a myriad of different disciplines – UI/UX, graphic, and web.

After identifying all of their pain points, we condensed them based on themes and found that most designers had the same issues around designing for accessibility:

  • Found designing for accessibility extremely cumbersome as it interrupted their workflow.
  • Used web-based tools to check contrast ratios, and then used their intuition to determine if the size of their fonts was sufficient.
  • Only accommodated for color-blindness as they were unaware of or didn’t know how to accommodate the other types of visual impairment.
  • Felt that clients prioritized budget over making their products accessible since it takes significantly longer to to make visual designs truly inclusive.

The next step was to create a persona that we would continuously refer to while developing Lens.

Persona

Reframing the problem: adding a human element

During our interviews, we noticed that although some designers take the bare minimum approach to visual accessibility (checking contrast and font size), they simply didn’t consider all the other types of visual impairment due to time, budget, or lack of knowledge.

In order to make designing for visual impairment a priority for Jenny, we need to make sure it hit close to home.

We created a story that Jenny’s sister has developed cataracts at a young age. Since Jenny is an empathetic designer, seeing her sister struggling to use a phone shocked Jenny to her core.

Jenny began to wonder….

How does her sister see her favorite apps?

How Jenny Sees Instagram
20-20-vision
How Someone with a Visual Impairment Would See Instagram

Shocking, isn’t it? This totally took us by surprise, too. At this point, we were kicking around a few How Might We questions, but we finally honed it down:

How might we integrate accessibility directly into the design process?

If we were looking to make designing accessible products easier for designers, then it only makes sense that we delve deeper into the lives of designers. We created a task flow for a typical project  to see where the opportunities and pain points lie.

Task Flow

We decided to create a tool that encouraged designers to take visual impairment into account while designing their mockups.

Earlier, many designers voiced their frustration of having to copy and paste hex codes to check contrast, and the seemingly endless amount of web tools that were a pain to use. However, not one designer mentioned checking for any other visual impairment besides color blindness. What about cataracts, blindness, jitter, and ghosting?

The designers who voiced the biggest challenge were UX/UI and web designers, all of which their tool of choice was Sketch. They constantly jumped between Sketch, web-based contrast checkers, and their personal mobile devices to make sure their ideas translated to all devices and people. This is a cumbersome workflow, and it is precisely where we decided to intervene.

Solution

Lens is a Sketch Extension & mobile app integrates directly with a designers toolset to make accessibility an integral part of the design process, not just an afterthought.

Lens allows designers to see their designs just as someone with a visual impairment would, while they’re designing and integrates directly into their workflow and toolset.

Prototypes

Since this was a two-part product, desktop and web, it was smarter to have each person on the team focus on a different portion. I decided to tackle the desktop version.

Lens – Sketch Extension

The Lens Sketch Extension integrates directly into the Sketch toolbar, always available to test against all the visual impairment in two clicks.

When Jenny wants to check her designs for accessibility, she can simply click on Lens right from the toolbar and apply any filter of her choice.

Each filter imitates a visual impairment, and gets applied directly to the active Sketch artboard. In case Jenny forgets to turn off the filter, the toolbar icon glows blue when a filter is enabled, and a blue indicator would also appear right next to the artboard name.

As the adage says, top-of-sight, top-of-mind. The constant availability and ease of use of this integration means that it’s easy for the designer to remember to use it, and lowers any friction throughout the designing workflow as well.

We then applied this same principle to a mobile application.

Lens – Mobile App

The mobile app was inspired by Sketch Mirror (Sketch’s existing mobile app) and Snapchat filters. Once connected to their computer via wifi or a cable, Jenny can toggle between the different visual impairments directly on their phone and immediately make decisions.

User Testing

We tested our InVision prototype to a few UI/UX designers and made some adjustments based on their feedback:

  • The designers wanted more information about how to reach standards.
  • More context about what the sliders mean, and to find an average.
  • Hard to tell what the icons mean.
  • Option to leave and view a different artboard.
  • The interface was confusing, they kept confusing the artboard UI for Lens’ UI

Iteration

Key Takeaways

  • The judging panel (which coincidentally consisted of UX accessibility experts) loved the idea of integrating a tool directly into Sketch as none existed at that point.
  • Test, test, test. What may be straightforward to you doesn’t mean it’s straightforward for everyone.
  • I learned a lot about all the different kinds of visual impairment that a great designer should account for.
  • I wholeheartedly believe that this tool is desperately needed, and would love to find a developer to partner with to turn it into a reality. If you’re a developer who’s excited about making the world a more accessible place, please get in touch!

Update

During this sprint, an eerily similar Sketch Extension was released! Stark does the same thing, but utilizes a hover window instead of building in directly into the Sketch art boards. The feedback for Stark has been overwhelming, and the release of this product verifies that there really was a need in the market for an integrated solution! I’m ecstatic that’s available for all of us designers and have already implemented it into my workflow.