Design Teardown: Paperless Post

For 6 years, Paperless Post has focused on our hosts—the people seeking out the perfect invitations for their parties and paying us for virtual and physical paper. We concentrated our resources on designing thousands of unique cards for any occasion and building a sophisticated design platform and intuitive tools that make entertaining easier.

We’ve seen steady growth and success: a network of millions of people who use our product to connect with the people who matter to them in real life. This has given us the luxury of thinking more expansively about our audience, which led to us shifting our focus to the silent majority of our users who are producing over 2 million card views every week: guests.

The guest of a Paperless Post event is an elusive figure. They might be unfamiliar with Paperless Post as an idea, and they may even be completely unaware that they’re using it. Yet they arrive on the site in droves, interacting with it in a meaningful way that affects their lives offline.

To understand this cohort of involuntary users and better serve them, it was time to examine the journey of guests—from receiving an invitation to RSVPing to attending the event—to uncover their unique pain points.

So you’ve been invited to a party

To understand the needs of real-life party-goers, we needed to get into their heads—and their hearts. We held focus groups where we asked people about their experiences before and after parties:

• How did it feel to get the invitation?
• What affected whether they went or not?
• How did they get ready before the party?
• What was their mood afterward?

These conversations helped us map out what we called the “guest journey”: the behaviors and emotions that follow the catalyst of an invitation. It was important to note both the positive and negative experiences so we could amplify the good and alleviate the bad. It quickly became apparent that our biggest opportunities came at moments of mixed, and potentially frustrating, emotions: replying and attending. 

Yes, no, maybe

Deciding whether to go a party can be a tall order, with complicating factors like your relationship to the host, availability, feelings of obligation, connection with other guests, and expectations of the event itself. Easy access to the guest list and communication tools could facilitate a decision and response.

Getting there

Once our hero decides to attend the party, the next hurdle is getting from point A to point B. The easier it is for a guest to get to an event—whether they need directions, transportation details, or an Uber or to coordinate with other guests—the more likely they’ll actually arrive.

Goodbye, antiquated animation

When an invitation arrives in your mailbox, whether it’s online or on paper, there’s a flicker of excitement: you’ve received something special. Right from the beginning (since our beta phase in 2008), we’ve sought to recreate the real-life experience of opening a physical envelope with an animated reveal. This animation became a staple of our product—to the point where people knew Paperless Post as the “one with the envelope that opens”—and, for many, a source of delight.

Others (looking at you, tech folks in our Twitter mentions), however, saw it as nothing but a time suck. Admittedly, it was slow. Very slow. 9 seconds slow—that’s 7 seconds longer than 47% of web users expect a website to load in. Hardly the pace at which you eagerly open a bulky and beautifully calligraphed paper envelope.

In addition to its lag, the animation also hid the RSVP functionality and event page with additional details. To see one you had to navigate away from the other. Recipients were literally blocked from accessing all the information at once.

Finally, the animation wasn’t responsive across all platforms, leading to a big drop in engagement on mobile devices—where 55% of Paperless Post invitations are viewed. It was built with Adobe Flash, which had been the best option back in 2008 but had fallen quickly out of favor for web-friendliness since (as our trusty Twitter mentions were also quick to tell us).

It was plain to see that if we could remove the unnecessary time and distance within the card experience, maintaining the initial rush of receiving an invitation and giving recipients access to everything they need—we could significantly affect our reply rate.

Prototype twice, build twice as fast

Once we identified our recipients’ 3 major blockers—a slow reveal, disjointed pages, and the inflexibility of Flash—“all we had to do” was figure out a solution.

We assembled a core team of 2 product designers, a front-end dev, and a product manager to scope, execute, and present prototypes for review by our Chief Product Officer and CTO every week. We deliberately kept the group small to encourage nimbleness and quick, informed decisions. Having a front-end developer dedicated to this project from the beginning was critical in allowing us to move back and forth between advanced Framer prototypes and HTML5/CSS3 implementations quickly to validate (or invalidate) our ideas.

The adage “measure twice, cut once” originated in the Medieval era but is no less true in the digital age. For 3 months, the core team toiled away on prototypes full-time before writing any production code.

And it worked: after just 10 months of work on what would typically have taken over a year, we had a quick, seamless, and—with the help of a new set of colors and typefaces from our brand designers—sharp solution to our problems.

Hello, new receiver experience

Our goal was to create a streamlined, Flash-less animation that’s integrated on a page with all the event details and is fast, functional, and exciting. With the majority of our recipients opening on mobile devices, we decided to tackle the mobile web experience first. Now, when you click to open an invitation, an envelope drops into the screen with the flap already open and quickly falls away while a full event page loads just below a virtual “ledge” where the card sits.

To give the card a more tactile “real-life” feel on a relatively tiny mobile screen, double-tap and pinch gestures allow you to zoom in on smaller design details that might otherwise be missed.

In lieu of our old reply card—a skeuomorph of the traditional paper version—the RSVP buttons are now an integrated part of the page and the most prominent UI elements below the card. We framed these buttons with key decision-making information, with the event name above and an “action grid” of event details below. Further down are less pressing features like links to gift registries and social components like a comment wall. As the guest scrolls down the page, the RSVP buttons stick to the top of the screen, giving them quick access to helpful information like date, time, location, host information, and attendee list without navigating away from the call to action.

In addition to the simple “yes” or “no” of your typical party RSVP, guests can be taken through a question flow submitted by the host about anything from +1s to meal selections to mailing addresses. To emphasize these actions as meaningful, we incorporated subtle animations throughout this flow.

Overhauling these guest-side pages also gave us an opportunity to apply a new visual voice to a complete product experience. The look that our brand designers came up with is approachable and fresh, with large type set in a modular layout that quickly communicates key information.

A neutral palette, supported by detail accents of our new colors Paloma (the orangey coral) and Gatbsy (the cerulean blue), allows the host’s invitation to stand out as the main focus.

Since we launched the new guest experience on mobile web this past October, we’ve seen definitive upward trends across all of our major metrics—RSVPs, engagement on guest tools, private messages, and comments—and a 30% decrease in page load time. Such a strong start is a testament to the time commitment we put in up front researching, prototyping, and testing, and we’re beyond thrilled with the results so far.

The end (AKA the beginning)

As we were nearing the homestretch of our project, Facebook product design director Julie Zhou published an essay that really resonated with us. “Pretty much any time we design something new,” she begins, “we start at the middle.”

For years, we’d considered hosts—the people seeking us out for their invitation needs—our singular target audience. They have a need and we’ve always helped them solve it to the best of our ability. And yet, we’ve since realized that sending out an invitation is, in actuality, the “middle.”

If, as Zhou writes, “the ‘beginning’ is how you introduce something new to a person, and. . . get them to understand its value such that they incorporate it into their lives,” then Paperless Post’s “beginning” is actually the recipient experience and the audience with the most potential is the guests. These are the people who might know nothing about our product yet are interacting with it in a way that’s meaningful in their lives offline. Whereas a repeat host will probably send their next invitation to the same (or a very similar) guest list, a guest that turns into a host likely has a social circle that only partially overlaps the host’s.

This is how delighting involuntary users—who aren’t paying us, who might not even know who we are—can have such an impact. When we provide guests with the best-possible first impression to our product, we create a path to the rest of our offering from discovery to education to value.

What we once thought was the end of the host’s experience—the sending of the invitation and the real-life event that follows—is in fact the beginning of the journey for even more people.

This was originally posted on Medium.