Every website provokes — and ideally answers — questions from users. Some are small and quickly answered (Where do I sign up?). Some don’t have to be answered at all (Why is their logo purple?). But my favorite web projects demand responding to one question in particular: Why is this special?
Last year, I was part of the team that launched The Advent Project: an online Advent calendar featuring the work of 24 different artists. Every day from December 1st to the 24th, we’d unlock a new, short piece of multimedia art. Five dollars would get you a key to unlock the calendar, with all proceeds benefiting the National Center for Youth Law, a nonprofit that advocates for the rights of immigrant families.
Since the art was going to be great, I wanted the website to feel special too. Real-life Advent calendars are small moments of joy, and we needed to capture that feeling if we wanted to convince people to donate. And it wasn’t enough to just make the calendar good — we had to convince people to donate without seeing a single piece of art in advance.
The Advent Project is non-denominational, so a traditional holiday look ran the risk of being limiting. One of the notes that came out of the logo drafts was to make it “kind, but not gentle.” I used contrast throughout the site to balance this emotional paradox. Soft greens and whites are punctuated by bright blush links and buttons. Straight-mannered body text serves as a foil to the bold, impactful headings. Simple, clean layouts are peppered by whimsical animations and icons.
The landing page, launched 10 days before the calendar, had to introduce an unusual concept, convince people to give money to it, and then instill a sense of delight and curiosity every step of the way from arrival to checkout. (Easy!) So I emphasized the most critical elements of the page: what the project was about, and how to purchase it.
The main WordPress site uses a custom theme I designed and developed, which gave us the flexibility to make quick edits and queue up projects for the calendar in advance. We used Shopify for purchases, and I modified the templates to blend seamlessly with our main site and make it easy to purchase a key.
Artists submitted all kinds of projects — songs, stories, short films, even a video game. This presented a challenge: the site needed to showcase each one equally and offer a consistent user experience, but we also wanted each project to feel unique, that they weren’t just being posted using the same, repetitive template.
I circumvented this by making the project page customizable, so each one could have a unique color scheme and layout:
And for audio-based projects, I couldn’t help but take it one step further, so I designed a custom player with animations themed to the audio type:
Then there was the calendar itself — and with it, the surprisingly thrilling challenge of designing 24 numbered boxes. Like a real Advent calendar, I wanted this experience to be a tiny bit mysterious, and landed on the idea of representing each project with a related-but-whimsically-vague icon. When rolled over, each of the 24 calendar tiles come to life through the magic of CSS animations, and the SVG-based icons fill in with the custom colors of the corresponding project:
But then after all that work I wondered, where else can I stick these icons? The answer — after why, Austin — was the daily emails announcing each project. Sending daily emails can be fraught: it’s a direct way to reach your audience, but can fatigue subscribers when done poorly. To avoid this, I carefully designed our email template to be lightweight: each day’s project featured its matching icon and a single sentence to encourage opening the calendar. In the end, 95% of calendar purchasers stayed subscribed.
We wanted these emails, like the website, to feel exciting, because the projects and the cause deserved it. Design is political, and should make good things more accessible. I wanted my designs for the Advent Project to elevate great art and help an important cause — and hopefully feel like something special.