Accessible
Masks.org
web design & branding
The summary
AccessibleMasks.org is an online resource showcasing transparent face coverings in a simple, minimal way. I built the site on Wix.
The elements
-
mobile-first website
-
filter vendors (by style, type, & more)
-
accessible design (WCAG 2.1)
-
social media branding & style guide
The inspiration
Problem:
There isn't a one-stop location for transparent face coverings that is simple, intuitive, and with the vendors vetted.
Solution:
My brother and I built AccessibleMasks.org to encourage mask accessibility during the pandemic. We cultivated relationships with vendors, did research, and I personally built the UX/UI from scratch (via Wix).
Visibility:
AccessibleMasks.org was featured in 8+ articles, podcasts, press releases, and more –– using only organic sharing and word of mouth for viewership!
11,355+ web views
From September 16, 2020 to September 07, 2021
8+ press features
in podcasts, newsletters, and articles
80+ countries
AccessibleMasks.org website is viewed globally
The research
Businesses and relationships
We sought out to find 10-15 vendors with a variety of product types and options.
Key filters and differentiators:
-
Mask style (tie-back, ear loop, specialty, face shield)
-
Material (reusable/disposable)
-
Quantity (single & multi/bulk)
-
+ Other filters (child size, anti fog)
Brand & accessibility
Common issues:
A common thread found with online resources is
-
poor visual design
-
excessively long URL's
-
abundance of information with low hierarchy
-
lack of empathetic communication to the user
Our solution:
I aimed to modernize online resources while proving that fulfilling WCAG 2.1 compliance for accessibility does not mean the design has to suffer.
Colors are WCAG 2.1 AAA rating for contrast and typeface pairings are easy to read.
-
Montserrat for headers
-
Cormorant Garamond for body text
Maximum Yellow Red
Maximum Yellow Red
(7.06 / 7 AAA)
WCAG 2.1 contrast ratio
Turquoise
Turquoise
(7.34 / 7 AAA)
WCAG 2.1 contrast ratio
Royal Blue Bold
(4.89 / 4.5 AAA)
WCAG 2.1 contrast ratio
The unique element
The key element of accessiblemasks.org is the ability to sort and filter the masks and be directed to the website of the vendor.
Here is a simulation of how filtering works on mobile.
Filtering design style
Mobile = an "Instagram" look with stacked images
Desktop = a "marketplace" to display as many masks
The tags are shown, listed under each vendor for accessibility, so e-readers can read the categories aloud to the user. Transparency is key (pun intended, too!).
*Click on the phone to play the 20 second demo clip. (No audio)
