top of page


web design & branding

  The summary 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  


There isn't a one-stop location for transparent face coverings that is simple, intuitive, and with the vendors vetted.


My brother and I built 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: 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 website is viewed globally

Global map with over 80 pinpoints, in blue, of where has been viewed
Source list of where people found

 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



(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 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)  

bottom of page