Design System
I collaborated with a team of designers and developers to expand the Constellation Email Design System, a design library of reusable components for building complex, responsive emails.
This involved creating new modules and patterns, writing documentation, collaborating with developers to build out the overall design library in Figma and Taxi for Email. The end result is an ever-growing collection of responsive email templates that can be used for a variety of different applications, whether it be for marketing campaigns, transactional emails or newsletters.
Task
Analyze current email designs. Review existing email designs and identify common elements, patterns, and styles. Help to define the EDS structure and accommodate future additions or modifications. Created modules and maintained consistency. Document components and communicate implementation. Support smaller initiatives and collaborate with team and partners.
ROLE: Designer
PLATFORM: Figma & Taxi for Email
TEAM: Design: Ana S., Wren B. | Development: Margaret S. & Anne T.
We examined current email designs to identify common elements, patterns, and styles—such as color, typography, header and footer layouts, button designs, and the use of icons and illustrations. During our audit, we uncovered inconsistencies in the use of color, typography, and iconography. To address this, we refined the typographic hierarchy, streamlined the color palette, and reduced the number of icons to create a more cohesive and consistent visual system.
Design Tokens create consistency, scalability, efficiency and cross-platform flexibility.
Typography
In a design system, typography presents uniform text styling throughout a brand or product. It ensures a coherent voice, prioritizes readability, and enforces hierarchy for a seamless experience across various platforms.
Iconography
Iconography in a design system provides a cohesive set of symbols to communicate actions, status, and information, enhancing user experience with intuitive, consistent, and navigable interfaces.
Templates
Updated marketing templates with correct color, typography, spacing, icons and layouts for mobile and desktop.
New Modules
Updated refinance advertising module for Zillow Group Marketplace in the Home Owner Report email, utilizing updated typography, spacing and color.
Expected to generate $746K annually
Documentation
Documentation for Constellation Email Design System: Primary Modules, layouts and icons for mobile and desktop.
Animated gifs for swapping out images and viewing different templates in Figma.