Background
Veronica's Insurance offers insurance solutions, including auto, home, and life coverage. With a focus on customer satisfaction, the company provides tailored policies and transparent service.
By enhancing the website’s accessibility, Veronica’s can improve access for all users and expand its customer base.
Project: Accessibility Audit & Design Suggestions
Roles: Accessibility Specialist, UX/UI Graphic Designer
Tools: Heurio, Dev Tools (Lighthouse), Figma
01. Discover
Problem:
Veronica’s Insurance’s current website is not supporting usability or accessibility issues to the detriment of users with visual impairments and/or assistive technologies which is causing barriers to engagement with content and completion of tasks.
Low vision refers to significant visual impairment that can't be fully corrected with glasses, contact lenses, or surgery.
About 3.56% of the population (285 million people globally) is affected by low vision.
Many people with low vision use assistive devices or technologies like
a white cane for mobility
and screen readers for navigating digital spaces
Sources
World Health Organization
The US Government’s Center for Disease Control
The UK Government’s Civil Service
02. Define
After analyzing the data collected during research I created a proto-persona for a target customer for Veronica’s Insurance.
Jay Jay
Jay Jay is a data analyst from California with low vision (central vision loss) who wishes to purchase health insurance.
03. Ideate
Once the proto persona was defined I needed to ideate how to solve the accessibility related problems in ways which will work for them.
How might we optimize the UX/UI in order to expand accessibility for users with visual impairments and ensure compliance with current accessibility web standards?
Constraints
UX/UI must integrate with established branding
Evaluation Tools
Heurio
I used Heurio to conduct a heuristics evaluation based on Jakob Neilson’s 10 Usability Heuristics
Lighthouse
I used the Lighthouse feature in Dev Tools to conduct an accessibility report
Key Insights
There are several contrast issues,
which can hinder readability for users with visual impairments
Some headings do not descend logically (H1, H2, H3, etc),
which can cause issues with screen readers being able to properly engage with content
Some images lack alt text, and some elements lack accessible names
which can interfere with usability for users with assistive technologies
Zooming is disabled,
which can cause issues for users with low vision
Accessibility & WCAG compliance
A contrast ratio of 7:1 to meet WCAG AAA status will be reached on 100% of website buttons by the end of the quarter.
Assistive technology and information architecture
100% of pages will have logically descending headings (H1, H2, H3, etc) in order to make the page accessible to users with assistive technology by the end of the quarter.
04. Design
The following are my design suggestions in order to address the issues brought up in the heuristic accessibility report
Using the key insights from the heuristic accessibility review and the KPIs, I created the following design suggestions.
Visual Design Suggestions
1 - Adjust Contrast
By adjusting the contrast to a ratio of 7:1 or higher (in order to earn a AAA WCAG rating) on user interface elements like buttons, usability is improved for all users.
New ratio
The button now has a ratio of 9.98:1, according to the WebAIM contrast checker.
2 - Heading Hierarchy
By changing the heading to descend in a logical manner (H1, H2, H3, etc.)
the page is made more accessible to users with assistive technologies like screen readers
and the information architecture is improved.
The contrast was also adjusted, improving readability for all users.
These changes integrate seamlessly with the existing branding.
Other Design Suggestions
Add alt text to images and give elements like buttons accessible names
to make the website more accessible for assistive technologies
Enable zooming to make the website more accessible for users with visual impairments
05. Conclusion
In summary, small changes which integrate seamlessly with existing branding can enhance accessibility and usability for all users.
Ever since my days as an educator teaching a diverse population of students such as:
English language learners,
those who are gifted and talented,
and those with special needs,
I have known that creating accessible content is a passion of mine.
Just like I helped teachers make small changes to their instruction and curriculum in order to make it more accessible to all students,
some of those same ideas apply when it comes to UX/UI design.
While completing the Advanced Usability & Accessibility course by DesignLab I gained satisfaction in
learning how to identify potential inaccessible aspects of digital products
and ways in which they can be corrected with minimal effort and maximum effectiveness,
increasing usability not only for the affected group but for all users.
How I’ve Grown
I have gained knowledge when it comes to best practices in accessible design, as well as how to identify and correct inaccessible design and keep up with changes in standards.
In the future
I’d like to continue to design with accessibility from the start, and advocating for the needs of all users when it comes to product development and design.
I want to continue to keep up with the latest in accessible design standards and best practices.
My recent work
CannTrack
End to End Application
CannTrack is a mobile app which helps cannabis users track and understand how different products affect them.
Metro Denver Farmers’ Market
Website & Brand Redesign
A responsive website redesign for a local farmers’ market.
The Conqueror Challenges
Added Features
Two added features enhance a fitness app.