Lyft

Challenge

Create a consistent brand experience across Lyft email campaigns.


Solution

Expanding their design system to include email development guidelines and templates.

Coding for
email is hard

Writing pixel perfect email code is nearly impossible. Hundreds of email service providers, browsers, operating systems, and devices make rendering email consistently difficult.

Adding email templates, modular code, and testing best practices to the Lyft design system allowed us to maintain their brand standards at scale.

We took the building blocks of the Lyft brand and built reusable components for their marketing emails. Having a repository of components allowed us to quickly iterate on designs and reduced time testing code.

The Basics

Basic email HTML has the infrastructure to make updating color and copy easy. However, we had to design and test new fallbacks for typography, spacing, and buttons. Below are a few components we designed and developed.

Place concept prototype

Type

A boilerplate with a style tag that imports the Lyft Pro san serif

Builder concept prototype

Spacing & Layout

Hard coded spacers for consistent layouts

Bulletproof Buttons

The easiest way to implement buttons in email is to use images, but we wanted to make sure our emails were as close to being ADA compliant as possible. Bulletproof buttons provided us with the code to ensure our buttons can be read by screen readers but we added in image buttons as fallbacks for more consistent renderings in Outlook.

2x Images

We wanted to ensure all of our imagery looked sharp on high density pixel displays, so we used the following hack to force 2x images to work across all email clients.

© Dominic Gerace 2021