Screwfix
Email Design Playbook and Design System
Client
Screwfix
My Role
Contribution
UX Audit
UX Strategy
UI Design
Design System
Date
Q4 2023
Project overview
I was engaged to bring consistency and speed to Screwfix’semail CRM campaigns. The brief was to audit the current communications, define clear design principles, and deliver a modular system that marketing and engineering could use across all email campaigns.
Approach
I conducted a full UX audit of the current email design templates, component and process, with actionable recommendations. I then developed a set design principles and playbook, Figma design system with token variables, email and campaign templates, icon set, usage guidelines, and accessibility checks to WCAG 2.2 AA.
Outcome
A modular campaign system that shortened production cycles, improved visual consistency, and raised accessibility standards. Teams can now assemble new creative in hours, not days, while staying firmly on brand.
Design system
A practical campaign design system built in Figma, using tokenised colour, type, spacing and elevation. Components cover the full journey from hero banners and promo cards to buttons, badges and legal copy. Everything is documented with when-to-use guidance so teams can move quickly without sacrificing consistency or accessibility.
Design playbook
Teams use the playbook to brief, build, review and sign off work with less back and forth. It links directly to Figma components and ready-made templates, and includes a pre-flight checklist for contrast, touch targets, dark mode and file size.
The playbook is versioned alongside the library and updated from A/B learnings, so campaign quality and speed improve over time.
Mobile First
With a majority of users opening emails on mobile, a mobile first design strategy emphasises clear, concise content, scalable images, and touch-friendly buttons that enhance readability and usability on smaller screens.
By building for mobile first, we create emails that adapt seamlessly from small to larger screens while maintaining visual clarity and impact.
This approach not only improves user experience but also increases engagement and conversion rates, as emails are optimised from the outset for the most common user scenario.
Layouts
The layout structures your email content and creates a flow of information as the reader moves from one section to the next. The more scannable your email will look, the more readers will be tempted to read it.
That's why you need to get the layout right. You can choose from a variety of email design layouts, such as:
Single-column
Inverted pyramid layout
F-pattern layout
Multi-column
Double-column
Zig-Zag layout
Hybrid layout
Considerations
💡
Only single-column layouts work effectively on mobile, so it is worth considering the effort to return on time spent creating complex multi-column layouts, if most people open them on mobile
Colours
Our CRM email design playbook uses a colour palette crafted to enhance user experience, maintain brand consistency, and improve message clarity. This thoughtful colour strategy keeps our emails visually cohesive and highly engaging.
Other colours can be used for other campaign branding, but the colour contrast must be checked through to be in line with the Web Content Accessibility Guidelines (WCAG).
A link to a colour contrast checker can be found here:
https://webaim.org/resources/contrastchecker/
Typography
Using a set hierarchy of font styles ensures that each email feels cohesive and professional.
Consistent typography helps readers quickly identify key information and creates a sense of familiarity, making it easier for them to engage with content.
Additionally, by standardising font choices, sizes, and line spacing, we maintain accessibility and readability across devices, enhancing user experience and fostering trust in our communications.
WCAG guidelines
While WCAG doesn't specify a minimum font size, it does recommend that text be resizable to at least 200% of its original size.
Best practices
For optimal readability, body text should be at least 12 points (pt), or around 16 pixels (px). No text should be smaller than 9pt (12 px).
Font consideration
It would be worthwhile considering the use of a similar version of the Screwfix font, from Google Fonts.
Using Google Fonts in CRM email design offers several advantages over proprietary brand fonts. Firstly, Google Fonts are web-safe and widely supported across various email clients, ensuring consistent rendering and appearance for all recipients, regardless of their device or email service. This reliability minimises the risk of font substitution issues that can arise with custom fonts, which may not be universally available.
Additionally, Google Fonts provide a diverse selection of typefaces that are easy to implement and can enhance the overall aesthetic of our emails without compromising on brand identity.
It will also reduce the need to have text as image across emails.
Live text
Using live text in CRM emails is crucial for accessibility, responsiveness, and deliverability. Unlike text embedded within images, live text remains sharp and readable on all devices, adapting seamlessly to various screen sizes and resolutions.
It also enhances accessibility by allowing screen readers to process the content, ensuring that visually impaired users can engage fully with our emails.
Additionally, live text loads more quickly and is less likely to be flagged by spam filters, improving deliverability and user experience. This approach ensures that our messages are universally accessible, visually appealing, and effective in reaching our audience.
Images
Selecting appropriate image ratios is essential for creating a visually balanced and responsive layout.
Standardising image ratios ensures images display correctly across different devices and screen sizes.
Consistent ratios prevent cropping issues, maintain visual flow, and allow the design to adapt seamlessly, whether viewed on desktop or mobile. By following these standardised ratios, we ensure that images complement the text and enhance the user experience without disrupting readability or layout structure.
Image sizes
All images should be provided at a width of 1200-1300px. The ideal image file size is 200 KB and the maximum is 1 MB.
Animated GIFs
Animated GIFs in CRM emails can capture attention, convey complex ideas quickly, and add a dynamic element to the design. Used thoughtfully, they enhance engagement by illustrating product features, highlighting new offers, or simply adding a touch of personality to the message.
To keep emails optimised and accessible, GIFs should be kept to a minimal file size (preferable under 1mb) and used sparingly to avoid distracting from key information.
Always include critical messaging in live text, as some email clients don’t support GIFs or may only display the first frame.
Considerations
💡
Keep it simple
💡
GIFs aren’t supported everywhere & some Outlook versions will only show the first frame of your GIF - optimise your GIF for that
💡
Use as few frames as possible
❌
Do not exceed 1MB in file size
Background images
Background images in CRM emails can enhance visual appeal and strengthen brand identity by adding depth and texture. To maximise impact while ensuring readability, use background images sparingly and choose images that are subtle, with low contrast, so they don’t compete with the foreground content.
For sections with text, consider applying a light overlay to keep text legible and accessible.
Considerations
💡
Since some email clients may not support background images, design with a fallback colour to ensure key messages remain clear.
❌
Don’t forget about your fallbacks
❌
Don’t forget to set a mobile version of your image
Design system
A design system is crucial for CRM email campaigns as it creates a cohesive, recognisable brand experience across all customer interactions.
By establishing consistent guidelines for colours, typography, layouts, and imagery, a design system ensures that emails are not only visually appealing but also aligned with brand standards and user expectations. This consistency builds trust and familiarity, making it easier for recipients to engage with content.
Additionally, a well-defined design system streamlines collaboration across teams, accelerates the design process, and enables efficient scaling of campaigns without sacrificing quality or brand integrity.
Buttons
Different button styles - such as primary, secondary, and tertairy - help convey the importance of each call-to-action, enabling users to easily identify what actions to take.
Using live text within buttons, rather than images or graphics, ensures that the text remains readable on all devices and is accessible for screen readers, improving overall usability.
Additionally, live text allows for better scalability and adaptability in varying email clients, ensuring that the message remains clear and compelling.
The border radius of button should be 4px, and padding at 20px:
Hero banners
Hero banners are a powerful design element in CRM emails, serving as a visual focal point that captures attention and conveys key messages at a glance.
Best practices for hero banners include using high-quality images that align with the brand and message, as well as incorporating live text instead of images for the headline and call-to-action. This ensures that critical information remains readable and accessible across all devices, particularly on mobile, where screen space is limited.
Additionally, it's essential to consider how the banner will be displayed on different screen sizes by ensuring that key elements are centrally aligned and not cropped.
Considerations
💡
Where live text can not be used, make sure ALT tags are correctly labelled.
Image library
An organised image library provides easy access to a collection of high-quality, brand-approved visuals, ensuring that all team members can quickly find and use the appropriate images for their email campaigns.
This centralisation reduces the risk of using outdated or unapproved imagery, helping maintain brand integrity and visual coherence across communications.
An image library can streamline the design process, saving time on sourcing and editing images, while also enabling quick updates and adjustments as needed.
Iconography
An icon library provides a curated collection of cohesive, brand-aligned icons that can effectively convey information quickly and intuitively, making it easier for recipients to navigate content.
This consistency in iconography not only reinforces brand identity but also enhances the overall aesthetic of our emails.
Additionally, having a readily available set of icons streamlines the design process, allowing for quicker design iterations and maintaining a uniform look across various campaigns.
