- 5 day sprint
- Market Research
- User Research
- UX/UI Design
- Competitive Analysis
- User Interviews
- Task Flows
- Experience Map
- Sketch Extension
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.
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.
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
How Someone with a Visual Impairment Would See Instagram
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.
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.
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.
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
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.
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
- 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!
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.