Clearly Email Design System
The Project: Develop the email design system within Figma to align design consistency, maintain accessibility standards and improve mock-up creation efficiency.
My Responsibilities:
Collaborate with project stakeholders to review existing primary, secondary, educational and influencer email templates that are essential to the design system.
Create unique local styles, basic HTML elements, intricate UI components, and page templates that incorporate both design and documentation.
Conduct user acceptance testing to ensure that there are no design inconsistencies between the developed templates and finalized mock-ups.
Document the email design process and present it to Clearly's creative team.
The Challenges: The project was completed within a month, without conducting user research. The Figma templates were designed based on previous Photoshop designs. Our approach was to develop the new Figma templates and conduct user testing after the launch.
Local Styles
Following the meeting with project stakeholders to assess the existing email design process, I initiated the development of local styles for the email design system. This involved establishing the colour palette, typography, and grid system to be utilized in the email designs.
The colour palette had already been defined by the Brand team, so my task was to incorporate the corresponding hex codes into Figma while ensuring consistent naming conventions and thorough documentation.
For typography, I employed Clearly's primary font, Mulish, as the foundation. I created various styles for headers, paragraphs, and additional content to maintain consistency throughout the email designs.
In terms of layout, the emails were set to a width of 540px and adhered to a 6-column grid system, ensuring visual coherence and alignment across different email designs.
Atoms
The design system is based on the atomic design methodology. To establish the foundational elements of the design system, I focused on creating and documenting the basic building blocks, known as atoms. This included designs and comprehensive documentation for the appropriate usage of the Clearly logo, icons, and call-to-action buttons. These essential elements serve as the core components that can be combined and reused throughout the design system to ensure consistency and cohesive branding.
Header & Footer
The Header & Footer pages encompassed the email header, pre-footer, and footer components. Each design was tailored specifically to the Clearly geography it was intended for, as well as the type of email send, which could include contact lenses, glasses, or a combination of both. These customizations ensured that the header and footer sections aligned with the targeted audience and accurately represented the respective offerings, resulting in a more personalized and relevant email experience.
Banners
The main content of the emails, known as banners, were structured into distinct sections, including the skinny banner, primary hero banner, secondary banner, product banner, educational banner, influencer banner, and value propositions banner. These sections were carefully crafted based on the highest converting existing email templates and specific design requests from the project stakeholders.
Complete Layout
To ensure cohesion and gather valuable feedback, a comprehensive layout comprising a finalized email mock-up was shared with both the stakeholders and the development team. Through an iterative process of collaboration, incorporating valuable insights and suggestions, the designs underwent refinements and revisions until reaching the final stage of approval. This collaborative approach ensured that the email designs were well-informed, optimized, and tailored to meet the objectives and expectations of all stakeholders involved.
User Acceptance Testing
I collaborated closely with the developers during the User Acceptance Testing (UAT) phase to ensure the email proofs aligned with the approved designs, leaving no room for discrepancies. To facilitate this process, I utilized a tool called Email On Acid, which enabled me to preview the emails across different email platforms, including both light and dark modes. This allowed me to evaluate the formatting and thoroughly check for any code-related issues or potential problems in the email rendering. By employing this approach, we ensured that the emails were visually consistent and functioned flawlessly across various platforms and modes.
Standard Operating Procedure & Training
Once the designs were deemed final and successfully passed the User Acceptance Testing (UAT) phase, I proceeded to develop the Standard Operating Procedure (SOP). This document outlined the step-by-step process for creating emails, starting from file creation and encompassing various aspects such as Figma best practices and essential keyboard shortcuts.
After completing the documentation, I conducted training sessions to familiarize the CRM team, graphic design team, and copywriting team with the email creation process. The training aimed to ensure a smooth and consistent workflow, equipping the teams with the necessary knowledge and skills to effectively create emails following the established SOP.
Next Steps
Conduct an analysis of the click rate for the new email designs and perform A/B testing on different banner variants to identify the most effective and highest converting designs. This evaluation process will provide insights into user engagement and conversion rates, enabling data-driven decisions for optimizing the email designs and maximizing their impact.