SmileDirectClub’s email design system.
Being a digital first brand in 14 countries means you send a lot of emails, it’s one of the primary channels for communication to future and current customers on their journey to a new smile. We needed a design system that was flexible, adaptable, and quick. To do this we adapted Figma and built out a module based library. Each module has a set of components based on function that are easily swappable like buttons, CTA’s, and images. The result is a quick and flexible way to create emails
Creatives: Joe Hash CD, Carmen Timmons ACD, Lauren Thorn ACD, George Pettigrew Sr Designer
There are some considerations when building a component library for email.
If you don’t define character counts for headlines, body copy, buttons and CTA’s, the system starts to fall apart. Add in the increased length for translation to other languages, device specific features like dark mode, and the system starts to become even more complicated. Because of the flexibility of Figma and our modular approach, we can quickly adapt each module to include a dark mode and country specific components that allows us to slightly change things like font size for languages where length is a consideration.
Desktop, mobile, dark mode.
Design system tutorial creative for internal use.