Meetup has no content wall on the web, which means
Neither the designs nor the fragmented template system have changed in years.
What if we could overhaul all of it, make it easier to work with in the future, and measurably improve the user experience?
What it is
- lay out north star vision (lightweight, contextual experience based on what you're trying to do, and what we know about you)
- steps along the way
- what it did NOT include (login)
I led creation of the design framework, designed templates, and worked with one of our senior designers on the pitch that ultimately got us buy-in. Currently I work with product and engineering to prioritize template rollout and fine-tune designs.
To start, I took inventory of our existing email templates. I printed out examples of every email we had, laid them out, and worked to identify the common elements between them.
Simply reskinning emails wouldn't have been too difficult, if time-consuming. If I truly wanted to improve our email system, however, I needed to provide an overarching solution that took into account multiple factors.
- What triggers our system into sending a specific email?
- What’s the user’s goal when they read it?
- What’s our goal for their behavior?
During the inventory, I found that our templates can generally be grouped into 6 categories, each with their own triggers and goals.
Despite the different categories, it was clear that there was (or should be) a common visual language across all of these templates. That's where our responsive components come in.
Creating a component library
Components couldn't consist solely of individual elements, such as a large avatar, that could be used any which way—that's how our original template system grew so disjointed and unwieldy. Instead our components are larger, Meetup-specific objects that consist of smaller elements like lists of Meetups, headers, and Meetup groups.
These components are defined in a synced Sketch library accessible by any designer, and they also exist as centrally coded components accessible by any engineer.
By swapping out various components, we can successfully create everything from invitations to new Meetup group announcements.
Examples within the Social Interactions category:
What about desktop?
An increasing number of users read email on their mobile devices, so I designed components primarily for mobile. For simplicity's sake, components on desktop maintain the same simple layouts—just in a wider column.
We're continuing to gradually convert old templates to the new system, with priority reserved for our most impactful emails.
Because the components are centrally synced and coded, we can easily update them as our design system continues to evolve and grow.