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

accessible-masks-hero.png

  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

Source list of where people found AccessibleMasks.org

 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)

  First version of the website (desktop)