Envato’s Email
Design System
DESIGN SYSTEM
Designing for designers.
Envato introduced me to the SaaS world, allowing me to work across a diverse range of digital channels. I am particularly proud of leading the CRM design direction and building their design system completely from scratch during Envato’s rebrand process.
The Challenge
No Existing Design Library:
A centralised library for email design components didn’t exist, leading to inefficiencies.
Email Design Workflow:
Emails were being designed from scratch in Figma for every new email send.
Builder Constraints:
Iterable, the email builder, had specific constraints that weren’t reflected in Figma designs.
Inconsistencies:
Padding, text sizes, and button sizes lacked design consistency.
Dark Mode:
Future email designs needed to be optimised for dark mode.
Company Rebrand:
Envato was undergoing a rebrand, requiring updates to colours, typography, and overall design guidelines.
The Solution
Create a Component Library:
We developed reusable components for frequently used email modules to streamline design workflows.
The Benefits
Centralised Source of Truth:
A single source for components and styles ensures consistency and eliminates inconsistencies across designs.
Adaptable Components:
Easy updates as guidelines evolve.
Streamlined Workflows:
Designers focus on solving complex problems, not tweaking padding.
Speed & Efficiency:
Pre-made components reduce the time spent replicating designs.
Minimised Waste:
Reduces miscommunications and avoids unnecessary design or development revisions.
The Approach
Develop Style Guidelines:
Documentation: Detailed notes documenting do’s and don’ts for email design and how to use the design library to design an email.
Branding: Defined colors, typography (desktop & mobile), and logo usage, ensuring alignment with the rebrand.
Spacing Guidelines: Standardized padding and margins for consistency.
Dark Mode: Considerations and adaptations for dark mode designs.
Border Radius: Guidelines for rounded corners across components.
Build a Component Library:
Component Naming: Clear, unique names for easy identification and correct usage.
Annotations: Notes and descriptions explaining each component’s purpose as well as rules and best practices for using each component.
Variables: Multiple color options, typographic sizes, and states for flexibility.
Audit:
Understand and audit frequently used email design modules (e.g. image columns showcasing downloadable items on Envato
The Outcome
Improved Efficiency:
Email design time was significantly reduced by utilising pre-made components.
Consistent Branding:
All email designs aligned with the company’s rebrand, maintaining a polished and professional appearance.
Enhanced Accessibility:
Dark mode optimisation and standardised guidelines ensured inclusive designs for all users.
Scalable Design System:
The component library provided a framework for ongoing updates and adaptability as brand or platform needs evolved.
Team Empowerment:
Designers could focus on creativity and problem-solving, reducing time spent on repetitive tasks or resolving inconsistencies.
Positive Feedback:
Stakeholders and collaborators praised the streamlined workflow and consistent visual output, reinforcing the success of the initiative.
